複数のタイプの視覚化を表示する分析アプリを開発しています。たとえば、株式に関する情報を表示するページがある場合、その株式の相関と共分散の両方をベンチマークで表示したいと思います。
問題は、Webビューの視覚化にJavaScriptライブラリ(D3.js)を使用していて、1つのページに複数のグラフを表示する方法を考えていることです。
私は:
後者を使用すると、ユーザーが下にスクロールする必要がなくなります(いくつかの場所で読みましたが、ユーザーにとって少し苛立たしい場合があります)が、理想的には両方のグラフを一緒に表示したいので、ユーザーが状況に応じて問題を抱えることになります。 。
元の質問に回答するには(使用するグラフ作成ライブラリや目的のデータ視覚化方法に適した分析とは関係なく)、次のことを検討できます。
両方のグラフを上下に表示します(この場合、ユーザーは2番目のグラフを表示するためにページを下にスクロールする必要があります)
およびアンカーのある領域の紹介 2つの視覚化(および他の重要な同等のページ見出し)
または、データ視覚化タイプを最初のグラフの上にあるドロップダウンとして使用することも検討できます。
表示:|相関図V |
ユーザーが希望する視覚化タイプを選択できるようにします。
次に、ユーザーは(視覚化タイプの)ユーザー選択を好みと見なします(したがって、アプリケーションで記憶する必要がありますか?)
タッチデバイスでは、下にスクロールしてもユーザーの労力が少なくて済みます。
技術的な観点から、私はC3- http://c3js.org/ またはdc-js- https:// dc-js。 github.io/dc.js/ d3で最初からグラフを作成する時間のかかる詳細を回避する(そのようなライブラリは他にもたくさんあります)
幸いにも、C3には1つのグラフに複数の系列を含めるオプションがあり、データのスケールが大きく異なる場合は2つの別々のy軸(左1つ、右1つ)があるため、共通のxを共有している場合は組み合わせることができます-軸。これにより、3つ目のオプションとして個別のグラフをまとめて使用する必要がなくなります。
凡例は、個々のシリーズをインタラクティブに非表示にするためにも使用できます。c3リンクには多くの例があります
について:
ユーザーが同じページにとどまり、同じページに属する2つまたは3つのグラフをスワイプできるTinderのようなスワイプオプションを表示しますか?
考えられる可能性のある解決策は、モバイル画面に収まらない(幅に関して)グラフに対して水平スワイプジェスチャを使用することです。したがって、40年間(x軸)の年間データを表示するとします。最小幅を許可すると、ユーザーはチャート軸の忠実度を失わずに小さな画面で水平スクロールを実行できます。