統計で見る都道府県統計で見る都道府県

D3.jsの活用方法

D3.js

はじめに

コロプレス地図（Choropleth Map）は地理的データを視覚化する強力な手法です。色の違いによってデータの分布や傾向を効果的に表現できますが、適切なカラースキーマを選ぶことが重要です。D3.jsを使ったコロプレス地図作成において、カラースキーマ選択のポイントを解説します。

カラースキーマの基本概念

カラースキーマとは、データ視覚化において一連の色彩を組み合わせたものです。コロプレス地図では、以下の種類があります：

  1. シーケンシャル（Sequential）: 単一の色調で明暗の変化をつける方法
  2. ダイバージング（Diverging）: 中央値を境に2つの色調が変化する方法
  3. カテゴリカル（Categorical）: 種類を区別するための異なる色の組み合わせ

データタイプに合わせたカラースキーマ選び

シーケンシャルカラースキーマ

人口密度や所得など、低い値から高い値へと連続的に変化するデータに適しています。

// シーケンシャルカラースケールの例
const colorScale = d3.scaleSequential()
  .domain([minValue, maxValue])
  .interpolator(d3.interpolateBlues); // 青の濃淡

Blues（青の濃淡）: 水関連データや冷たさを表現するのに適しています。

他にもinterpolateGreens、interpolateOrangesなどが使えます。

ダイバージングカラースキーマ

中央値（ゼロや平均）からのプラス・マイナスの偏差を示すデータに最適です。例えば、選挙結果や温度偏差などに使われます。

// ダイバージングカラースケールの例
const colorScale = d3.scaleDiverging()
  .domain([minValue, middleValue, maxValue])
  .interpolator(d3.interpolateRdBu); // 赤から青へ

RdBu（赤から青へ）: 温度変化や政治的な二極性を表現するのに最適です。

その他にinterpolatePiYG（紫から黄緑）やinterpolateBrBG（茶色から青緑）などがあります。

カテゴリカルカラースキーマ

異なる種類や区分を表すデータに使います。例えば、大陸や言語グループなど。

// カテゴリカルカラースケールの例
const colorScale = d3.scaleOrdinal()
  .domain(categories)
  .range(d3.schemeCategory10); // 10色のカラースキーム

schemeSet3やschemePairedなど他のオプションもあります。

カラースキーマ選択の重要ポイント

1. アクセシビリティを考慮する

色覚異常の方にも識別しやすいカラースキーマを選びましょう。ColorBrewer2やViridisのようなカラースキーマは色覚異常の方にも配慮されています。

// Viridisカラースケールの例（色覚異常に配慮）
const colorScale = d3.scaleSequential()
  .domain([minValue, maxValue])
  .interpolator(d3.interpolateViridis);

Viridis（青緑から黄色へ）: 色覚異常の方にも識別しやすく、科学的データの可視化に最適です。

2. データの本質を強調する

データの傾向や特徴が明確に伝わるようにカラースキーマを選びましょう。

  • 対比を示したいデータには「ダイバージング」
  • 連続値には「シーケンシャル」
  • 種類の区別には「カテゴリカル」

3. 文化的コンテキストを意識する

色には文化的な意味があります。例えば、多くの地域で赤は「警告」や「危険」を表します。データの内容に合わせて考慮しましょう。

D3-Scale-Chromaticの全カラースキーマ

D3-Scale-Chromaticは、D3.jsに内蔵されたカラースキーマライブラリで、多様なデータ視覚化に対応する豊富なカラースキーマを提供しています。以下にすべての選択肢を分類して紹介します。

シーケンシャル単色スキーム (Sequential Single-Hue)

単一の色相を使用し、明度や彩度を変化させるスキームです。

// シーケンシャル単色スキームの例
d3.interpolateBlues       // 青の濃淡
d3.interpolateGreens      // 緑の濃淡
d3.interpolateGreys       // グレーの濃淡
d3.interpolateOranges     // オレンジの濃淡
d3.interpolatePurples     // 紫の濃淡
d3.interpolateReds        // 赤の濃淡

Blues（青の濃淡）: 水資源や降水量などの水関連データに適しています。

Greens（緑の濃淡）: 森林被覆率や農業生産などの環境・自然データに適しています。

Greys（グレーの濃淡）: 中立的なデータや白黒印刷を考慮した場合に適しています。

Oranges（オレンジの濃淡）: 暖かさや活力を表現するデータに適しています。

Purples（紫の濃淡）: 高級感や特別なデータを表現する際に適しています。

Reds（赤の濃淡）: 危険度や重要度の高いデータを表現する際に適しています。

シーケンシャル多色スキーム (Sequential Multi-Hue)

複数の色相を使用して連続的な変化を表現するスキームです。

d3.interpolateBuGn        // 青から緑へ
d3.interpolateBuPu        // 青から紫へ
d3.interpolateGnBu        // 緑から青へ
d3.interpolateOrRd        // オレンジから赤へ
d3.interpolatePuBuGn      // 紫、青、緑へ
d3.interpolatePuBu        // 紫から青へ
d3.interpolatePuRd        // 紫から赤へ
d3.interpolateRdPu        // 赤から紫へ
d3.interpolateYlGnBu      // 黄、緑、青へ
d3.interpolateYlGn        // 黄から緑へ
d3.interpolateYlOrBr      // 黄、オレンジ、茶色へ
d3.interpolateYlOrRd      // 黄、オレンジ、赤へ

BuGn（青から緑へ）: 水から植生への移行を表現するのに適しています。

BuPu（青から紫へ）: 寒冷から高級感への移行を表現するのに適しています。

GnBu（緑から青へ）: 陸地から水域への移行を表現するのに適しています。

OrRd（オレンジから赤へ）: 注意から警告への段階的な変化を表現するのに適しています。

PuBuGn（紫、青、緑へ）: 複雑な環境データの表現に適しています。

PuBu（紫から青へ）: 高級感から冷静さへの移行を表現するのに適しています。

PuRd（紫から赤へ）: 高級感から緊急性への移行を表現するのに適しています。

RdPu（赤から紫へ）: 危険から神秘性への移行を表現するのに適しています。

YlGnBu（黄、緑、青へ）: 明るさから深さへの移行を表現するのに適しています。

YlGn（黄から緑へ）: 明るさから自然への移行を表現するのに適しています。

YlOrBr（黄、オレンジ、茶色へ）: 明るさから土地への移行を表現するのに適しています。

YlOrRd（黄、オレンジ、赤へ）: 安全から危険への段階的な変化を表現するのに適しています。

ダイバージングスキーム (Diverging)

中間値を基準に両極へ異なる色相で変化するスキームです。

d3.interpolateBrBG        // 茶色から青緑へ
d3.interpolatePRGn        // 紫から緑へ
d3.interpolatePiYG        // ピンクから黄緑へ
d3.interpolatePuOr        // 紫からオレンジへ
d3.interpolateRdBu        // 赤から青へ
d3.interpolateRdGy        // 赤からグレーへ
d3.interpolateRdYlBu      // 赤、黄、青へ
d3.interpolateRdYlGn      // 赤、黄、緑へ
d3.interpolateSpectral    // スペクトル（赤から紫へ）

BrBG（茶色から青緑へ）: 乾燥地と湿地の対比に適しています。

PRGn（紫から緑へ）: 都市部と自然環境の対比に適しています。

PiYG（ピンクから黄緑へ）: 女性的・男性的な対比や、人工と自然の対比に適しています。

PuOr（紫からオレンジへ）: 冷静さと活力の対比に適しています。

RdBu（赤から青へ）: 暑さと寒さ、または政治的な対立を表現するのに最適です。

RdGy（赤からグレーへ）: 活発さと中立性の対比に適しています。

RdYlBu（赤、黄、青へ）: 高温、中間、低温の3段階を表現するのに適しています。

RdYlGn（赤、黄、緑へ）: 危険、注意、安全の3段階を表現するのに適しています。

Spectral（スペクトル）: 多様な変化を表現するのに適しています。

カテゴリカルスキーム (Categorical)

離散的なカテゴリを表現するための異なる色の組み合わせです。

d3.schemeCategory10       // 10色の基本スキーム
d3.schemeAccent           // 8色のアクセントカラー
d3.schemeDark2            // 8色の暗めの色
d3.schemePaired           // 12色のペアになった色
d3.schemePastel1          // 9色のパステルカラー（セット1）
d3.schemePastel2          // 8色のパステルカラー（セット2）
d3.schemeSet1             // 9色の鮮やかな色（セット1）
d3.schemeSet2             // 8色の鮮やかな色（セット2）
d3.schemeSet3             // 12色の鮮やかな色（セット3）
d3.schemeTableau10        // Tableauソフトウェアの10色パレット

※カテゴリカルスキームはコロプレス地図には適していないため、表示例は省略します。

特殊なカラースキーム

特定の用途に最適化されたカラースキームです。

// Viridisファミリー（色覚異常に配慮）
d3.interpolateViridis     // 青緑から黄色へ（標準）
d3.interpolateInferno     // 紫、赤、黄色へ
d3.interpolateMagma       // 紫、ピンク、黄色へ
d3.interpolatePlasma      // 青、赤、黄色へ

// その他の特殊スキーム
d3.interpolateCool        // シアンからマゼンタへ
d3.interpolateCubehelixDefault // キューブヘリックス色空間
d3.interpolateWarm        // マゼンタから黄色へ
d3.interpolateTurbo       // 改良版虹色スケール
d3.interpolateCividis     // 色覚異常対応の黄青スケール
d3.interpolateSinebow     // 正弦波ベースの虹色スケール

Viridis（青緑から黄色へ）: 色覚異常の方にも識別しやすく、科学的データの可視化に最適です。

Inferno（紫、赤、黄色へ）: 強いコントラストが必要なデータに適しています。

Magma（紫、ピンク、黄色へ）: 深さから高さへの変化を表現するのに適しています。

Plasma（青、赤、黄色へ）: エネルギーレベルの変化を表現するのに適しています。

Cool（シアンからマゼンタへ）: 冷たい印象のデータに適しています。

Cubehelix（キューブヘリックス色空間）: 明度の変化が均一で、白黒印刷でも区別しやすいスキームです。

Warm（マゼンタから黄色へ）: 暖かい印象のデータに適しています。

Turbo（改良版虹色スケール）: 高いコントラストと視認性を持つ改良版の虹色スケールです。

Cividis（色覚異常対応の黄青スケール）: 色覚異常の方にも識別しやすい黄色から青のスケールです。

Sinebow（正弦波ベースの虹色スケール）: 色相の変化が均一な虹色スケールです。

量子化スキームの作成

連続的なカラースケールを離散的なステップに分割するために、量子化関数を使用できます。

// 5段階に量子化されたBluesスキーム
const colorScale = d3.scaleQuantize()
  .domain([minValue, maxValue])
  .range(d3.quantize(d3.interpolateBlues, 5));

// または既存のカラースキームを使用
const colorScale = d3.scaleQuantize()
  .domain([minValue, maxValue])
  .range(d3.schemeBlues[5]); // 5段階の青のスキーム

各カラースキームの使用目的に合わせた選択例：

  • 人口密度マップ: interpolateYlOrRd（低密度から高密度へ）- 黄色から赤へのグラデーションで人口の集中度を表現
  • 所得格差マップ: interpolateRdBu（低所得から高所得へ）- 赤から青へのグラデーションで所得の差を表現
  • 気温変化マップ: interpolateRdYlBu（暑いから寒いへ）- 赤、黄、青のグラデーションで温度変化を表現
  • 選挙結果マップ: interpolatePuOr（2党制を表現）- 紫とオレンジで政党間の対立を表現
  • アクセシビリティ重視: interpolateViridis（色覚異常対応）- 色覚異常の方にも識別しやすいスキーム

実装例：日本の都道府県別データ可視化

// 日本の都道府県コロプレス地図の例
// データ範囲に応じてカラースケールを設定
const colorScale = d3.scaleSequential()
  .domain([d3.min(data, d => d.value), d3.max(data, d => d.value)])
  .interpolator(d3.interpolateYlGnBu); // 黄色から緑、青のグラデーション

// 地図描画コード
svg.selectAll("path")
  .data(geoData.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("fill", d => {
    const value = data.find(item => item.id === d.properties.id)?.value;
    return value ? colorScale(value) : "#ccc";
  });

// 凡例の追加
const legend = svg.append("g")
  .attr("transform", `translate(${width - 120}, 20)`);

// 凡例のグラデーション背景
const gradientScale = d3.scaleLinear()
  .domain([0, 100])
  .range([d3.min(data, d => d.value), d3.max(data, d => d.value)]);

// 10段階の色を表示
d3.range(0, 100, 10).forEach((d, i) => {
  legend.append("rect")
    .attr("x", 0)
    .attr("y", i * 15)
    .attr("width", 15)
    .attr("height", 15)
    .attr("fill", colorScale(gradientScale(d)));
  
  legend.append("text")
    .attr("x", 25)
    .attr("y", i * 15 + 12)
    .text(Math.round(gradientScale(d)))
    .attr("font-size", "10px");
});

カラースキーマ選択ツール

D3.jsでコロプレス地図を作る際に役立つツールを紹介します：

  1. ColorBrewer2: 地図向けに特化したカラースキーマが豊富
  2. D3-Scale-Chromatic: D3.js内蔵のカラースキーマライブラリ
  3. Chroma.js: カスタムカラースケール作成に便利

まとめ

コロプレス地図でのカラースキーマ選択は、データを正確に伝え、見る人に直感的に理解してもらうための重要な要素です。データの性質を理解し、適切なカラースキーマタイプを選び、色のアクセシビリティにも配慮することで、効果的な地図可視化が実現します。D3.jsの豊富なカラースキーマと柔軟な機能を活用して、説得力のあるデータストーリーを伝えましょう。