d3-visualization

D3.js データ可視化

目次

• 概要
• ワークフロー
  • 基本的なチャートの作成ワークフロー
  • 新しいデータで可視化を更新
  • 高度なレイアウトの作成ワークフロー
• パス選択メニュー
• クイックリファレンス

---

概要

D3 は、データ駆動の DOM 操作、視覚的エンコーディング、レイアウトアルゴリズム、インタラクションのための低レベルな構成要素を提供し、チャートライブラリでは実現できないカスタム可視化を可能にします。

D3 を使う場合： チャートライブラリでは特定のデザインを実現できない場合、完全なカスタマイズが必要な場合、ネットワークグラフ／階層構造／地図を作成する場合、またはデータの変化を滑らかにアニメーション化する場合です。

よりシンプルなツールを優先する場合： シンプルな棒グラフ／折れ線グラフで十分な場合（Chart.js、Highcharts）、3D が必要な場合（Three.js、WebGL）、または集約せずに 10K を超えるデータポイントを扱う場合です。

主な概念： データ結合（配列を DOM 要素にバインド）、スケール（データ値を視覚値に変換）、シェイプ（SVG パスの生成）、レイアウト（ネットワーク／ツリー／地図の位置計算）、トランジション（状態変化のアニメーション）、インタラクション（ズーム／パン／ドラッグ／ブラシ）。

スキルの構成

• 入門：セットアップ、前提条件、最初の可視化
• セレクションとデータ結合：DOM 操作、データバインディング
• スケールと軸：データ変換、軸の生成
• シェイプとレイアウト：パスジェネレーター、基本的なレイアウト
• 高度なレイアウト：力学シミュレーション、階層構造、地図
• トランジションとインタラクション：アニメーション、ズーム／パン／ドラッグ／ブラシ
• ワークフロー：一般的なチャートタイプの手順ガイド
• 一般的なパターン：再利用可能なコードテンプレート

---

ワークフロー

現在のタスクに応じてワークフローを選択してください：

基本的なチャート作成のワークフロー

使用する場面： 棒グラフ、折れ線グラフ、散布図を一から作成する場合

所要時間： 1～2 時間

このチェックリストをコピーして、進捗を記録してください：

Basic Chart Progress:
- [ ] Step 1: Set up SVG container with margins
- [ ] Step 2: Load and parse data
- [ ] Step 3: Create scales (x, y)
- [ ] Step 4: Generate axes
- [ ] Step 5: Bind data and create visual elements
- [ ] Step 6: Style and add interactivity

ステップ 1：余白を設定して SVG コンテナを作成する

適切なサイズの SVG 要素を作成します。軸の余白を定義します：{top: 20, right: 20, bottom: 30, left: 40}。内側の幅と高さを計算します：width - margin.left - margin.right。はじめにを参照してください。

ステップ 2：データを読み込み、解析する

外部ファイルには d3.csv('data.csv') を使用するか、データ配列を直接定義します。時系列データの日付は d3.timeParse('%Y-%m-%d') で解析します。CSV データの文字列は変換関数を使って数値に変換します。はじめにを参照してください。

ステップ 3：スケールを作成する

データに応じてスケールの種類を選択します：scaleBand（カテゴリ）、scaleTime（時系列）、scaleLinear（数量）。d3.extent()、d3.max()、または手動で範囲を指定して、データからドメインを設定します。SVG の寸法に合わせてレンジを設定します。スケールと軸を参照してください。

ステップ 4：軸を生成する

軸ジェネレーターを作成します：d3.axisBottom(xScale)、d3.axisLeft(yScale)。変換を使って位置を設定した g 要素を追加します。軸ジェネレーターを呼び出します：.call(axis)。.ticks()、.tickFormat() で目盛りをカスタマイズします。スケールと軸を参照してください。

ステップ 5：データをバインドして視覚要素を作成する

データ結合パターンを使用します：svg.selectAll(type).data(array).join(type)。スケールとアクセサー関数を使って属性を設定します：.attr('x', d => xScale(d.category))。折れ線グラフには d3.line() ジェネレーターを使用します。散布図では、cx、cy、r 属性を指定して円を作成します。セレクションとデータ結合および図形とレイアウトを参照してください。

ステップ 6：スタイルを設定し、インタラクティブ機能を追加する

色を適用します：.attr('fill', ...)、.attr('stroke', ...)。ツールチップを使ったホバー効果を追加します：.on('mouseover', ...)。ドリルダウン用のクリックハンドラーを追加します。初期アニメーション用のトランジションを適用します（任意）。トランジションとインタラクションおよび一般的なパターンを参照してください。

---

新しいデータで可視化を更新する

使用する場面： 新しいデータでグラフを更新するとき（リアルタイム、フィルター、ユーザー操作）

所要時間： 30 分～1 時間

このチェックリストをコピーしてください：

Update Progress:
- [ ] Step 1: Encapsulate visualization in update function
- [ ] Step 2: Update scale domains if needed
- [ ] Step 3: Re-bind data with key function
- [ ] Step 4: Add transitions to join
- [ ] Step 5: Update attributes with new values
- [ ] Step 6: Trigger update on data change

ステップ 1：可視化を更新関数にカプセル化する

基本的なグラフ作成ワークフローのステップ 3～5 を function update(newData) { ... } でラップします。これにより、あらゆるデータセットで可視化を再利用できます。ワークフローを参照してください。

ステップ 2：スケールのドメインを更新する

データの範囲が変わったときにドメインを再計算します：yScale.domain([0, d3.max(newData, d => d.value)])。トランジションを使って軸を更新します：svg.select('.y-axis').transition().duration(500).call(yAxis)。セレクションとデータ結合を参照してください。

ステップ 3：キー関数を使ってデータを再バインドする

オブジェクトの同一性を保つためにキー関数を使います：.data(newData, d => d.id)。これにより、要素が配列内の位置ではなくデータ項目を追跡します。正しいトランジションを実現するうえで重要です。セレクションとデータ結合を参照してください。

ステップ 4：データ結合にトランジションを追加する

属性を更新する前に .transition().duration(500) を挿入します。.ease(d3.easeCubicOut) でイージングを指定します。カスタムの enter／exit 効果を設定するには、.join()` 内で enter／exit 関数を使います。トランジションとインタラクションを参照してください。

ステップ 5：新しい値で属性を更新する

更新されたスケールを使って位置やサイズを設定します：.attr('y', d => yScale(d.value))、.attr('height', d => height - yScale(d.value))。トランジションにより、古い値から新しい値へアニメーションします。一般的なパターンを参照してください。

ステップ 6：データの変更時に更新を実行する

データが変わったときに update(newData) を呼び出します：ボタンのクリック、タイマー（setInterval）、WebSocket メッセージ、API レスポンスなどです。リアルタイム更新では、データポイント数を制限するためにスライディングウィンドウを使います。ワークフローを参照してください。

---

高度なレイアウトワークフローの作成

用途： ネットワークグラフ、階層構造、地理マップの作成

所要時間： 2〜4 時間

このチェックリストをコピーしてください：

Advanced Layout Progress:
- [ ] Step 1: Choose appropriate layout type
- [ ] Step 2: Prepare and structure data
- [ ] Step 3: Create and configure layout
- [ ] Step 4: Apply layout to data
- [ ] Step 5: Bind computed properties to elements
- [ ] Step 6: Add interactions (drag, zoom)

ステップ 1：適切なレイアウトタイプを選択する

フォースシミュレーション：ネットワーク図、有機的なクラスタリング。階層構造：ツリー、クラスタ（ノードリンク）、ツリーマップ、パック、パーティション（空間充填）。地理：投影法を使ったマップ。コード：フロー図。選択の指針については、高度なレイアウトを参照してください。

ステップ 2：データを準備して構造化する

フォース：nodes = [{id, group}]、links = [{source, target}]。階層構造：子要素の配列を含むネストされたオブジェクトを用意し、d3.hierarchy(data) で変換します。地理：GeoJSON フィーチャー。詳細は高度なレイアウトを参照してください。

ステップ 3：レイアウトを作成して設定する

フォース：d3.forceSimulation(nodes).force('link', d3.forceLink(links)).force('charge', d3.forceManyBody())。階層構造：d3.treemap().size([width, height])。地理：d3.geoMercator().fitExtent([[0,0], [width,height]], geojson)。各レイアウトタイプについては、高度なレイアウトを参照してください。

ステップ 4：データにレイアウトを適用する

フォース：シミュレーションは自動的に実行され、各ティックでノードの位置を更新します。階層構造：ルートにレイアウトを適用します：treemap(root)。地理：適用は不要です。パスジェネレーターで投影法を使用します。詳細はレイアウトの適用を参照してください。

ステップ 5：計算されたプロパティを要素にバインドする

フォース：ティックハンドラーで cx、cy を更新します：node.attr('cx', d => d.x)。階層構造：四角形には d.x0、d.x1、d.y0、d.y1 を使用します。地理：d 属性には path(feature) を使用します。レイアウトごとの例については、ワークフローを参照してください。

ステップ 6：インタラクションを追加する

フォースネットワークにはドラッグを追加します：node.call(d3.drag().on('drag', dragHandler))。マップや大規模なネットワークにはズームを追加します：svg.call(d3.zoom().on('zoom', zoomHandler))。階層構造にはクリックによるドリルダウンを追加します。トランジションとインタラクションを参照してください。

---

パス選択メニュー

何をしますか？

1. D3 を初めて使う - 環境を設定し、前提条件を確認して、最初の可視化を作成する

2. 基本的なチャートを作成する - 棒グラフ、折れ線グラフ、散布図を手順に沿って作成する

3. スケールでデータを変換する - データ値を視覚的なプロパティ（位置、色、サイズ）にマッピングする

4. データを要素にバインドする - 配列を DOM 要素に結び付け、動的な更新を処理する

5. ネットワーク／階層構造／マップを作成する - フォースレイアウトグラフ、ツリーマップ、地理的な可視化を作成する

6. アニメーションを追加する - チャートの状態間を滑らかに遷移させる

7. インタラクティブ性を追加する - ズーム、パン、ドラッグ、ブラシ選択、ツールチップを追加する

8. 新しいデータでチャートを更新する - リアルタイムデータ、フィルター、ユーザー操作を処理する

9. コードテンプレートを入手する - よく使われるパターンのテンプレートをコピーして変更する

10. D3 の概念を理解する - データ結合、スケール、ジェネレーター、レイアウトを詳しく学ぶ

---

クイックリファレンス

データ結合パターン（D3 の基本ワークフロー）

// 1. Select container
const svg = d3.select('svg');

// 2. Bind data
svg.selectAll('circle')
  .data(dataArray)
  .join('circle')          // Create/update/remove elements automatically
    .attr('cx', d => d.x)  // Use accessor functions (d = datum, i = index)
    .attr('cy', d => d.y)
    .attr('r', 5);

スケールの作成（データ → 視覚的な変換）

// For quantitative data
const xScale = d3.scaleLinear()
  .domain([0, 100])        // Data range
  .range([0, 500]);        // Pixel range

// For categorical data
const xScale = d3.scaleBand()
  .domain(['A', 'B', 'C'])
  .range([0, 500])
  .padding(0.1);

// For temporal data
const xScale = d3.scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)])
  .range([0, 500]);

シェイプジェネレーター（SVG パスの作成）

// Line chart
const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value));

svg.append('path')
  .datum(data)           // Use .datum() for single data item
  .attr('d', line)       // Line generator creates path data
  .attr('fill', 'none')
  .attr('stroke', 'steelblue');

トランジション（アニメーション）

// Add transition before attribute updates
svg.selectAll('rect')
  .data(newData)
  .join('rect')
  .transition()          // Everything after this is animated
  .duration(500)         // Milliseconds
  .attr('height', d => yScale(d.value));

よく使われるスケールの種類

データ型	用途	スケール
量的（線形）	位置、サイズ	scaleLinear()
量的（指数）	範囲の圧縮	scaleLog()、scalePow()
量的 → 円の面積	円のサイズ	scaleSqrt()
カテゴリ	棒、グループ	scaleBand()、scalePoint()
カテゴリ → 色	色によるエンコーディング	scaleOrdinal()
時間	時系列	scaleTime()
量的 → 色	ヒートマップ	scaleSequential()

D3 モジュールのインポート（ES6）

// Specific functions
import { select, selectAll } from 'd3-selection';
import { scaleLinear, scaleBand } from 'd3-scale';
import { line, area } from 'd3-shape';

// Entire D3 namespace
import * as d3 from 'd3';

用途別の主要リソース

• セットアップと最初のチャート：はじめに
• データバインディング：セレクションとデータ結合
• スケールと軸：スケールと軸
• チャートの種類：ワークフロー + 一般的なパターン
• ネットワークとツリー：高度なレイアウト + 高度なレイアウト
• マップ：高度なレイアウト
• アニメーション：トランジションとインタラクション
• インタラクティブ機能：トランジションとインタラクション

---

次のステップ

1. D3 を初めて使いますか？ はじめにから始めましょう
2. 基本を理解していますか？ 特定のチャートの種類についてはワークフローをご覧ください
3. リファレンスが必要ですか？ テンプレートには一般的なパターンをご利用ください
4. カスタムの可視化を作成しますか？ 高度なレイアウトをご覧ください