moving contours colored

100%

moving contours colored

✓ Published2🌍 Public

Last edited Jan 13, 2025

Created on Jan 13, 2025

This example animates a set of randomly moving points and their evolving density contours. Using the Old Faithful geyser dataset, it visualizes how the point distribution shifts over time. The code employs `d3.contourDensity()` to compute contour levels and `d3.geoPath()` to render them as SVG paths. Points drift randomly within the canvas, and each contour is filled with a random color and outlined in steel blue. The visualization updates every 200 milliseconds using `d3.interval`, creating a dynamic, fluid representation of changing data density.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

moving contours

This example visualizes the movement of 30 random points through animated density contours. As the points drift within the SVG canvas, `d3.contourDensity()` computes ten density levels, which are drawn as steel-blue contour paths using `d3.geoPath()`. The points themselves are rendered as small unfilled circles. The data is generated randomly rather than from an external file. The animation is driven by `d3.interval()`, which triggers an update every 200 milliseconds, moving each point by a random offset and recomputing the evolving contours in real time.

DDilara Bozkurt

93% match

Loading thumbnail…

cartographic doodled

This example visualizes the Old Faithful geyser dataset through an animated, hand-drawn aesthetic. The visualization represents eruption durations and waiting times as a moving contour map, with lines that shift and deform over time. Using D3.js version 7, the code employs `d3.contourDensity` to generate density contours from the data points, then animates these contours with `transition.attrTween` to create a flowing, organic movement. The rendering uses SVG paths with a rough, sketch-like stroke style, giving the data a playful, doodled appearance.

DDilara Bozkurt

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…

Density Contours

Using d3-contour’s density estimation, this example visualizes the bivariate distribution of geyser eruptions with steel-blue contour lines overlaid on white data points. The code loads the faithful.tsv dataset, computes density contours via `d3.contourDensity` with a bandwidth of 40, and renders them as SVG paths using `d3.geoPath`. Axes are labeled “Idle (min.)” and “Erupting (min.)”, with `d3.axisBottom` and `d3.axisLeft` scaled linearly to map waiting time against eruption duration.

MMicrobie

80% match

Loading thumbnail…

Density Contours

This example visualizes the density of the Old Faithful geyser dataset, showing the relationship between eruption duration and waiting time. It displays smooth contour lines that represent the estimated probability density of the data points, overlaid on a scatterplot of individual measurements. Built with D3 v4, the code uses `d3.contourDensity` to generate the contours and `d3.geoPath` to render them as SVG paths. The data is loaded from a TSV file, with axes labeled for idle and erupting minutes.

Mmbostock

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

80% match

Loading thumbnail…

contours with audio

This example visualizes the distribution of randomly generated points as animated contour lines that respond to audio frequency data. The code uses D3's `contourDensity` and `geoPath` to compute and render density contours, while an AudioContext analyzer extracts frequency data to drive point movement in real time. Points are rendered as small steelblue circles, and the contour paths update dynamically as points shift based on the audio input. The visualization demonstrates how D3 can integrate web audio APIs with geographic projection techniques for interactive, sound-reactive data displays.

DDilara Bozkurt

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

79% match