KKLab

Appearance

D3.js グラフの基本 ​

D3.js（Data-Driven Documents）は、データを視覚化するための強力なJavaScriptライブラリです。以下では、基本的なグラフの作成方法を説明します。

棒グラフ ​

シンプルな縦棒グラフの例：

コードの解説 ​

javascript
// データの定義
const data = [
  { label: "A", value: 10 },
  { label: "B", value: 20 },
  { label: "C", value: 15 },
  { label: "D", value: 25 },
  { label: "E", value: 30 }
];

// SVGのサイズとマージンの設定
const width = 400;
const height = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };

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

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

// Y軸のスケール設定
const y = d3.scaleLinear()
  .range([height - margin.bottom, margin.top])
  .domain([0, d3.max(data, d => d.value)]);

// 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));

// 棒グラフの描画
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 => height - margin.bottom - y(d.value))
  .attr("fill", "steelblue");

円グラフ ​

シンプルな円グラフの例：

コードの解説 ​

javascript
// データの定義
const pieData = [
  { label: "A", value: 30 },
  { label: "B", value: 20 },
  { label: "C", value: 25 },
  { label: "D", value: 15 },
  { label: "E", value: 10 }
];

// SVGのサイズと半径の設定
const pieWidth = 400;
const pieHeight = 400;
const pieRadius = Math.min(pieWidth, pieHeight) / 2;

// SVG要素の作成と中心への移動
const pieSvg = d3.select("#pie-chart")
  .append("svg")
  .attr("width", pieWidth)
  .attr("height", pieHeight)
  .append("g")
  .attr("transform", `translate(${pieWidth/2},${pieHeight/2})`);

// カラースケールの設定
const color = d3.scaleOrdinal()
  .domain(pieData.map(d => d.label))
  .range(d3.schemeCategory10);

// パイチャートのレイアウト設定
const pie = d3.pie()
  .value(d => d.value);

// 円弧の生成器
const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(pieRadius);

// 円グラフの描画
const arcs = pieSvg.selectAll("arc")
  .data(pie(pieData))
  .join("path")
  .attr("d", arc)
  .attr("fill", d => color(d.data.label))
  .attr("stroke", "white")
  .style("stroke-width", "2px");

// ラベルの追加
pieSvg.selectAll("text")
  .data(pie(pieData))
  .join("text")
  .attr("transform", d => `translate(${arc.centroid(d)})`)
  .attr("text-anchor", "middle")
  .text(d => d.data.label);

折れ線グラフ ​

時系列データを表示する折れ線グラフの例：

コードの解説 ​

javascript
// データの定義
const lineData = [
  { date: "2023-01", value: 10 },
  { date: "2023-02", value: 15 },
  { date: "2023-03", value: 25 },
  { date: "2023-04", value: 20 },
  { date: "2023-05", value: 30 }
];

// SVGのサイズとマージンの設定
const lineWidth = 500;
const lineHeight = 300;
const lineMargin = { top: 20, right: 20, bottom: 30, left: 40 };

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

// X軸のスケール設定（離散的なポイント）
const lineX = d3.scalePoint()
  .range([lineMargin.left, lineWidth - lineMargin.right])
  .domain(lineData.map(d => d.date));

// Y軸のスケール設定
const lineY = d3.scaleLinear()
  .range([lineHeight - lineMargin.bottom, lineMargin.top])
  .domain([0, d3.max(lineData, d => d.value)]);

// 線の生成器
const line = d3.line()
  .x(d => lineX(d.date))
  .y(d => lineY(d.value));

// 軸の描画
lineSvg.append("g")
  .attr("transform", `translate(0,${lineHeight - lineMargin.bottom})`)
  .call(d3.axisBottom(lineX));

lineSvg.append("g")
  .attr("transform", `translate(${lineMargin.left},0)`)
  .call(d3.axisLeft(lineY));

// 線の描画
lineSvg.append("path")
  .datum(lineData)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2)
  .attr("d", line);

// データポイントの描画
lineSvg.selectAll("circle")
  .data(lineData)
  .join("circle")
  .attr("cx", d => lineX(d.date))
  .attr("cy", d => lineY(d.value))
  .attr("r", 4)
  .attr("fill", "steelblue");

散布図 ​

2つの変数の関係を表示する散布図の例：

コードの解説 ​

javascript
// データの定義
const scatterData = [
  { x: 10, y: 20 },
  { x: 15, y: 25 },
  { x: 20, y: 30 },
  { x: 25, y: 35 },
  { x: 30, y: 40 }
];

// SVGのサイズとマージンの設定
const scatterWidth = 400;
const scatterHeight = 300;
const scatterMargin = { top: 20, right: 20, bottom: 30, left: 40 };

// SVG要素の作成
const scatterSvg = d3.select("#scatter-plot")
  .append("svg")
  .attr("width", scatterWidth)
  .attr("height", scatterHeight);

// X軸のスケール設定
const scatterX = d3.scaleLinear()
  .range([scatterMargin.left, scatterWidth - scatterMargin.right])
  .domain([0, d3.max(scatterData, d => d.x)]);

// Y軸のスケール設定
const scatterY = d3.scaleLinear()
  .range([scatterHeight - scatterMargin.bottom, scatterMargin.top])
  .domain([0, d3.max(scatterData, d => d.y)]);

// 軸の描画
scatterSvg.append("g")
  .attr("transform", `translate(0,${scatterHeight - scatterMargin.bottom})`)
  .call(d3.axisBottom(scatterX));

scatterSvg.append("g")
  .attr("transform", `translate(${scatterMargin.left},0)`)
  .call(d3.axisLeft(scatterY));

// データポイントの描画
scatterSvg.selectAll("circle")
  .data(scatterData)
  .join("circle")
  .attr("cx", d => scatterX(d.x))
  .attr("cy", d => scatterY(d.y))
  .attr("r", 5)
  .attr("fill", "steelblue");