Web時代のチャート【翻訳】

この記事は作者Jeromeさんの同意を得て翻訳したもので5つの一連の記事の2つ目です。
SOURCE: Charts in the age of the web
1. ハロー、ダッシュボード！
2.Web時代のチャート
3.ダッシュボード vs データビジュアライゼーション
4.プロダクトとしてのダッシュボード
5.チャートアセンブル！

2008年頃、私がOECDで働いていたとき、私の仕事の肩書はエディターでした。それは私がほとんど本の仕事に取り組んでいたことを示しています。私はチャートをデザインしていましたが、それは本の構成要素の1つとして見られていました。それはその時代としては当たり前のことでした。

ですので、私達はこんな感じのチャートを作っていました。

そして、それは最高でした（たぶん）！私たちはすべての過去のルールを尊重しました。いい感じのy軸を見てください！そしてすべてのカテゴリは、x軸上にあります。バーのサイズが順序付けられおり、どれが最大のまたは最小値を持っているかを確認するのは簡単です。そして、これらの素晴らしいグリッドラインで、値を調べることができます, 少なくとも大きさの順序を得るのは容易でしょう。

まあ、実際にやったことはExcelにスタイルを適用することだったのですが。

インタラクティブチャートVS印刷チャート

印刷チャートルールの起源

昔ながらのチャートのルールは（たくさんあります、詳しくはTufteもしくはStephen Fewに聞いてください皆が興味を引くような想定をいくつか設定することです。

まず1つ、チャートは値が容易に読み取れるようにしなければなりません（おおよその値だったとしても）。ですので、ラベルをもった軸やグリッドラインは有用なのです。また、値順に棒グラフを並べ替える理由もここにあります。このことを念頭に置くと、棒チャートまたはエリアチャートのような面を比較するチャートは、0から始めるのは理にかなっています。

次に、一度に全てのデータを表示するということです。私たちは、すべてのデータポイントが表現され、しかも読みやすいということを維持する必要があります。そしてどのデータセットを使うかきっぱりと決める必要があります。

同様にチャートの形式を決める必要があります。カテゴリを比較したい場合、棒チャートを選ぶことができます。また、時間の経過とともに進化を表示したい場合は折れ線チャートを選ぶことも出来ます。ユーザーに正確な値を知ってほしかったらテーブルビューを選ぶことができます。

ですので、テーブルビュー以外の形式が選ばれた場合は全てのデータポイントを表示することはできません、それは現実的ではありません。

このフレームワークでは、Tufteanコンセプトの土台となっている データ·インクで考えることは理にかなっていると思います：印刷で使うインクはデコーレーションでなくデータをエンコードするために使うべきである、というコンセプトです。

では今はどうだろう？

しかし、今日のWebやモバイルチャートの世界でも有効であるとは言えないでしょう。

Webチャートは、ユーザが指定したデータポイントの追加情報を取得できるような多くのメカニズムを持っています。モバイルではうまくいかないこともありますが、mouseoverで情報を更新することもできます。しかし、それは元々表示されているもの以上のものを得ることは間違いありません。正確な値を知りたい場合、単にチャートの形状からそれを推測する必要はありません。オンデマンドにそれを提供することができるのです。

例：Google Financeの株価チャート

Google Financeの株価チャートは、Webネイティブチャートの最も代表的な例の1つです。2006年以来、ニュースのコンテキストとともに、指定された株価を提供します。ビジュアルデザインそのものは、他のダッシュボード負けているかもしれませんが、だれでも見れる状態で提供されているという点で素晴らしい例です。ビジネスデータでこういったことはまれです。

このチャートは、グリッド線とラベルの軸を有しているが、それは正確な値を調べるのに十分ではありません。しかし、チャート上にマウスを移動すると、ユーザーはある時点で正確な値を読み取ることができます。青い点が表示され、左上隅で正確な値を得ることが出来ます。

日付ピッカー（チャートのタイムレンジをコントロールする）は最も一般的に使われるデータフィルタの1つです。 別の時間範囲を選択することにより、チャートは、データセットの異なるスライスを表現することができます。これは、データセットの全てが一度に表示される従来の印刷されたチャートとは対照的です。例えば、「6m」をクリックすることができ、最後の6ヶ月からのデータで処理されるのです。

複数の証券を比較すると、チャートは異なるモードでデータを表示するようになります。これは、同じデータであり、同じ画面と同じコンテキストで、しかしチャートそのものはは視覚的に非常に異なっています。

他にも2つの特徴的な機能があります。元データとなるデータ全てに左のカラムからリンクすることができます。また最初のスクリーンショットの文字と小さなフラグはクリック可能であり、関連するニュースを表すことができます。それらをクリックすると、右側の欄にその記事が強調表示されます。だから、より多くの情報を得ることが常に可能です。

それは何を変えるのでしょうか？

すべて、です。

参照や比較が困難なルールやベストプラクティスはもはや重要ではありません。チャート自体は、しかし読みやすい必要があります。パイチャートやドーナツチャートを使っても構いませんが、カテゴリが読めないほど多くないという前提においてのみです。

Webチャート、なおさらダッシュボードは、関連するデータのみを表示することにフォーカスすべきです。 そして有用度の高いものを見やすく表示するのです。繰り返しますが、それに対して印刷向けのチャートの基本は可能な限りのデータを表示することです。

どうやってこれをやるかは次の記事：ダッシュボード vs データビジュアライゼーションで取り上げます。