作成者Observable

外観

等高線ポリゴン ​

各閾値について、等高線ジェネレータは、入力値が閾値以上である領域を表すGeoJSON MultiPolygonジオメトリオブジェクトを構築します。ジオメトリは平面座標系を使用しており、⟨i + 0.5, j + 0.5⟩は入力値配列の要素i + jnに対応します。

ここでは、地表温度のGeoTIFFを読み込む例と、ノイズの多いモノクロPNGをぼかして雲量のスムーズな等高線を作成する例を示します。

GeoTiff Contours

Cloud Contours

等高線ポリゴンはGeoJSONであるため、標準的なツールを使用して変換および表示できます。たとえば、geoPath、geoProject、geoStitchなどがあります。ここでは、上記の地表温度の等高線がNatural Earth投影で表示されています。

GeoTiff Contours II

等高線プロットは、サンプリングによって連続関数も可視化できます。ここでは、Goldstein-Price関数（グローバル最適化のためのテスト関数）と、sin(x + y)sin(x - y)のトリッピーなアニメーションを示します。

Contours

Animated Contours

contours() ​

例 · ソースコード · デフォルトの設定で新しい等高線ジェネレータを構築します。

JavaScript
const contours = d3.contours()
    .size([width, height])
    .thresholds([0, 1, 2, 3, 4]);

contours(values) ​

ソースコード · 指定されたvalues配列の等高線を計算し、GeoJSON MultiPolygon ジオメトリオブジェクトの配列を返します。

JavaScript
const polygons = contours(grid);

各ジオメトリオブジェクトは、入力valuesが対応する閾値以上である領域を表します。各ジオメトリオブジェクトの閾値は、geometry.valueとして公開されます。

入力valuesは、長さn×mの配列でなければなりません。ここで[n, m]は等高線ジェネレータのサイズです。さらに、各values[i + jn]は、位置⟨i, j⟩の値を表す必要があります。たとえば、-2 ≤ x ≤ 2および-2 ≤ y ≤ 1のGoldstein-Price関数について256×256グリッドを作成するには

JavaScript
var n = 256, m = 256, values = new Array(n * m);
for (var j = 0.5, k = 0; j < m; ++j) {
  for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
  }
}
JavaScript
function goldsteinPrice(x, y) {
  return (1 + Math.pow(x + y + 1, 2) * (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y))
      * (30 + Math.pow(2 * x - 3 * y, 2) * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y));
}

返されたジオメトリオブジェクトは、通常、関連する投影としてnullまたはgeoIdentityを使用して、geoPathに渡して表示します。

contours.contour(values, threshold) ​

ソースコード · 単一の等高線を計算し、入力valuesが指定されたthreshold値以上である領域を表すGeoJSON MultiPolygon ジオメトリオブジェクトを返します。各ジオメトリオブジェクトの閾値は、geometry.valueとして公開されます。

入力valuesは、長さn×mの配列でなければなりません。ここで[n, m]は等高線ジェネレータのサイズです。さらに、各values[i + jn]は、位置⟨i, j⟩の値を表す必要があります。contoursを参照してください。

contours.size(size) ​

ソースコード · sizeが指定されている場合、入力valuesグリッドの期待されるサイズを等高線ジェネレータに設定し、等高線ジェネレータを返します。sizeは、グリッドの列数がn、行数がmである配列[n, m]として指定されます。nとmは正の整数でなければなりません。sizeが指定されていない場合、現在のサイズ（デフォルトは[1, 1]）を返します。

contours.smooth(smooth) ​

例 · ソースコード · smoothが指定されている場合、生成された等高線ポリゴンが線形補間を使用してスムーズ化されるかどうかを設定します。smoothが指定されていない場合、現在のスムーズ化フラグ（デフォルトはtrue）を返します。

contours.thresholds(thresholds) ​

ソースコード · thresholdsが指定されている場合、閾値ジェネレータを指定された関数または配列に設定し、この等高線ジェネレータを返します。thresholdsが指定されていない場合、現在の閾値ジェネレータ（デフォルトではスタージェスの公式を実装）を返します。

閾値は、値の配列[x0, x1, …]として定義されます。最初の生成された等高線は、入力値がx0以上である領域に対応します。2番目の等高線は、入力値がx1以上である領域に対応し、以下同様です。したがって、指定された各閾値に対して、正確に1つの生成されたMultiPolygonジオメトリオブジェクトが存在します。閾値は、geometry.valueとして公開されます。

thresholdsの配列ではなくcountが指定されている場合、入力値の範囲はおよそcount個のビンに均等に分割されます。ticksを参照してください。