web-dev-qa-db-ja.com

データブラッシングのインターフェイス

インタラクティブグラフでは、UXパターン Data Brushing を使用しています。私の出発点は Mike Bostockによるd3jsの例 です。

これは、初期状態では次のようになっています。

enter image description here

下の小さいグラフは、上の大きい(表示)グラフの範囲コントロールとして機能します。たとえば2001年1月から2002年1月までの範囲を選択すると、大きなグラフが更新され、その範囲内のデータのみが表示されます。

enter image description here

このインターフェイスで私が抱えている問題は、2つのグラフの関係が初めてのユーザーには非常に不明確であるということです。

私の質問は:

他の人々はこのような問題をどのように解決しましたか?このような問題に対して確立された設計パターンはありますか?

19
nimrod

すでに述べたように、2つのグラフは互いに「切断」されており、それらをリンクする明確な視覚的関係はありません。

株価のグラフ化に一般的に使用されるこれらのようなコントロールを見てきました。2つのチャートの間に明示的なリンクを配置することは、確実にそれらの間のリンクを確立する最良の方法です。

Google Financeのグラフは、グラフをリンクし、範囲スクラバーを淡色表示してアフォーダンスを提供することにより、良い例を提供します。 enter image description here

コントロールを試すには: http://www.google.com/finance?q=NASDAQ%3AMSFT&ei=x1kkUqCNBsSikgWfigE

Yahooも下のグラフ(概要)を淡色表示することで同様のことを行いますが、2つのグラフを明示的に関連付けていません。 enter image description here

ここで試してください: http://finance.yahoo.com/echarts?s=MSFT#symbol=msft;range=20110120,20130902;compare=;indicator=volume;charttype=area;crosshair=on; ohlcvalues = 0; logscale = off; source = undefined ;

16
F21

これらの種類のグラフはますます一般的ですが、単純な色の効果はユーザーに役立ちます。

より明確にするために、初期状態を既にズームされた状態に変更し、上部と下部が異なるようにする必要があります。 Graph with color

35
ColdCat