D3.js のスケール関数: scaleOrdinal でカテゴリデータを別の値にマッピングする

更新: 2023-09-30 / 作成: 2023-09-30

scaleOrdinal の基本

D3.js のスケールモジュール (d3-scale) が提供する scaleOrdinal() 関数を使用すると、カテゴリデータを別の値にマッピングする関数を簡単に作成することができます。

☝️ カテゴリデータと数量データ

カテゴリデータ (categorical data) というのは、統計学やデータ分析において使用されるデータ型のひとつで、通常、カテゴリを示すラベルや文字列で表現されます。カテゴリデータは、定性データまたは質的データとも呼ばれます。例えば、血液型や都道府県などがカテゴリデータです。

一方、価格や身長のような 数量データ (quantitative data) は本来はカテゴリデータではありませんが、特定の範囲でグルーピングすることで、カテゴリ化することができます（価格(円) → 低価格／中価格／高価格）。カテゴリ化することを離散化 (discretization) やビン化 (binning) と呼ぶこともあります。

次の例では、AWS/Azure/GCP という入力値を、#ff9900/#0072c6/#db4437 というカラーコードに変換するスケール関数を作成しています。

const colorScale = d3.scaleOrdinal()
  .domain(["AWS", "Azure", "GCP"])  // この入力が
  .range(["#ff9900", "#0072c6", "#db4437"]);  // この出力にマッピングされる

console.log(colorScale("AWS"));    //=> "#ff9900"
console.log(colorScale("Azure"));  //=> "#0072c6"
console.log(colorScale("GCP"));    //=> "#db4437"

上記の例では、入力値をカラーコードの文字列にマッピングしていますが、描画要素の座標値やサイズなど、任意の型の値にマッピングできます。次の例では、実際に 2 つのスケール関数を作成して、SVG の描画に使用しています。

図: scaleOrdinal による色のマッピング

上記の実装コード

<svg id="svg-hfuouiw" width="200" height="80"></svg>
<script>
const svg = d3.select("#svg-hfuouiw")

const data = [
  { brand: "aws", label: "Amazon Web Services" },
  { brand: "azure", label: "Microsoft Azure" },
  { brand: "gcp", lable: "Google Cloud Platform" },
]

const colorScale = d3.scaleOrdinal()
  .domain(["aws", "azure", "gcp"])
  .range(["#ff9900", "#0072c6", "#db4437"]);

const xScale = d3.scaleOrdinal()
  .domain(["aws", "azure", "gcp"])
  .range([40, 100, 160]);

svg.selectAll("circle")
  .data(data)
  .join("circle")
  .attr("cx", (d) => xScale(d.brand))
  .attr("cy", 40)
  .attr("r", 20)
  .attr("fill", (d) => colorScale(d.brand))
</script>

未知の値が入力されたとき

スケール関数の入力値として、domain() で指定されていない未知の値が渡された場合、range() で設定した出力値が自動的にマッピングされていきます。次の例では、A/B/C/D/E といった未知の入力値に対して、3 種類のカラー値を順番に割り当てています。同じ値が入力値として渡された場合、以前割り当てた値が返されることに注目してください。

const colorScale = d3.scaleOrdinal().range(["blue", "yellow", "red"]);

console.log(colorScale("A"));  //=> blue
console.log(colorScale("B"));  //=> yellow
console.log(colorScale("C"));  //=> red
console.log(colorScale("D"));  //=> blue
console.log(colorScale("E"));  //=> yellow
console.log(colorScale("A"));  //=> blue
console.log(colorScale("C"));  //=> red

未知の値が入力された場合に、指定した値を返すようにするには、unknown() 関数を使用します。

const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["blue", "yellow", "red"])
  .unknown("gray");

console.log(colorScale("A"));  //=> blue
console.log(colorScale("B"));  //=> yellow
console.log(colorScale("C"));  //=> red
console.log(colorScale("D"));  //=> gray
console.log(colorScale("E"));  //=> gray

カテゴリデータの着色に使えるカラースキーム

カテゴリデータの色分けは一般的な操作なので、D3.js は scaleOrdinal() と組み合わせて使用できるカラースキームをデフォルトで提供しています。

デフォルトで使用できるカラースキーム
schemeCategory10	schemeAccent	schemeDark2
schemePaired	schemePastel1	schemePastel2
schemeSet1	schemeSet2	schemeSet3
schemeTableau10

次の例では、schemeCategory10 というカラースキームを使用しています。

const colorScale = d3.scaleOrdinal(d3.schemeCategory10)

console.log(colorScale("A"));  //=> #1f77b4
console.log(colorScale("B"));  //=> #ff7f0e
console.log(colorScale("C"));  //=> #2ca02c
console.log(colorScale("A"));  //=> #1f77b4