web-dev-qa-db-ja.com

データ視覚化のためのプロトタイピング

多くのプロトタイピングのケースでは、チャート、グラフ、およびあらゆる種類のデータの視覚化を生成する必要があります。それらを簡単かつ迅速に生成するためのツールを探しています。

現在、MS Excelが私に代わって機能しますが、より良い代替手段を探しています。また、膨大な量のコンポーネントライブラリがあることも承知していますが、このタスクのコーディングを行いたくありません。

example of chart sketches

2
Dvir Adler

データVISのUXを行う場合、実際のデータは重要です。

たとえば、比較したいデータを含む棒グラフを表示する場合、ワイヤーフレームは、Y軸の最大値と最小値が同じであることを明確に示す必要があります。

別の例:Y軸の最小値と最大値が同じである2つの棒/折れ線グラフがある場合、横に並べて表示するのが最適です。同じ高さは両方のグラフで同じ値を表すため、これによりそれらを簡単に比較できます。

正直なところ、ストックグラフにデータをインポートできないため、datavisのプロトタイピングに適したUXツールは見つかりませんでしたが、そのデータは使用可能なレイアウトを決定するために不可欠です。

tl; dr: Excelで実行できる場合は、Excelで実行し続けます。

3
Racheet

Adobe Illustratorを使用しています。チャートを手作業で作成することもあれば、チャートツールを使用することもあります。扱いにくいですが、機能します。ほとんどの場合、両方を組み合わせて使用​​します。つまり、そこにあるデータを単に更新することはできません。入力は手動で行われますが、それが不格好です。

Excelが機能的には機能するが美的には機能しない場合、Excelからグラフを.svgまたは.eps形式でエクスポートし、AIで美学を作り直します。

これがまさに私がD3を学び始めた理由であり、DataVis用の製品がないことは迷惑です。

2
Zoe K

チャートも生成する必要があります。私は通常、ハイチャートまたはExcelを使用してプロトタイプを作成し、必要に応じてフォトショップ(またはサイトのHTMLモックアップ)に配置します。どちらの場合でも、プロトタイプがチャート自体の検査でない限り、データはそれほど重要ではありません。

多くの場合、一般的な折れ線グラフまたは面グラフで十分です。 Excel、highcharts、googleチャートで作成した何十もの「ダミー」チャートが実際にあり、ワイヤフレームのさまざまな領域に接続しています。プロトタイプが進むにつれて、ディスカッションは実際に表示されるグラフに進みます。したがって、面グラフに重ねられた折れ線グラフがデータを正確に表すものである場合、それは提示されたものです(半現実的なデータ範囲で)。先に述べたように、Excelまたはハイチャートでこれらのチャートを簡単に作成してから、それら/スクリーンショットなどをインポートできます...

プロセスの最後にのみ、ユーザーは「機能する」プロトタイプを要求し始めることがわかりました。その時点で、開発者は通常、プロセスに関与しています。

2
Mayo