PR：この記事にはアフィリエイトリンクが含まれます。
D3.jsはJavaScriptでSVGを扱い、データから操作可能な可視化を組み立てるライブラリです。棒グラフだけでなく、ネットワーク図や地図も作れます。
D3.jsのおすすめ本には、v7対応の実践書、日本語で基礎を学ぶ本、256ページの概説があります。Pythonでのデータ取得や加工から、JavaScriptでの表示まで扱う本もあります。
4冊の早見表
4冊はページ数も内容もさまざまです。DOM操作を軸にした本から、Pythonでのデータ加工やWebへの配信まで扱う本まで、学べる範囲に幅があります。
価格は参考価格を目安に掲載しました。実売は販売店や時期で変わり、輸入書は為替の影響も受けます。購入時には最新の価格を確認してください。
| 書名 | 内容の軸 | 価格の目安 |
|---|---|---|
 D3.js in Action, Third Edition | 2024年刊・656ページ。D3.js v7、SVG、Canvas、12のプロジェクト | US$69.99 |
 D3 for the Impatient | 2019年刊・256ページ。データ結合、イベント、アニメーション | 販売店で確認 |
 インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化 | 2014年刊。日本語でSVGや操作可能なグラフを解説 | 3,080円 |
 Data Visualization with Python and JavaScript, 2nd Edition | 2022年刊・566ページ。Pythonでの処理からWeb可視化まで | US$65.99 |
ページ数は256ページから656ページまで。内容もD3.jsの基本操作からPythonによるデータ取得・加工、Flaskでの配信まで広がります。早見表では主な範囲と価格を確認できます。
D3が本向きな理由
D3.jsはデータの値を要素の位置や色、大きさに結び付けて図を組み立てるJavaScriptライブラリです。棒グラフからネットワーク図まで、画面上の表現を細かく設計できます。
注釈や操作を加えた棒グラフ、ネットワーク図、地図などを作れます。データの更新に合わせて画面を更新する処理も扱えるのが特徴です。
自由度が高いぶん、軸や目盛り、ラベル、ツールチップを自分で整える場面があります。HTMLやCSSとの役割分担も考えるため、サンプルを写すだけでは迷いやすいですよね。
本ならデータの読み込みから描画、更新、操作までをひと続きで追えます。JavaScriptの基本を押さえて作例を順に動かすと、機能ごとの役割が見えてきます。
データ結合の基礎
D3.jsの理解を支えるのが、データと画面上の要素を結び付けるデータ結合です。月別売上の一覧を棒グラフに対応させると、各月の値が棒の高さになります。
データが増えたら要素を追加し、値が変われば既存の要素を更新します。不要な要素は削除。enter、update、exitは、この追加・更新・削除の流れを示す用語です。
同じデータでも、軸や色への割り当てで伝わる内容は変わります。横軸に月、縦軸に売上を置くか、色で商品カテゴリを分けるかも図の設計で考える点です。
操作を加えると、棒にカーソルを合わせて正確な数値を見せたり、凡例をクリックしてカテゴリを絞り込んだりできます。動きそのものより、読者の疑問を操作で確かめられる設計が大切です。
実務まで広げる第3版
D3.js in Action, Third Editionは2024年5月刊行の第三版です。D3.js v7向けに改訂された656ページの本で、HTML、CSS、JavaScriptの知識があるWeb開発者を対象にしています。
DOM要素の選択や追加、データ結合、更新処理を扱います。描画方式はSVGとCanvas。基礎から幅広い作例へ進める構成です。
ネットワークや地図など12のプロジェクトを収録しています。操作、アニメーション、レスポンシブ表示も取り上げ、動きのある可視化の実装を学べます。
React、Svelte、Angularとの連携も扱います。これらのフレームワークで作るWebアプリに可視化を組み込みたい開発者には、連携例が役立ちます。紙書籍の公式希望小売価格はUS$69.99で、実売は時期や店によって変わります。
要点を短く学ぶ本
D3 for the Impatientは2019年5月刊行の256ページです。プログラミングやデータサイエンスの経験がある方が、D3.jsの考え方と実装パターンを手早く押さえられます。
選択、データバインディング、enter・exit、更新パターンなど、繰り返し使う考え方を扱います。256ページに要点がまとまっているので、短く学びたい方にも読み進めやすいでしょう。
SVGやイベント、アニメーション、インタラクティブなUIを取り上げています。ヒートマップ、ツリー、ネットワーク、再利用可能なコンポーネントの作例もあります。
対象はプログラミングまたはデータサイエンスの経験者です。JavaScriptから学び始めたばかりなら、先に基礎を押さえてから読むと理解しやすくなります。サンプルを現行環境で試す際は、APIの書き方を最新の公式ドキュメントで照らすと安心ですね。
日本語で基礎を読む
インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化は、2014年刊行の日本語書籍です。Web開発者やWebデザイナー、JavaScriptプログラマの初級から中級を対象にしています。
データとページ要素の結び付け方を学び、SVGによる棒グラフや散布図へ進みます。日本語で用語や手順を追いたい方が、データを図に変える流れをつかめる内容です。
データ更新や遷移、ホバー強調、ソート、ツールチップを扱います。レイアウトや地図、エクスポートも取り上げ、グラフの操作から応用まで学べます。
税込3,080円が参考価格です。刊行から年数が経っているため、D3.jsの現行版を学ぶ主教材にする場合は、コードの記法を最新資料で補いながら読むとよいでしょう。日本語で基礎概念をつかむ本です。
データ工程も扱う本
Data Visualization with Python and JavaScript, 2nd Editionは2022年12月刊行、566ページです。PythonまたはJavaScriptで可視化を学びたい初級から中級の方を対象にしています。
Pythonでデータを取得・加工し、Flaskで配信してからJavaScriptとD3.jsでWeb表示する流れを扱います。データ準備からWebへの受け渡しまで学べる内容です。
D3.jsの選択、DOM要素の追加、データ結合、更新、遷移を取り上げます。地図やツールチップに加え、ノーベル賞データの可視化ではフィルターやメニューの例も追えます。
可視化をデータ分析の工程に組み込みたい方や、PythonからJavaScriptへ学びを広げたい方に実用的です。公式希望小売価格はUS$65.99。輸入書の実売価格は時期や販売店、為替によって変わります。
結論
D3.js v7で幅広い実装を学び、地図やネットワーク、フレームワーク連携まで進みたい方には、D3.js in Action, Third Editionをおすすめします。実践例を追いながら学習範囲を広げられる本です。
主要な概念を短く押さえるならD3 for the Impatient、日本語で図の基礎を学ぶならインタラクティブ・データビジュアライゼーションが候補です。データの取得や配信まで知りたい方には、Data Visualization with Python and JavaScript, 2nd Editionが合います。
購入前に、扱いたい作例が地図やネットワーク、グラフのどれかを整理し、Pythonでのデータ処理も必要か目次で確かめましょう。D3.jsの版と対象読者も確認すれば、サンプルを読み進めやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
