はじめに
D3.jsにおけるスケール(Scale)とは、どんなものなのかまとめてみようと思います。
難しいことはわからないので、動く例を貼っていきます。
サンプルについて
サンプルコードはD3.js本体と同じくObservable.comに置きました。
Observable.comの画面の見方はこんな感じです。
スケール(Scale)とは
ある入力（ドメインといいます）から、ある出力（レンジといいます）への写像（マッピング）を提供します。
ドメインからレンジへどのように対応させるかによって、いろいろなスケールがあります。
- 連続スケール - Continuous Scape
- シーケンシャルスケール - Sequential Scale
- 発散スケール - Diverging Scale
- 量子化スケール - Quantize Scale
- 順序スケール - Ordinal Scale
とりあえず最初の3つについて書いてみました。
量子化スケールと順序スケールはまた調べます。
連続スケール - Continuous Scale
連続量$x$を連続量$y$へマッピングします。
連続スケールには線形(Linear)、ぺき乗(Power)、対数(Log)、同一値(Identity)、日時(Time)があります。
線形スケール - Linear Scale
ドメインとレンジをそのまま対応させます。
数式で書くとこんなんです。
y = mx + c
$m$と$c$は、ドメインとレンジの値により自動的に決まります。
サンプルです → https://observablehq.com/@sengokyu/d3-js-linear-scale
べき乗スケール - Power Scale
数式で書くとこんなんです。
y = mx^k + c
$m$と$c$は、ドメインとレンジの値により自動的に決まります。
$k$は、別途expornentメソッドで指定します。指定しないときは1になります
サンプルです → https://observablehq.com/@sengokyu/d3-js-power-scale
対数スケール - Log Scale
数式で書くとこんなんです。
y = m \log{_n} x + c
$m$と$c$は、ドメインとレンジの値により自動的に決まります。
底$n$は、baseメソッドで指定します。デフォルトは10です。
$\log(0)$は $-\infty$ になるので、ドメインに0を含む範囲は指定できません。
サンプルです → https://observablehq.com/@sengokyu/d3-js-log-scale
同一値スケール - Identity Scale
ドメインとレンジが同じ値になるスケールです。
日時スケール - Time Scale
ドメインが日時になっているスケールです。
日時の書式を指定できたります。
シーケンシャルスケール - Sequential Scale
連続スケールと同様に、連続量$x$を連続量$y$へマッピングします。
連続スケールと異なるのは、マッピングのための関数を別途指定できることです。
サンプルです → https://observablehq.com/@sengokyu/d3-js-sequential-scale
発散スケール - Diverging Scale
連続スケールと同様に、連続量$x$を連続量$y$へマッピングします。
また、シーケンシャルスケールと同様に、マッピングのための関数を別途指定できます。
シーケンシャルスケールと異なるのは、ドメインに3つの値を取ることと、それを0〜0.5〜1へマッピングすることです。
サンプルです → https://observablehq.com/@sengokyu/d3-js-diverging-scale