Density Contours

100%

Density Contours

✓ Published0🌍 Public

Last edited Apr 3, 2018

Created on Apr 3, 2018

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.

AI-generated description

An example of d3-contour for density estimation.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9'>Density Contours</a>

gpl-3.0 Licensed

Similar vizzes

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

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

82% match

Loading thumbnail…

Old Faithful Contour Plot B - 2

This visualization shows the relationship between eruption time and waiting time for the Old Faithful geyser dataset, using density contours to highlight areas of high data concentration. The contours are computed with `d3.contourDensity` and rendered as SVG paths via `d3.geoPath`, with colors mapped through `d3.scaleSequential` and `d3.interpolateGreens`. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the contour bandwidth updates interactively based on mouse movement across the page, demonstrating dynamic resmoothing of the density estimate.

OOleJRask

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

81% match

Loading thumbnail…

moving contours colored

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.

DDilara Bozkurt

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

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

79% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This interactive contour plot visualizes the Old Faithful dataset, showing the density of eruption and waiting times through colored bands. The visualization displays contours rendered as filled SVG paths using `d3.geoPath`, with colors mapped from a sequential greens scale. Users adjust the density bandwidth by moving their mouse across the plot, which triggers a re-render of the contour data via `d3.contourDensity` and `d3.select` event handling. Axes and labels are drawn using `d3.axisBottom` and `d3.axisLeft`, and the density estimate uses a Gaussian kernel with a bandwidth that ranges from 0 to 40 pixels as the mouse moves horizontally.

PPioustu

77% match