シーケンシャルスケール

シーケンシャルスケールは、連続的な数値入力ドメインを連続的な出力範囲にマッピングするという点で、リニアスケールに似ています。リニアスケールとは異なり、シーケンシャルスケールの入力ドメインと出力範囲は常に正確に2つの要素を持ち、出力範囲は通常、値の配列ではなく補間器として指定されます。シーケンシャルスケールは、通常、カラーエンコーディングに使用されます。 d3-scale-chromaticも参照してください。これらのスケールは、invertおよびinterpolateメソッドを公開しません。シーケンシャルスケールには、log、pow、symlog、およびquantileのバリアントもあります。

scaleSequential(domain, interpolator)

例 · ソース · 指定されたdomainとinterpolator関数または配列を使用して新しいシーケンシャルスケールを構築します。

const color = d3.scaleSequential([0, 100], d3.interpolateBlues);

domainが指定されていない場合、デフォルトは[0, 1]です。

const color = d3.scaleSequential(d3.interpolateBlues);

interpolatorが指定されていない場合、デフォルトは恒等関数です。

const identity = d3.scaleSequential();

スケールが適用されると、補間器は、通常[0, 1]の範囲の値で呼び出されます。ここで、0は最小値を表し、1は最大値を表します。たとえば、誤った怒りの虹色スケールを実装するには（代わりにinterpolateRainbowを使用してください）

const rainbow = d3.scaleSequential((t) => d3.hsl(t * 360, 1, 0.5) + "");

interpolatorが配列の場合、スケールの2要素の出力範囲を表し、interpolateを使用して補間関数に変換されます。

const color = d3.scaleSequential(["red", "blue"]);

シーケンシャルスケールのドメインは数値である必要があり、正確に2つの値を含んでいる必要があります。

sequential.interpolator(interpolator)

interpolatorが指定されている場合、スケールの補間器を指定された関数に設定します。

const color = d3.scaleSequential().interpolator(d3.interpolateBlues);

interpolatorが指定されていない場合は、スケールの現在の補間器を返します。

color.interpolator() // d3.interpolateBlues

sequential.range(range)

linear.rangeを参照してください。rangeが指定されている場合、指定された2要素の配列は、interpolateを使用して補間関数に変換されます。

const color = d3.scaleSequential().range(["red", "blue"]);

上記は以下と同等です。

const color = d3.scaleSequential(d3.interpolate("red", "blue"));

sequential.rangeRound(range)

linear.rangeRoundを参照してください。rangeが指定されている場合、暗黙的に補間器としてinterpolateRoundを使用します。

scaleSequentialLog(domain, range)

ログスケールと同様に、対数変換を使用した新しいシーケンシャルスケールを返します。

scaleSequentialPow(domain, range)

パワースケールと同様に、指数変換を使用した新しいシーケンシャルスケールを返します。

scaleSequentialSqrt(domain, range)

sqrtスケールと同様に、平方根変換を使用した新しいシーケンシャルスケールを返します。

scaleSequentialSymlog(domain, range)

シンログスケールと同様に、対称対数変換を使用した新しいシーケンシャルスケールを返します。

scaleSequentialQuantile(domain, range)

ソース · 分位数スケールと同様に、p-分位数変換を使用した新しいシーケンシャルスケールを返します。

sequentialQuantile.quantiles(n)

ソース · n + 1個の分位数の配列を返します。

const color = d3.scaleSequentialQuantile()
    .domain(penguins.map((d) => d.body_mass_g))
    .interpolator(d3.interpolateBlues);

color.quantiles(4); // [2700, 3550, 4050, 4750, 6300]

たとえば、n = 4の場合、5つの数値の配列（最小値、第1四分位数、中央値、第3四分位数、最大値）を返します。