D3.js | 複雑なグラフをSVGで描く | 複数の実例で理解するJavaScriptライブラリ解説

スポンサーリンク

スポンサーリンク

D3.jsについての解説

D3.jsは、データ駆動型のドキュメント操作を実現する強力なJavaScriptライブラリです。HTML、SVG、CSSを利用して、データを視覚的に表現することが可能です。インタラクティブなグラフ、アニメーション、動的データの表示など、多様な表現を行うために広く使用されています。

D3.jsの実装方法

D3.jsを使用するためには、以下のコードを<head>内に記述してライブラリを読み込みます。

<script src="https://d3js.org/d3.v7.min.js"></script>

D3.jsの特徴

特徴 説明
データバインディング データとDOM要素を結びつけて、動的に要素を生成・操作できます。
インタラクティブなビジュアライゼーション ユーザーの操作に応じて、グラフの要素を動的に変更・操作することができます。
柔軟なカスタマイズ スタイルやアニメーションをカスタマイズし、見た目を自由にコントロールできます。
多様なグラフ形式 棒グラフ、円グラフ、線グラフ、散布図など、多くのグラフ形式をサポートしています。

プロパティとその値の一覧表

プロパティ名 説明 値の例
d3.select() DOM要素を選択します。 d3.select(“#chart”)
d3.append() 新しい要素を選択したDOMに追加します。 d3.append(“svg”)
d3.scaleLinear() 線形スケールを生成します。 d3.scaleLinear().domain([0, 100]).range([0, 500])
d3.axisBottom() X軸を作成します。 d3.axisBottom(xScale)
d3.line() 線グラフを作成します。 d3.line().x(d => d.x).y(d => d.y)

アニメーション付き棒グラフを作成する例

実行例

HTMLとJavaScriptコード


// SVG要素をHTMLに追加
<svg id="barChart"></svg>

// D3.jsでアニメーション付きの棒グラフを作成
<script>
const dataBar = [30, 50, 80, 120, 150]; // グラフのデータ
const widthBar = 500, heightBar = 200; // グラフの幅と高さ

// SVG要素の選択と設定
const svgBar = d3.select("#barChart")
    .attr("width", widthBar)
    .attr("height", heightBar);

// データに基づいて棒グラフの要素を追加
svgBar.selectAll("rect")
    .data(dataBar)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 100) // X座標
    .attr("y", heightBar) // Y座標（最初は0）
    .attr("width", 80) // 幅
    .attr("height", 0) // 高さ（最初は0）
    .attr("fill", "steelblue") // 色
    .transition() // アニメーションの開始
    .duration(1000) // アニメーションの持続時間
    .attr("y", d => heightBar - d) // Y座標を更新
    .attr("height", d => d); // 高さをデータに基づいて更新
</script>

解説

この棒グラフの例では、D3.jsを使ってアニメーションを追加し、データの変化に応じて棒の高さがスムーズに変わるようにしています。アニメーションは1秒の間に実行されます。

円グラフを作成する例

実行例

HTMLとJavaScriptコード


// SVG要素をHTMLに追加
<svg id="pieChart"></svg>

// D3.jsで円グラフを作成
<script>
const dataPie = [10, 20, 30, 40]; // 円グラフのデータ
const widthPie = 300, heightPie = 300, radius = Math.min(widthPie, heightPie) / 2;

// SVG要素の選択と設定
const svgPie = d3.select("#pieChart")
    .attr("width", widthPie)
    .attr("height", heightPie)
    .append("g")
    .attr("transform", `translate(${widthPie / 2},${heightPie / 2})`);

// 円グラフのアークを作成
const pie = d3.pie()(dataPie);
const arc = d3.arc()
    .innerRadius(0) // 内径
    .outerRadius(radius); // 外径

// 円グラフのセグメントを追加
svgPie.selectAll("path")
    .data(pie)
    .enter()
    .append("path")
    .attr("d", arc) // パスの描画
    .attr("fill", (d, i) => d3.schemeCategory10[i]); // 色を設定
</script>

解説

この円グラフでは、D3.jsを使ってデータの割合を視覚的に示しています。各セグメントは異なる色で塗り分けられており、D3の組み込みカラースケールを使用しています。

線グラフを作成する例

実行例

HTMLとJavaScriptコード


// SVG要素をHTMLに追加
<svg id="lineChart"></svg>

// D3.jsで線グラフを作成
<script>
const dataLine = [
    { date: new Date(2023, 0, 1), value: 30 },
    { date: new Date(2023, 1, 1), value: 50 },
    { date: new Date(2023, 2, 1), value: 80 },
    { date: new Date(2023, 3, 1), value: 60 },
    { date: new Date(2023, 4, 1), value: 90 }
]; // 線グラフのデータ

// SVG要素の設定
const svgLine = d3.select("#lineChart")
    .attr("width", 500)
    .attr("height", 200);

// X軸とY軸のスケール設定
const xScaleLine = d3.scaleTime()
    .domain(d3.extent(dataLine, d => d.date))
    .range([0, 500]);
const yScaleLine = d3.scaleLinear()
    .domain([0, d3.max(dataLine, d => d.value)])
    .range([200, 0]);

// 線グラフの生成
const line = d3.line()
    .x(d => xScaleLine(d.date))
    .y(d => yScaleLine(d.value));

// 線グラフのパスを追加
svgLine.append("path")
    .datum(dataLine)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", line); // パスの描画
</script>

解説

この線グラフでは、訪問者数の変動を時系列で表示しています。背景色と枠線を設定することで、グラフの視認性を向上させています。

動的にデータを変更する散布図の例

実行例

HTMLとJavaScriptコード


// SVG要素をHTMLに追加
<svg id="scatterPlot"></svg>
<button id="updateDataButton">データ更新</button>

// D3.jsで動的な散布図を作成
<script>
let dataScatter = [{ x: 30, y: 20 }, { x: 50, y: 70 }, { x: 90, y: 50 }, { x: 120, y: 90 }]; // 散布図の初期データ

// SVG要素の設定
const svgScatter = d3.select("#scatterPlot")
    .attr("width", 500)
    .attr("height", 200);

// 散布図のデータ更新関数
const updateScatterPlot = () => {
    const circles = svgScatter.selectAll("circle")
        .data(dataScatter);

    // 新しいデータ点の作成
    circles.enter()
        .append("circle")
        .merge(circles) // 既存データとのマージ
        .attr("cx", d => d.x * 4) // X座標
        .attr("cy", d => 200 - d.y * 2) // Y座標
        .attr("r", 5) // 円の半径
        .attr("fill", "orange"); // 円の色

    // 古いデータ点の削除
    circles.exit().remove();
};

// ボタンを押すとデータが更新される
d3.select("#updateDataButton").on("click", function() {
    dataScatter = dataScatter.map(d => ({ x: d.x + 10, y: d.y + 10 }));
    updateScatterPlot();
});

// 初期状態の描画
updateScatterPlot();
</script>

解説

この散布図の例では、D3.jsを使用して動的にデータを更新する仕組みを作成しています。ボタンをクリックすると、データが更新され、それに応じて散布図の点の位置が自動的に再描画されます。

D3.jsの公式サイト

D3 by Observable | The JavaScript library for bespoke data visualization
The JavaScript library for bespoke data visualization
d3js.org
スポンサーリンク