実践的なデータ可視化

第11章. Chart.jsとHighchartsテンプレート

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

第6章では、Google Sheets、Datawrapper、Tableau Publicといった、インタラクティブなチャートを作成するための強力なドラッグ・アンド・ドロップ・ツールについて見てきた。

この章では、 人気のある2つのJavaScriptライブラリ、Chart.jsと Highchartsを使ってインタラクティブなチャートを作成してみる。読者がJavaScriptやその他のプログラミング言語に習熟しているとは思わないので、GitHubアカウントにコピーし、データファイルを代入し、コードを一行も書かずにウェブに公開できるようなテンプレートをデザインした。コードに興味のある読者のために、テンプレート内のJavaScriptコードをどのようにカスタマイズできるかを紹介しよう。

なぜ、使いやすいDatawrapperやTableauよりもJavaScriptを好むのだろうか？ いくつかの理由がある。JavaScriptのコードは、最初は圧倒され、敷居が高く感じるかもしれないが、色、パディング、インタラクティブ性、データハンドリングなど、ほとんどのサードパーティーツールが提供できる以上のカスタマイズが可能だ。加えて、サードパーティーのアプリが永久に無料、あるいは少なくとも無料のままであるかどうかはわからないが、オープンソースのツールは、誰かがコードをメンテナンスする限り、無料で使い続けることができる。

注

どちらのライブラリもオープンソースだが、 Highchartsは、個人、学校、非営利団体のWebサイトなど、非商用プロジェクトでのみ無料で使用できる、より厳格なライセンスが付属している。このことを念頭に置いて、我々は主にChart.jsに焦点を当てる。Chart.jsはMITライセンスの下で配布されており、商用プロジェクトにもライブラリを使用することができる。

表11-1に、この章で取り上げるすべてのチャートのタイプをリストアップする。両ライブラリには、Chart.jsサンプルや Highchartsデモで調べることができる、より多くのデフォルト・チャート・タイプが含まれている。ただし、7章のチャート・デザイン原則のセクションで説明した理由から、3次元チャートなど、いくつかのチャート・タイプの使用は控えることを強く勧める。

表11-1. チャート・コードのテンプレート、ベスト・ユース、チュートリアル

チャート	この本で最高の使い方とチュートリアル
棒グラフまたは列グラフ
	カテゴリーを並べて比較するのがベストだ。ラベルが長い場合は、縦列ではなく横棒を使う。 パワーツール：「Chart.jsで棒グラフや列グラフを作成する
棒グラフ/列グラフのエラーバー
	カテゴリーを並べて比較する場合は、誤差の棒グラフを表示するのがベストである。ラベルが長い場合は、縦列ではなく横棒を使用する。 ...