Interface pour le brossage des données
Pour un graphique interactif, j'utilise un modèle UX appelé Data Brushing . Mon point de départ est un exemple d3js par Mike Bostock .
Voici à quoi il ressemble dans son état initial:
Le petit graphique ci-dessous agit comme un contrôle de plage pour le grand graphique (affichage) ci-dessus. Lorsque vous sélectionnez une plage, par exemple de janvier 2001 à janvier 2002, le grand graphique est mis à jour pour afficher uniquement les données de cette plage.
Le problème que j'ai avec cette interface est que la relation entre les deux graphiques n'est pas très claire pour les nouveaux utilisateurs.
Ma question est:
Comment d'autres personnes ont-elles résolu des problèmes comme celui-ci? Existe-t-il des modèles de conception établis pour des problèmes comme celui-ci?
Comme vous l'avez mentionné, les 2 graphiques sont "déconnectés" l'un de l'autre et il n'y a pas de relation visuelle claire pour les relier entre eux.
J'ai vu des contrôles comme ceux-ci couramment utilisés pour représenter graphiquement les actions et mettre un lien explicite entre les 2 graphiques est certainement la meilleure façon d'établir un lien entre eux.
Les graphiques de Google Finance fournissent un bon exemple en reliant les graphiques et en atténuant le scrubber de plage pour offrir des possibilités: 
Pour essayer le contrôle: http://www.google.com/finance?q=NASDAQ%3AMSFT&ei=x1kkUqCNBsSikgWfigE
Yahoo fait également quelque chose de similaire en obscurcissant le graphique inférieur (aperçu), mais ne connecte pas explicitement les 2 graphiques: 
Ce type de graphique est de plus en plus courant, mais un simple effet de couleur peut aider l'utilisateur.
Vous devez changer votre état initial en un état déjà zoomé où supérieur et inférieur sont différents pour plus de clarté. 