D3 · all subjects

d3-contour

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

d3-contour module overview

d3-contour computes contour polygons using marching squares algorithm. It includes contours generator for computing contour levels on a grid and contourDensity for density estimation with configurable cell size, bandwidth, and thresholds.

d3-contour module purpose

d3-contour computes contour polygons by applying marching squares to a rectangular grid of numeric values. It is used to visualize phenomena like topography.

d3-contour main components

The d3-contour module consists of two main parts: Contours for computing contour polygons, and Density estimation for generating density contours.

Contour input values array format and coordinate mapping

The input values must be an array of length n×m where [n, m] is the contour generator's size. Each values[i + j*n] represents the value at position ⟨i, j⟩. Planar coordinates map as ⟨i + 0.5, j + 0.5⟩ corresponds to element i + j*n in the input values array.

contours.size([n, m]) configuration

Sets the expected size of the input values grid to [n, m] where n is the number of columns and m is the number of rows. Both n and m must be positive integers. If not specified, returns the current size which defaults to [1, 1].

contours.smooth(smooth) configuration

If smooth is specified, sets whether the generated contour polygons are smoothed using linear interpolation. If not specified, returns the current smoothing flag, which defaults to true.

contours.thresholds(thresholds) configuration

Sets the threshold generator to the specified function or array. Thresholds are defined as an array of values [x0, x1, …]. There is exactly one generated MultiPolygon geometry object for each specified threshold value. If a count is specified instead of an array, the input values' extent will be uniformly divided into approximately count bins using ticks. By default implements Sturges' formula.

contours.contour(values, threshold) single contour signature

Computes a single contour for the given values and threshold, returning a GeoJSON MultiPolygon geometry object representing the area where input values are greater than or equal to the threshold value. The threshold value is exposed as geometry.value.

Goldstein-Price function example for contour sampling

Example function for sampling continuous functions with contours: 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)); }

d3.contours() constructor signature

d3.contours() constructs a new contour generator with default settings. The example shows: const contours = d3.contours().size([width, height]).thresholds([0, 1, 2, 3, 4]);

contours(values) returns GeoJSON MultiPolygon geometry

Calling the contour generator with an array of values computes the contours and returns an array of GeoJSON MultiPolygon geometry objects. Each geometry object represents the area where input values are greater than or equal to the corresponding threshold value. The threshold value for each geometry object is exposed as geometry.value.

Grid construction example for contour input

Example of constructing a 256×256 grid for the Goldstein-Price function where -2 ≤ x ≤ 2 and -2 ≤ y ≤ 1: 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); } }

density.contours(data) method

density.contours(data) returns a contour(value) function that can be used to compute an arbitrary contour on the given data without needing to recompute the underlying grid. The returned contour function also exposes a contour.max value which represents the maximum density of the grid.

contourDensity() constructor

contourDensity() constructs a new density estimator with default settings.

density(data) method signature and return value

density(data) estimates the density contours for the given array of data, returning an array of GeoJSON MultiPolygon geometry objects. Each geometry object represents the area where the estimated number of points per square pixel is greater than or equal to the corresponding threshold value. The threshold value for each geometry object is exposed as geometry.value. The returned geometry objects are typically passed to geoPath to display, using null or geoIdentity as the associated projection.

density.x(x) accessor default

density.x(x) sets or gets the x-coordinate accessor. If x is not specified, returns the current x-coordinate accessor, which defaults to: function x(d) { return d[0]; }

density.y(y) accessor default

density.y(y) sets or gets the y-coordinate accessor. If y is not specified, returns the current y-coordinate accessor, which defaults to: function y(d) { return d[1]; }

density.weight(weight) accessor default

density.weight(weight) sets or gets the accessor for point weights. If weight is not specified, returns the current point weight accessor, which defaults to: function weight() { return 1; }

density.size(size) configuration

density.size(size) sets the size of the density estimator to the specified bounds and returns the estimator. The size is specified as an array [width, height], where width is the maximum x-value and height is the maximum y-value. If size is not specified, returns the current size which defaults to [960, 500]. The estimated density contours are only accurate within the defined size.

density.cellSize(cellSize) configuration

density.cellSize(cellSize) sets the size of individual cells in the underlying bin grid to the specified positive integer and returns the estimator. If cellSize is not specified, returns the current cell size, which defaults to 4. The cell size is rounded down to the nearest power of two. Smaller cells produce more detailed contour polygons, but are more expensive to compute.

density.thresholds(thresholds) configuration

density.thresholds(thresholds) sets the threshold generator to the specified function or array and returns the contour generator. If thresholds is not specified, returns the current threshold generator, which by default generates about twenty nicely-rounded density thresholds. Thresholds are defined as an array of values [x0, x1, …]. The first generated density contour corresponds to the area where the estimated density is greater than or equal to x0; the second contour corresponds to the area where the estimated density is greater than or equal to x1, and so on. Thus, there is exactly one generated MultiPolygon geometry object for each specified threshold value; the threshold value is exposed as geometry.value. The first value x0 should typically be greater than zero. If a count is specified instead of an array of thresholds, then approximately count uniformly-spaced nicely-rounded thresholds will be generated.

density.bandwidth(bandwidth) configuration

density.bandwidth(bandwidth) sets the bandwidth (the standard deviation) of the Gaussian kernel and returns the estimator. If bandwidth is not specified, returns the current bandwidth, which defaults to 20.4939…. The specified bandwidth is currently rounded to the nearest supported value by the implementation, and must be nonnegative.

contourDensity use case

Density contours can show the estimated density of point clouds, which is useful to avoid overplotting in large datasets. The contourDensity method implements fast two-dimensional kernel density estimation.

Give your agent this brain