Contour experiment

100%

Contour experiment

✓ Published0🌍 Public

Last edited Apr 8, 2017

Created on Apr 8, 2017

This contour plot visualizes a 5×5 grid of values containing 1s at the corners and center, rendered as smooth isolines. The d3-contour library computes contours at thresholds from 0 to 1 in 0.1 increments, with d3.scaleLinear mapping threshold values to the YlGnBu color interpolator. The SVG paths are drawn using d3.geoPath with a geoIdentity projection scaled by 100, and each contour is filled according to its corresponding value. The sparse data creates a symmetric pattern of concentric, color-graded polygons.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/69ac989185313094d02b22c23e10660f'>Contour experiment</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Contour experiment

A grid of five-by-five values is rendered as a colored contour plot, with sparse peaks at the corners and center producing concentric bands. The example uses `d3.contours` from the d3-contour module to compute iso-lines from the array, with thresholds set from 0 to 1 in increments of 0.1. Each resulting path is drawn as an SVG element via `d3.geoPath` and `d3.geoIdentity`, scaled by 100, and filled with a linear scale interpolating the YlGnBu color scheme from d3-scale-chromatic.

RRobinL

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

80% 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

80% match

Loading thumbnail…

Contour Plot II

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.

MMorganhaoyu

79% 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

76% match

Loading thumbnail…

Contour Plot

This contour plot visualizes a data surface through layered SVG paths and grouped rectangles, using filled shapes to represent different value bands. The visualization renders with React and SVG, employing path elements with complex cubic and quadratic Bézier curves to trace contour lines. A color scale ranges from dark purple through magenta and orange to pale yellow, with each colored region corresponding to a specific elevation range in the plotted dataset. The implementation uses direct SVG path data rather than a charting library, providing precise control over the geometric contour representation.

Xxyzcorrupt@gmail.com

76% match

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

75% match

Loading thumbnail…

Tricontour flower

This example visualizes a flower-shaped set of contour polygons overlaid with colored points, demonstrating the d3-tricontour library for triangular contouring. The data is generated procedurally on a polar grid, with values based on a cosine function of radius and angle. The code uses d3-tricontour to compute contours, d3.geoPath for rendering paths, and d3.scaleSequential with the Turbo color scheme to map contour values to colors. Points are drawn as small circles with fills matching the color scale. The SVG rendering is styled with a dark background, and the visualization is built using D3 v5 and blockbuilder.org.

PPhilippe Rivière

75% match