データブラッシングのインターフェイス
インタラクティブグラフでは、UXパターン Data Brushing を使用しています。私の出発点は Mike Bostockによるd3jsの例 です。
これは、初期状態では次のようになっています。
下の小さいグラフは、上の大きい（表示）グラフの範囲コントロールとして機能します。たとえば2001年1月から2002年1月までの範囲を選択すると、大きなグラフが更新され、その範囲内のデータのみが表示されます。
このインターフェイスで私が抱えている問題は、2つのグラフの関係が初めてのユーザーには非常に不明確であるということです。
私の質問は：
他の人々はこのような問題をどのように解決しましたか？このような問題に対して確立された設計パターンはありますか？
すでに述べたように、2つのグラフは互いに「切断」されており、それらをリンクする明確な視覚的関係はありません。
株価のグラフ化に一般的に使用されるこれらのようなコントロールを見てきました。2つのチャートの間に明示的なリンクを配置することは、確実にそれらの間のリンクを確立する最良の方法です。
Google Financeのグラフは、グラフをリンクし、範囲スクラバーを淡色表示してアフォーダンスを提供することにより、良い例を提供します。 
コントロールを試すには： http://www.google.com/finance?q=NASDAQ%3AMSFT&ei=x1kkUqCNBsSikgWfigE
Yahooも下のグラフ（概要）を淡色表示することで同様のことを行いますが、2つのグラフを明示的に関連付けていません。 
これらの種類のグラフはますます一般的ですが、単純な色の効果はユーザーに役立ちます。
より明確にするために、初期状態を既にズームされた状態に変更し、上部と下部が異なるようにする必要があります。 