Contour Plot

100%

✓ Published0🌍 Public

Last edited Mar 6, 2019

Created on Dec 8, 2012

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.

AI-generated description

An example of d3-contour using R’s volcano. See also a heatmap of this dataset.

gpl-3.0 Licensed

Similar vizzes

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…

Volcano

This visualization animates contour lines of volcano elevation data, smoothly interpolating between threshold boundaries to create a flowing, morphing effect over a geographic projection. The contours are generated using `d3.contours` from a grid of elevation values in `volcano.json`, projected with `d3.geoNaturalEarth1` and rendered as SVG paths via `d3.geoPath`. A sequential plasma color scale encodes elevation values, while an infinite loop transitions path shapes and fills every 200 milliseconds using `d3.transition`. The animation cycles through paired thresholds, creating continuous, fluid distortions of the terrain.

Vvivianaaai@qq.com

81% match

Loading thumbnail…

Old Faithful Contour Plot

A contour plot visualizes the density of eruption data from the Old Faithful dataset, with continuous green-shaded regions representing higher concentrations of points. The visualization uses d3.contourDensity to compute density estimates and d3.geoPath for rendering the resulting contours as SVG paths. Axes and labels are drawn using d3.axisBottom and d3.axisLeft, while a sequential color scale with d3.interpolateGreens maps density values to fills. The interactive example updates the contour bandwidth dynamically as the mouse moves across the page.

PPatricijaC

81% match

Loading thumbnail…

Fork of Volcano

This interactive visualization animates contour lines of the volcano dataset, showing a smooth morphing effect as the contour thresholds transition between successive intervals. The display uses a plasma color scale to differentiate elevation bands, with white strokes delineating each path. The code constructs GeoJSON MultiPolygons from the gridded `volcano.json` data using `d3.contours` and projects them with `d3.geoNaturalEarth1` and `d3.geoPath`. A continuous loop drives a `transition` of 2000ms duration, interpolating threshold values and updating both the path shapes and fill colors to create a perpetual pulsing animation.

DDonald Bagwell

79% match

Loading thumbnail…

Old Faithful Contour Plot

This contour plot visualizes the Old Faithful dataset, showing the density of eruptions against waiting times as a smooth gradient of green-filled polygons. The code uses d3-contour’s `d3.contourDensity` to compute density estimates from the scatter data, and d3-scale-chromatic’s `interpolateGreens` for the sequential color scale. SVG rendering via D3 v4 draws the contours with `d3.geoPath`. An interactive mouse move adjusts the bandwidth of the density estimation from zero to forty, updating the plot in real time.

CCurran Kelleher

77% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This visualization shows the Old Faithful dataset as a contour plot, with eruption time on the x-axis and waiting time on the y-axis. The density of data points is represented through filled contour regions using a sequential green color scale. The code uses d3-contour’s `contourDensity` to compute the contours, and `d3.geoPath` to render them as SVG paths. Axes are drawn with d3.axisBottom and d3.axisLeft, and moving the mouse dynamically updates the bandwidth of the density estimation, recomputing the contours in real time.

CCristina Macaraig

77% match

Loading thumbnail…

Old Faithful Contour Plot B

This visualization displays the Old Faithful geyser dataset as a smooth contour plot, with eruption time on the x-axis and waiting time on the y-axis. The code uses d3.contourDensity to compute density contours from the data, then renders them as filled SVG paths via d3.geoPath, with a sequential color scale from d3-scale-chromatic using interpolateGreens. Interactive bandwidth adjustment occurs on mousemove, altering the contour smoothing level dynamically. Axes are drawn using d3.axisBottom and d3.axisLeft, with data loaded via d3.tsv from a GitHub gist.

OOleJRask

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

77% match