はじめに

仕事や研究、また趣味の分野でも、様々な情報をわかりやすく伝えるために、グラフ（チャート）を用いて可視化することがあります。あまりに一般的なものであるため、おそらく誰もが一度は作成されたことがあるのではないかと思います。

グラフには折れ線グラフ、棒グラフ、円グラフなど、多くの種類があります。作成方法もさまざまなものがあり、Excel等のOffice系ソフトや、PythonやRといったプログラミング言語のライブラリ、またBI（Business Intelligence）などが挙げられます。最近ではFlourishやDatawrapperといった、クラウド上でインタラクティブなグラフを作成できるツールも出てきています。

当たり前にもほどがある前書きはさておき、今回はその作成方法のひとつである「D3.js」なるものをご紹介します。本記事ではD3.jsの概要、強み、弱みをご紹介し、どうすれば良いのかも含めてご説明したいと思います。

D3.jsではグラフを作るためにコード（プログラム）を書く必要があります。しかし、当アカウントは野球絡みの記事が主体なこともあり、グラフの作成に馴染みのない方でもイメージをつかんでいただけるよう、本記事ではあくまでも概略のご紹介に留めたいと思います。「こんなものもあるんだ」と思っていただければ、これに勝る喜びはございません。

D3.jsとは

Baseball Savantのグラフをつくっているものです

野球、特にMLB好きな方であれば、「Baseball Savant」というサイトを一度はご覧になったことがあるのではないでしょうか。投手がどんな球を投げたか、また打者がどんな打球を打ったかといった情報が多様なグラフを用いて可視化されており、見た目にも楽しいサイトです。

Baseball Savantで使われているグラフは、どれもきれいでわかりやすいものです。しかし、それらは決して単純な代物ではありません。Excel等でも再現できなくはないかもしれませんが、相当の苦行を強いられます。では、これらのグラフは何を使って作られているのでしょうか。

お察しだと思いますが、ここで登場するのがD3.jsです。Baseball Savantのグラフは、D3.jsで作成されています。MLBAM（MLB Advanced Media）のシニアデータアーキテクト、Tom Tangoも以下のように述べています。

で、結局なんなの？

D3.jsは「JavaScript」という、主にWebサイトで使用されるプログラミング言語のライブラリ（部品の集まり）です。「D3」とは「Data Driven Documents」の略称であり、読んで字のごとくデータに基づいた可視化を実現するための機能を持つものです。とんでもなく雑に言えば、「Webページでグラフを作成するためのプログラム」です。開発は2011年から開始されており、意外に歴史のあるライブラリだったりします。

D3.jsはJavaScriptなので、Webページの一部として機能することになります。Webページで見た目をいじる方法にはHTMLやCSS（スタイルシート）といったものがありますが、D3.jsはこれらも含めて活用できるため、見た目のより細かい調整が可能となります。なお、データソースにはCSVやJSONといった多様な形式に対応しています。

ぐちゃぐちゃごたくを並べていますが、ものを見た方が早いかもしれません。そこで素人ふぜいの作成したへたくそなサンプルをお見せしたいと思います。このようなグラフをExcelやPythonのライブラリで作成することはかなりの困難を伴います（自分は断念しました）が、これがD3.jsを使うことで実現できますよ、ということです。

よいところ

自由度の高さ

ご自身の手で紙にグラフを書いたことはあるでしょうか。手書きの場合、いちいち軸や図形や値を書いていかなければなりません。言うまでもなく面倒です。ExcelやBIツールは、簡単にグラフを作成する機能を提供することで、このような面倒から人間を解放してくれています。

その一方、人間とはすごいもので、どんな形でも絵にすることができます。棒グラフや円グラフといった定型的なグラフでなく、謎の形状をした「ぼくのかんがえたさいきょうのグラフ」であっても、紙になら書くことができます。

D3.jsの考え方はこれに近いものがあります。Excel等の場合、グラフの形状を選ぶところからスタートしますが、D3.jsでは「軸を描く」「図形を描く」「ラベルを描く」といったそれぞれのプログラムを書いていくことになります。「棒グラフを作りました」ではなく、「線と図形の集合体が（結果として）棒グラフになりました」というイメージです。

このように線、図形、あるいは動きといったような要素を自由に作成・配置することができるため、既存の枠にとらわれないグラフを作成することができます。

インタラクティブ性

先ほどお見せしたへたくそなサンプルはあくまでも静的なグラフ（画像）ですが、D3.jsではインタラクティブなグラフを作成することも可能です。カーソルを当てることで値を表示させることはもちろん、時系列に応じて表示内容を変更させたり、ドラッグアンドドロップで動くグラフを作成することもできます。

D3.jsには公式サイトがあり、インタラクティブなグラフのサンプルも豊富にあります。もしご興味のある方は一度ご覧になってみるとよろしいかと存じます。

よくないところ

とにかく、面倒

先ほど「手書きに近いものがある」といった旨の内容を書きましたが、手書きのデメリットである「くそめんどくせえ」がそのままD3.jsにも跳ね返ります。Excelなら数分もかからずに作成できる単純な棒グラフであっても、データを抽出し、軸を描き、棒を描き、ラベルを描くといった作業を都度プログラムとして書かなければならないため、数十行のコードになります。これがとにかくしんどいです。

また、D3.jsではフィルタリングや累計といったデータの処理も柔軟に行うことが可能ですが、これらについても当然コードを書かなければなりません。要件が複雑になると、100行を超えることもザラにあります。「じゃあ定型的なグラフでいいじゃん」というご指摘はまさにその通りで、それで十分に用を満たすのであれば、他の手段を検討されるのが早道かと思います。
D3.jsに限った話ではありませんが、効率とクオリティ（またはこだわり）のどちらを優先するかを勘案した上で、最適な手段を選択されるのがよろしいと思います。

日本語情報の圧倒的な少なさ

Baseball SavantでD3.jsが使用されていると述べましたが、海外では広く普及しており、New York TimesやFinancial Timesといったメディア等でも活用されています。そのため英語での情報は比較的豊富なのですが、なぜか日本語の参考資料が極めて少ないのが現状です。
ひょんなことからD3.jsの存在を知り、いざ学習しようと参考書をAmazonで探したところ、10年ほど前に出版された書籍がトップに出てきて途方に暮れた覚えがあります。

そんな中、日本語でほぼ唯一体系的に情報を提供してくださっているのが以下のサイトです。より詳しい情報をお知りになりたい方は、一度ご覧になってみてください。

基本的な情報をまとめてくださっているサイトがあるとはいえ、D3.jsはその自由度の高さゆえ、記載の情報をそのまま応用できるわけではありません。また、JavaScriptの知見を必要とするため、初学者にとってはかなりハードルの高い手段となってしまっています。

対策案

棒グラフや円グラフといった枠にとらわれず自由な形のグラフを作成できるメリットがある一方、異様に面倒で学習のハードルも高いのがD3.jsの偽らざる内容かと思います。ただ、これでは「難しいですね」で終わってしまい、ちっとも面白くありません。ではどうすれば良いのでしょうか。

ここでご提案したいのが、生成AIの活用です。誤った情報を出力しがちなど、まだまだ短所もあるものの、ことプログラミングについては優れたパフォーマンスを示しており、すでにシステムの開発現場で活用されているケースも多いと聞きます。

何より素人にとって最も心強いのが、「雑な指示でもコードを書いてくれる」点です。指示を出す側にプログラミングの知識がなくとも、「こんなグラフを作りたいです」といった指示を出せば、AIがコードを作成してくれます。必ずしも指示通りの結果になるとは限りませんが、そこは「ここがおかしいから直して」と修正指示を出し、対話を繰り返すことで望ましい形に近づけていくことが可能です。本来であれば言語に関する知識を有しておくのが望ましいのですが、とっかかりにも乏しい現状ですので、このような手段も活用してみても良いのではないかと思います。

試しに棒グラフのサンプルコードを作るよう指示を出したところ、数秒でコードの案を出してくれました。

生成AIのメジャーなところでは、ChatGPT（OpenAI）やClaude（Anthropic）といったものがあります。精度の高いモデルは有料ですが、無料でも十分役に立つと思います。

まとめ

D3.jsは手早く汎用的なグラフを作成することには向きません。しかし、その自由度と機能の豊富さから、（がんばり次第にはなってしまいますが）非常に表現力の豊かなグラフを作成することが可能です。

実現までのハードルは高いですが、思ったものができた時の満足感は何物にも代え難いものがあります。もし「こんなグラフ作れたらいいな」「こんなこだわり反映したいな」といった要望がある場合、またそれらをWebに公開したい場合、実現手段として有効な選択肢になり得るのではないかと思います。