【D3 × React】棒グラフを実装する

はじめに

この記事では、JavaScript 向けのデータ可視化ライブラリである D3 と React を使って、棒グラフを実装する手順を記載します。

以下の記事でも D3 と React で棒グラフの実装をしていますが、今回は棒グラフの表示を JSX を利用して実装します。

開発環境

開発環境は以下の通りです。

• Windows 11
• Next.js 14.2.4
• React 18.3.1
• TypeScript 5.5.2
• D3 7.9.0
• @types/d3 7.4.3

実装手順

以下の流れで実装を進めています。
ただ、1. から 3. までの実装は先述の記事と同じ手順です。
また、SVG 操作の有効化・初期化の実装は不要になります。

1. 棒グラフに表示するデータの定義
2. 棒グラフを表示する SVG の描画
3. データの表示範囲（座標）の定義
4. 棒グラフの表示

4. 棒グラフの表示

今回は JSX の svg 内に data をマップすることで棒グラフを表示します。

page.tsx

"use client";

import * as d3 from "d3";
import { data } from "./data";

const WIDTH = 640;
const HEIGHT = 360;

export default function Page() {
  // Define D3 scales
  const xScale = d3
    .scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, WIDTH])
    .padding(0.2);

  const yScale = d3.scaleLinear().domain([0, 100]).range([HEIGHT, 0]);

  return (
    <svg width={WIDTH} height={HEIGHT}>
      {data.map((d) => (
        <rect
          key={d.month}
          x={xScale(d.month) || 0}
          y={yScale(d.income)}
          width={xScale.bandwidth()}
          height={HEIGHT - yScale(d.income)}
          fill="steelblue"
        />
      ))}
    </svg>
  );
}

先述した通り SVG 操作の有効化・初期化の実装が不要になっています。
また、rect タグが JSX に記載されているので、棒グラフが表示されていることが直感的にわかります。

実際の画面は以下の通りです。

参照

• Getting started
• Most basic barplot in d3.js