d3js-visualization

D3.js データ可視化スキル

D3.js とは

D3.js（Data-Driven Documents）は、ウェブブラウザーで動的かつインタラクティブなデータ可視化を作成するための JavaScript ライブラリです。HTML、SVG、CSS の標準を利用して、データを DOM にバインドし、データに基づく変換を適用します。

D3.js を使用する場面

次のような場合は D3.js を選びましょう：

• チャートライブラリでは利用できない、独自のカスタム可視化が必要な場合
• すべての視覚要素をきめ細かく制御したい場合
• 複雑なインタラクションやアニメーションが必要な場合
• チャートにとどまらない、データに基づく DOM 操作を行う場合
• 大規模なデータセットで高いパフォーマンスが必要な場合（Canvas を使用）
• ウェブ標準に基づく可視化を行う場合

次のような場合は代替手段を検討してください：

• シンプルな標準チャートで十分な場合（Chart.js、Plotly を使用）
• 迅速なプロトタイピングを優先する場合（Observable、Vega-Lite を使用）
• 印刷物やレポート向けの静的チャートを作成する場合（matplotlib、ggplot2 を使用）
• 3D 可視化を行う場合（Three.js、WebGL ライブラリを使用）

D3.js と他のライブラリの比較

ライブラリ	最適な用途	学習難易度	カスタマイズ性
D3.js	カスタム可視化	高い	完全
Chart.js	標準チャート	低い	限定的
Plotly	科学的なプロット	中程度	高い
Highcharts	ビジネスダッシュボード	低い	高い
Three.js	3D グラフィックス	高い	完全

---

基本的なワークフロー

1. プロジェクトのセットアップ

オプション 1：CDN（クイックスタート）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Visualization</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    svg { display: block; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // Your code here
  </script>
</body>
</html>

オプション 2：NPM（本番環境）

npm install d3

// Import all of D3
import * as d3 from "d3";

// Or import specific modules
import { select, selectAll } from "d3-selection";
import { scaleLinear, scaleTime } from "d3-scale";

2. 基本的なチャートの作成

// Set up dimensions and margins
const margin = {top: 20, right: 30, bottom: 40, left: 50};
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Create 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})`);

// Load and process data
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value
})).then(data => {

  // Create scales
  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // Create and append axes
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale));

  svg.append("g")
    .call(d3.axisLeft(yScale));

  // Create line generator
  const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
    .curve(d3.curveMonotoneX);

  // Draw line
  svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2);
});

3. インタラクティブ機能の追加

ツールチップ：

const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "white")
  .style("border", "1px solid #ddd")
  .style("padding", "10px")
  .style("border-radius", "4px");

circles
  .on("mouseover", function(event, d) {
    tooltip
      .style("visibility", "visible")
      .html(`<strong>${d.name}</strong><br/>Value: ${d.value}`);
  })
  .on("mousemove", function(event) {
    tooltip
      .style("top", (event.pageY - 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });

トランジション：

circles
  .transition()
  .duration(300)
  .ease(d3.easeCubicOut)
  .attr("r", 8);

4. レスポンシブデザインの実装

function createChart() {
  const container = d3.select("#chart");
  const containerWidth = container.node().getBoundingClientRect().width;

  const margin = {top: 20, right: 30, bottom: 40, left: 50};
  const width = containerWidth - margin.left - margin.right;
  const height = Math.min(width * 0.6, 500);

  container.selectAll("*").remove(); // Clear previous

  // Create SVG...
}

// Initial render
createChart();

// Re-render on resize with debouncing
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(createChart, 250);
});

---

主要な原則

データバインディング

• .data() を使用してデータを DOM 要素にバインドします
• enter、update、exit の各選択を処理します
• 要素とデータを一貫して対応付けるためにキー関数を使用します
• 最新の構文では、コードを簡潔にするために .join() を使用します

スケール

• データ値（ドメイン）を視覚値（レンジ）にマッピングします
• 適切なスケールの種類（linear、time、band、ordinal）を使用します
• 軸の値を丸めるには、スケールに .nice() を適用します
• 下から上に向かう座標にするには、y スケールのレンジを反転します：[height, 0]

SVG 座標系

• 原点（0,0）は左上隅です
• y は下方向に増加します（直交座標系とは逆です）
• 適切な間隔を確保するには、マージン規約を使用します
• 関連する要素は <g> タグでグループ化します

パフォーマンス

• 要素数が 1,000 未満の場合は SVG を使用します
• 要素数が 1,000 を超える場合は Canvas を使用します
• 大規模なデータセットは集約またはサンプリングします
• リサイズハンドラーの呼び出しをデバウンスします

---

チャート選択ガイド

時系列データですか？ → 折れ線グラフまたは面グラフ

カテゴリを比較しますか？ → 棒グラフ（縦または横）

関係性を示しますか？ → 散布図またはバブルチャート

全体に対する部分の割合ですか？ → ドーナツチャートまたは積み上げ棒グラフ（カテゴリは 5～7 個に制限）

ネットワークデータですか？ → 力指向グラフ

分布ですか？ → ヒストグラムまたは箱ひげ図

チャートの選択基準とベストプラクティスの詳細については、references/chart-types.md を参照してください。

---

よく使われるパターン

データのクイック読み込み

// Load CSV with type conversion
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value,
  category: d.category
})).then(data => {
  createChart(data);
});

クイックツールチップ

selection
  .on("mouseover", (event, d) => {
    tooltip.style("visibility", "visible").html(`Value: ${d.value}`);
  })
  .on("mousemove", (event) => {
    tooltip.style("top", event.pageY + "px").style("left", event.pageX + "px");
  })
  .on("mouseout", () => tooltip.style("visibility", "hidden"));

クイックレスポンシブ SVG

svg
  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMidYMid meet")
  .style("width", "100%")
  .style("height", "auto");

---

品質基準

視覚的な品質

• データに適したチャートの種類を使用します
• 一貫性のある配色を適用します
• 明確な軸ラベルと凡例を含めます
• マージン規約を使って適切な間隔を確保します
• 適切なスケールの種類と範囲を使用します

インタラクションの品質

• 意味のあるツールチップを追加します
• 滑らかなトランジションを使用します（継続時間は 300～500ms）
• ホバー時のフィードバックを提供します
• アクセシビリティのためにキーボード操作を可能にします
• 詳細な探索のためにズームやパンを実装します

コードの品質

• データ結合ではキー関数を使用します
• enter、update、exit を適切に処理します
• 更新前に以前のレンダリング結果をクリーンアップします
• モジュール性を高めるために再利用可能なチャートパターンを使用します
• 負荷の高い処理をデバウンスします

アクセシビリティ

• ARIA ラベルと説明を追加します
• キーボード操作を可能にします
• 色覚多様性に配慮したパレットを使用します
• スクリーンリーダー向けにテキストによる代替情報を含めます
• 十分な色のコントラストを確保します

---

ヘルプリソース

利用可能なスクリプト

• data-helpers.js：データの読み込み、解析、変換のユーティリティ
• chart-templates.js：一般的な可視化に使える再利用可能なチャートテンプレート

実装については、scripts/ ディレクトリを参照してください。

実用例

• line-chart.html：ツールチップ付きの時系列可視化
• bar-chart.html：グループ化および積み上げ棒グラフ
• network-graph.html：力指向レイアウトによるネットワーク可視化

実装の全容については、examples/ ディレクトリを参照してください。

詳細なリファレンス

• D3 の基礎：SVG の基本、データバインディング、セレクション、トランジション、イベント → references/d3-fundamentals.md

• スケールと軸：すべてのスケールタイプ、軸のカスタマイズ、カラーパレット → references/scales-and-axes.md

• パスと図形：線・面のジェネレーター、円弧、力学シミュレーション → references/paths-and-shapes.md

• データ変換：読み込み、解析、グループ化、集計、日付の処理 → references/data-transformation.md

• チャートタイプ：各チャートタイプを使用するタイミングに関する詳細なガイダンス → references/chart-types.md

• 高度なパターン：再利用可能なチャート、パフォーマンスの最適化、レスポンシブデザイン → references/advanced-patterns.md

• よくある落とし穴：頻繁にある間違いとその解決策 → references/common-pitfalls.md

• 統合パターン：D3 と React、Vue、Angular、Svelte の併用 → references/integration-patterns.md

---

トラブルシューティング

チャートが表示されませんか？

• ブラウザーのコンソールでエラーを確認してください
• データが正しく読み込まれていることを確認してください
• SVG に幅と高さが設定されていることを確認してください
• スケールのドメインとレンジを確認してください

要素の位置が正しくありませんか？

• スケールのドメインがデータの範囲と一致していることを確認してください
• y スケールのレンジが反転されているか確認してください：[height, 0]
• <g> 要素にマージンの変換が適用されていることを確認してください
• SVG の座標系（左上が原点）を確認してください

トランジションが機能しませんか？

• 期間が適切（300〜500ms）であることを確認してください
• トランジションがデータではなくセレクションに適用されているか確認してください
• イージング関数が有効であることを確認してください
• トランジションの前に要素が存在することを確認してください

パフォーマンスが低下していますか？

• DOM 要素の数を減らしてください（1,000 個を超える場合は Canvas を使用してください）
• データを集計するか、サンプリングしてください
• リサイズハンドラーにデバウンスを適用してください
• 再描画を最小限に抑えてください

---

外部リソース

公式ドキュメント

• D3.js API リファレンス：https://d3js.org/
• Observable のサンプル：https://observablehq.com/@d3

学習リソース

• Scott Murray 著「Interactive Data Visualization for the Web」
• D3 Graph Gallery：https://d3-graph-gallery.com/
• Amelia Wattenberger の D3 チュートリアル：https://wattenberger.com/blog/d3

カラーツール

• ColorBrewer：https://colorbrewer2.org/
• D3 カラースキーム：https://d3js.org/d3-scale-chromatic

インスピレーション

• Observable のトレンド：https://observablehq.com/trending
• Reddit r/dataisbeautiful：https://reddit.com/r/dataisbeautiful

---

このスキルでは、プロフェッショナルでインタラクティブなデータ可視化を作成するための D3.js を幅広く扱います。コアワークフローを出発点として、特定のトピックについては詳細なリファレンスを参照し、ニーズに合わせてサンプルをカスタマイズしてください。