Volcano

100%

✓ Published2🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

81% match

Loading thumbnail…

Heatmap

This heatmap visualizes topographic elevation data from the `volcano.json` dataset, rendered directly onto a Canvas element. The code reads the JSON file using `d3.json` and maps values between 90 and 190 to a custom terrain-like color scale built with `d3.scaleSequential` and `d3.interpolateHsvLong`. Elevation values are converted to RGB colors via `d3.rgb` and written into `ImageData` with `putImageData`.

Mmbostock

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

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

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

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

71% match

Loading thumbnail…

Zoomable Volcano Plot with Tooltips in D3 v4

This zoomable volcano plot visualizes differential gene expression from a tab-separated data file, plotting log2 fold-change on the x-axis against -log10 q-values on the y-axis. Gene names appear in tooltips on hover, and points are colored by significance and fold-change thresholds. Built with D3 v4, it uses d3.scaleLinear and d3.scaleLog for axes, d3.zoom() for panning and zooming via brush, and a clip path to constrain rendering. A reset button restores the original view. Data comes from a .diff file parsed with d3.tsv.

Lluavabo

71% match