【JavaScript】D3.js（Data-Driven Documents）とは？

JavaScript(ジャバスクリプト)

2024.09.28

この記事は約5分で読めます。

D3.js（Data-Driven Documents）は、データを視覚化するための強力なJavaScriptライブラリです。以下に、D3.jsの概要と主な特徴を説明し、簡単なサンプルを作成します。

概要
主な特徴
D3.jsのサンプル
サンプルコード
まとめ

概要

D3.jsは、WebブラウザでSVGやHTMLを使用してインタラクティブなデータ視覚化を作成するためのツールです。

データに基づいてDOM要素を操作し、美しく動的なグラフやチャートを生成できます。

D3 by Observable | The JavaScript library for bespoke data visualization

The JavaScript library for bespoke data visualization

主な特徴

データバインディング: データと視覚要素を効率的に結びつけます。
柔軟性: 低レベルの制御により、カスタマイズ性が高いです。
アニメーションとトランジション: スムーズな遷移効果を簡単に実装できます。
豊富な組み込み関数: スケーリング、軸の生成、色の処理などの便利な機能があります。
SVGサポート: スケーラブルで高品質なグラフィックスを作成できます。

D3.jsのサンプル

それでは、D3.jsを使用した簡単な棒グラフのサンプルを作成しましょう。

このサンプルでは、5つのデータポイントを持つ簡単な棒グラフを作成しています。

主な特徴は以下の通りです。

データバインディング: data配列の各要素を棒グラフの各バーにバインドしています。
スケーリング: d3.scaleBand()とd3.scaleLinear()を使用して、データ値をSVG座標に変換しています。
軸の生成: d3.axisBottom()とd3.axisLeft()を使用して、x軸とy軸を自動生成しています。
インタラクティブ要素: CSSの:hover疑似クラスを使用して、マウスオーバー時の棒の色変更を実装しています。

サンプルコード

CDN部分：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS部分：

        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: brown;
        }

JavaScript部分：

      // データセット
        const data = [
            {name: "A", value: 10},
            {name: "B", value: 20},
            {name: "C", value: 30},
            {name: "D", value: 40},
            {name: "E", value: 50}
        ];

        // SVGの設定
        const margin = {top: 20, right: 20, bottom: 30, left: 40};
        const width = 400 - margin.left - margin.right;
        const height = 300 - margin.top - margin.bottom;

        // SVG要素の作成
        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        // スケールの設定
        const x = d3.scaleBand()
            .range([0, width])
            .padding(0.1);

        const y = d3.scaleLinear()
            .range([height, 0]);

        // ドメインの設定
        x.domain(data.map(d => d.name));
        y.domain([0, d3.max(data, d => d.value)]);

        // x軸の描画
        svg.append("g")
            .attr("transform", `translate(0,${height})`)
            .call(d3.axisBottom(x));

        // y軸の描画
        svg.append("g")
            .call(d3.axisLeft(y));

        // バーの描画
        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", d => x(d.name))
            .attr("width", x.bandwidth())
            .attr("y", d => y(d.value))
            .attr("height", d => height - y(d.value));