Skip to main content
100%

Contour Test using Jason Davis implementation with D3

✓ Published0🌍 Public
ZZJONSSON
Last edited Jul 19, 2012
Created on Oct 20, 2011

This example uses the Conrec algorithm with D3 to render contour lines from a matrix of numerical data. The data is a 20×20 grid of values ranging from -5 to 3. D3’s linear scales map the grid indices to a 500×500 pixel coordinate space, while a color scale maps contour levels from white to red. The Conrec library computes contour polygons for 17 levels, and D3 renders them as semi-transparent filled paths with black strokes. The result is a multi-level contour plot that visualizes the underlying scalar field, with each level colored according to its value.

AI-generated description

Similar vizzes

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
92% match
Loading thumbnail…

Basic contours in D3

An animated contour plot displays a matrix of numeric values as evolving line segments, with the contour level sweeping back and forth between -3.5 and 1. The animation updates every 50 milliseconds, redrawing the paths for the current level using a simplified implementation of Paul Bourke’s CONREC algorithm, which checks triangular subdivisions of each 4-point cell. The visualization is rendered with the D3.js library, using `d3.select` and `d3.svg.line` to map data coordinates to SVG paths, while the dataset is a 20x20 matrix of values loaded from a separate JavaScript file.

ZZJONSSON
81% match
Loading thumbnail…

Basic filled contours in D3

This example displays a two-dimensional scalar field as a filled contour map, with nested color bands representing different value ranges. The visualization uses a custom contouring algorithm based on triangular meshes, which generates both filled polygons for areas and unconnected line segments for contour boundaries. Implemented with D3.js, the code uses linear scales to map data coordinates to screen positions and SVG polygons and paths for rendering. The underlying dataset is a hardcoded 20x20 matrix of numeric values, with a white-to-red color scale encoding the range from -5 to 3.

ZZJONSSON
77% match
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
75% match
Loading thumbnail…

Contour experiment

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.

RRobinL
75% 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
73% match
Loading thumbnail…

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher
72% 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
71% match