D3.js入門 - データ可視化の決定版ライブラリを使いこなす

はじめに

データ可視化、やってますか。

個人的に、Webでデータをビジュアライズしようと思ったとき、真っ先に思い浮かぶのがD3.jsなんですよね。正式名称は「Data-Driven Documents」。その名の通り、データ駆動でドキュメント（DOM）を操作するライブラリです。

GitHubスター数は驚異の11万超え。15年以上の歴史があり、今なお月間1800万〜2300万ダウンロードを誇る化け物級のライブラリです。Chart.jsやRechartsといった高レベルなチャートライブラリの多くがD3をベースにしているという話もあって、いわばデータ可視化界のレジェンド的存在ですね。

とはいえ「D3は難しい」というイメージを持っている人も多いと思います。実際、学習コストは高め。でも、その分自由度は他のライブラリとは比べ物にならないんですよ。

D3.jsの特徴・メリット

圧倒的な自由度

D3の最大の強みは、Webの標準技術（SVG、Canvas、HTML）を直接操作できること。ローレベルなAPIを提供しているので、既存のチャートライブラリではできないような独自のビジュアライゼーションも実現できます。

正直なところ、「棒グラフを表示したいだけ」ならChart.jsで十分です。でも、「このデータをこういう形で見せたい」という明確なビジョンがあるなら、D3一択ですね。

データバインディングの概念

D3の核心はデータバインディング。データとDOM要素を紐づけて、データの変化に応じてDOMを更新する仕組みです。これ、意外とReactの考え方に近いんですよ。データが変わればUIも変わる。

// データをDOM要素にバインド
d3.selectAll("rect")
  .data(dataset)
  .join("rect")
  .attr("height", d => d.value);

豊富なモジュール群

D3は30以上のモジュールで構成されています。必要なものだけインポートすればバンドルサイズも抑えられる。フルパッケージでも96.5KB（minified + gzipped）なので、まあ許容範囲かなと。

主なモジュール：

d3-selection: DOM操作
d3-scale: スケール変換
d3-axis: 軸の生成
d3-shape: 図形の生成
d3-transition: アニメーション
d3-geo: 地理データの処理

アニメーションとインタラクション

トランジションAPIを使えば、スムーズなアニメーションも簡単に実装できます。グラフがぬるっと動くと、それだけでプロっぽく見えるからQOL上がりますよね。

インストール方法

npm/yarn/pnpmでインストール

プロジェクトで使うなら、パッケージマネージャー経由が基本です。

# npm
npm install d3

# yarn
yarn add d3

# pnpm
pnpm add d3

CDN経由で読み込み

プロトタイプやちょっとした検証なら、CDNが手軽です。

<!-- ESモジュール形式（推奨） -->
<script type="module">
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
</script>

<!-- UMD形式（グローバル変数として使う場合） -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

個人的にはESM形式を推奨します。Tree Shakingも効くし、モダンな書き方ができるので。

基本的な使い方

シンプルな棒グラフを作ってみる

まずは基本中の基本、棒グラフから。

import * as d3 from "d3";

// データ
const data = [
  { label: "A", value: 30 },
  { label: "B", value: 80 },
  { label: "C", value: 45 },
  { label: "D", value: 60 },
  { label: "E", value: 20 }
];

// サイズ設定
const width = 500;
const height = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };

// SVG要素の作成
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// スケールの設定
const x = d3.scaleBand()
  .domain(data.map(d => d.label))
  .range([margin.left, width - margin.right])
  .padding(0.1);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .nice()
  .range([height - margin.bottom, margin.top]);

// 棒の描画
svg.selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", d => x(d.label))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => y(0) - y(d.value))
  .attr("fill", "steelblue");

// X軸
svg.append("g")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x));

// Y軸
svg.append("g")
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y));

コード量は多めに見えますが、やっていることは単純です。スケールを定義して、データをバインドして、属性を設定する。この流れを覚えれば、大体のグラフは作れます。

Reactでの使い方

30代エンジニアならReact使っている人も多いですよね。D3とReactを組み合わせる場合は、useRefとuseEffectを使うのが定石です。

import { useRef, useEffect } from "react";
import * as d3 from "d3";

function BarChart({ data }) {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    // ここでD3の描画処理
    svg.selectAll("rect")
      .data(data)
      .join("rect")
      .attr("x", (d, i) => i * 50)
      .attr("y", d => 200 - d.value)
      .attr("width", 40)
      .attr("height", d => d.value)
      .attr("fill", "steelblue");

  }, [data]);

  return <svg ref={svgRef} width={500} height={300} />;
}