D3とは？

D3（またはD3.js）は、データを可視化するための無料のオープンソースJavaScriptライブラリです。ウェブ標準に基づいて構築されたその低レベルのアプローチは、動的なデータ駆動型グラフィックスを作成する上で比類のない柔軟性を提供します。10年以上にわたり、D3は画期的で受賞歴のある可視化を支え、より高レベルのグラフライブラリの基礎となる構成要素となり、世界中のデータ実務家の活気のあるコミュニティを育成してきました。

D3は「この分野を前例のない成長、多様化、創造性へと一気に押し上げ」、「ニュースルーム、ウェブサイト、個人のポートフォリオで作成される何百万ものデータ可視化の方法を変えた」と、Information is Beautifulの2022年のTest of Time Awardで評されました。IEEE VISの2021年のTest of Time Awardでは、「ウェブ開発者がインタラクティブな可視化を作成するために魅力的で使いやすいフレームワークを作成することで、著者たちは間違いなくデータ可視化を主流にするのに貢献した。[D3]はこの会議、そしてより一般的には私たちの分野全体の成功に対する基礎的な貢献である」と述べました。

D3は2011年にMike Bostockによって作成されました。Mikeは、スタンフォード大学でJeff HeerとVadim Ogievetskyと共にD3に関する論文を共著しました。Jason Daviesは、2011年から2013年にかけてD3に大きな貢献をし、特にD3の地理的投影システムに貢献しました。Philippe Rivièreは、2016年以来、D3とそのドキュメントに大きく貢献しています。長年にわたり、数え切れないほど多くの親切な人々がコードやアイデアを共有したり、教えたり質問に答えたり、可視化の実践をさらに進めるために人々を結びつけたりすることで、D3に貢献してきました。MikeとPhilippeは現在、D3とObservable PlotをObservableで管理しています。

D3は低レベルのツールボックスです

D3は、従来の意味でのグラフ作成ライブラリではありません。「グラフ」という概念はありません。D3でデータを可視化する場合、さまざまなプリミティブを構成します。

積み上げ面グラフを作成するには、以下を使用する場合があります。

• データをロードするためのCSVパーサー、
• 水平位置（x）の時間スケール、
• 垂直位置（y）の線形スケール、
• 色の順序スケールとカテゴリ別スキーム、
• 値を配置するためのスタックレイアウト、
• SVGパスデータを生成するための線形曲線を持つ領域シェイプ、
• 位置エンコーディングを文書化するための軸、および
• SVG要素を作成するためのセレクション。

たくさんあって大変ですよね？でも、深呼吸してください。すべてを一度に学ぶ必要はありません。各部分は独立して使用できるため、それらを組み合わせて使用する前に個別に学習できます。D3は単一のモノリスではなく、30個の個別のライブラリ（または「モジュール」）のスイートです。ツールが設計を反復する際にすぐに利用できるように、必要性というよりも利便性のためにこれらのモジュールをまとめています。

D3ツールボックスには何が含まれているのでしょうか？ドキュメントと例を調べて、自分に関連するものについて理解を深めることをお勧めします。

ヒント

D3の低レベルの制御が必要な場合を除き、高レベルの姉妹ライブラリであるObservable Plotをお勧めします。D3ではヒストグラムを作成するのに50行のコードが必要になる可能性がありますが、Plotでは1行で済みます。Plotの簡潔で表現力豊かなAPIを使用すると、ウェブ開発の代わりにデータの分析と可視化に集中できます。PlotとD3を組み合わせて両方の利点を活用することもできます。

D3は柔軟です

D3には包括的な「グラフ」の抽象化がないため、基本的なグラフでも数十行のコードが必要になる場合があります。良い点としては、すべての要素が目の前に配置されており、何が起こるかを完全に制御できることです。可視化を調整して、目的を正確に達成できます。D3にはデータのデフォルトの表示はありません。自分で記述したコード（または例からコピーしたコード）があるだけです。

D3を「すべてを自分で行う」ことの代替手段として考え、高レベルのグラフ作成ライブラリの代替手段として考えないでください。他のツールに満足できず、SVGやCanvas（あるいはWebGL）を使用して独自のグラフを作成しようとしている場合は、D3のツールボックスを調べてみるのも良いでしょう。創造性を損なうことなく、夢のグラフを作成するのに役立つものがほぼ確実にあります。

D3はウェブで機能します

D3は新しいグラフィカルな表現を導入するのではなく、SVGやCanvasなどのウェブ標準を直接使用します。

「D3」という名前は、データ駆動型ドキュメントの略で、ここでドキュメントは、ウェブページの内容を表すドキュメントオブジェクトモデル（DOM）標準を指します。D3のモジュールの一部（セレクションやトランジションなど）はDOMに触れますが、他のモジュール（スケールやシェイプなど）はデータに対してのみ動作します。D3は、React、Vue、Svelteなどのウェブフレームワークと組み合わせることもできます。推奨事項については、入門ガイドを参照してください。

D3がウェブ標準を採用していることには多くのメリットがあります。たとえば、外部スタイルシートを使用してグラフの外観を変更したり（レスポンシブグラフやダークモードなどのメディアクエリに対応する場合でも）、デバッガーと要素インスペクターを使用してコードの動作を確認したりできます。また、D3の同期的な命令型評価モデル（selection.attrを呼び出すとDOMがすぐに変更される）により、複雑な非同期ランタイムを備えたフレームワークよりもデバッグが容易になる場合があります。

D3はオーダーメイドの可視化向けです

D3は物事を可能にするものであり、必ずしも簡単にするものではありません。簡単であるべき単純なことでも、多くの場合そうではありません。Amanda Coxの言葉を言い換えれば、「D3は、棒グラフのために100行のコードを書くのがごく普通のことだと思う場合に使うべきです。」

オーダーメイドの可視化で最大の表現力が必要な場合は、D3を検討する必要があります。D3は、The New York TimesやThe Puddingのようなメディア組織に適しています。そこでは、1つのグラフィックが100万人の読者に見られる可能性があり、編集者のチームが協力して視覚コミュニケーションの最先端を進めることができます。

一方、D3は、プライベートダッシュボードや単発の分析をまとめるには過剰です。魅惑的な例に惑わされないでください。それらの多くは実装に多大な労力を費やしています。時間に制約がある場合（誰でもそうですが）、Observable Plotを使用すると、より優れた可視化や分析を作成できる可能性が高くなります。

D3は動的な可視化向けです

D3の最も斬新な概念は、データ結合です。データのセットとDOM要素のセットが与えられた場合、データ結合を使用すると、entering、updating、およびexiting要素に対して個別の操作を適用できます。静的なグラフ（アニメーションやユーザー入力に応答しないグラフ）のみを作成する場合、この概念は直感的でない、または不必要であるため、奇妙に感じるかもしれません。

データ結合は、データが変更されたときに正確に何が起こるかを制御し、それに応じて表示を更新できるように存在します。この直接的な制御により、非常にパフォーマンスの高い更新（DOMを差分することなく、変更する必要のある要素と属性のみを変更する）と、状態間のスムーズなアニメーション遷移が可能になります。D3は、動的なインタラクティブな可視化に最適です。（2012年の「512 Paths to the White House」の州の切り替えをoptionキーを押しながらクリックしてみてください。本当に。）