Contour Plot II

100%

Contour Plot II

✓ Published0🌍 Public

Last edited Oct 20, 2018

Created on Oct 20, 2018

This example visualizes the Goldstein-Price test function using a grid of 240 by 125 sampled values, displayed as a series of 20 logarithmic contour thresholds. The contours are rendered as filled SVG paths with a blue-green-yellow color scale. The code uses `d3.contours` to compute the isolines and `d3.geoPath` with `d3.geoIdentity` to project them, while `d3.scaleLog` and `d3.interpolateYlGnBu` define the color mapping. The data is generated procedurally from the mathematical function.

AI-generated description

An example of d3-contour.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/f48ff9c1af4d637c9a518727f5fdfef5'>Contour Plot II</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Contour Plot II

This example visualizes the Goldstein–Price function, a common test function for optimization, as a set of 20 logarithmic contour levels. The contours are drawn with SVG paths, each filled with a color from the YlGnBu interpolated color scale to indicate value. The underlying grid of 240×125 values is computed by sampling the function across its domain. The code uses `d3.contours` to generate the contour geometry, `d3.geoPath` with `d3.geoIdentity().scale()` to project the coordinates to the SVG canvas, and a `d3.scaleLog` for threshold mapping.

Mmbostock

94% match

Loading thumbnail…

Contour Plot III

A contour plot displays animated isolines of a mathematical function, with colors shifting through a red-blue diverging scale as the threshold values change over time. The visualization computes a grid of sine-based values, then uses d3-contour to generate contour geometries at varying thresholds. d3.geoPath draws these shapes onto a Canvas element, while d3.scaleSequential and d3.interpolateRdBu map contour values to colors. A d3.timer drives the animation, continuously updating the thresholds to create the moving contour bands.

Mmbostock

81% match

Loading thumbnail…

Contour Test using Jason Davis implementation with D3

This visualization demonstrates contour generation on a 20×10 grid of numeric values using the Conrec algorithm, ported to D3. The scalar field is encoded as a series of filled contour polygons, each mapped to a distinct level between -5 and 3. A linear color scale interpolates from white to red, with semi-transparent fills and black strokes delineating the contours. The data is rendered into an SVG using D3's line generator, with spatial scaling applied to map the grid coordinates onto a 500×500 pixel canvas. The example showcases how D3 can work alongside external contouring libraries to produce smooth isolines directly in the browser.

DDinoJay

76% match

Loading thumbnail…

Density Contours II

This example demonstrates density estimation of diamond prices and weights using contour lines. The visualization shows the distribution of carat and price data points, with concentric filled contour regions colored on a yellow-green-blue sequential scale to represent point density. The code uses d3.contourDensity for density estimation and d3.geoPath to render the resulting contour polygons as SVG paths. Data is loaded from a TSV file, with logarithmic scales applied to both axes for carat and price.

Mmbostock

74% match

Loading thumbnail…

Density Contours II

This example visualizes the density of diamonds by carat and price, using colored contour paths to show point density. It plots the data from `diamonds.tsv` on logarithmic x and y axes, with a gradient from YlGnBu. The code uses `d3.contourDensity` for kernel density estimation, `d3.geoPath` to render the contours as SVG paths, and `d3.axisBottom` and `d3.axisLeft` for axes. The chart also includes labeled axis text for "Carats" and "Price (USD)".

MMorganhaoyu

74% match

Loading thumbnail…

Contour Plot

A contour plot visualizes the volcano dataset from R, showing elevation values through filled isolines. The map uses a sequential color scale with a custom terrain interpolation, transitioning from green to yellow to white across the elevation range. Implemented with d3-contour and rendered as SVG paths, the code applies d3.geoPath with a geoIdentity projection to scale the contours, while d3.hsv and d3.interpolateHsvLong define the color transitions for the 5-unit threshold intervals.

Mmbostock

73% match

Loading thumbnail…

Old Faithful Contour Plot

This contour plot visualizes the density distribution of data points using a white-to-teal gradient, with darker regions indicating higher point concentrations. It reads data from a CSV file and displays it as smooth, layered density contours over a coordinate grid. The visualization uses d3.contourDensity to compute density values, d3.geoPath to render the contour shapes, and d3.scaleLinear for the color mapping. The axes are generated with d3.axisBottom and d3.axisLeft, and the data is plotted in an SVG canvas.

PPatricijaC

73% match

Loading thumbnail…

GeoTIFF Contours

This example visualizes surface temperature data from a GeoTIFF file as twenty colored contour bands over a map-like SVG view. It reads the raster values with the GeoTIFF library, computes contours using `d3.contours` with smoothing disabled, and renders them as filled paths via `d3.geoPath`. A sequential color scale with `d3.interpolateMagma` maps each contour’s value to its fill color, producing a vivid elevation-style temperature gradient across the geographic extent.

Mmbostock

72% match