Skip to main content
SimilarExport ZIP
100%

weighted KDE + Voronoï maps

✓ Published0🌍 Public
KKcnarf
Last edited Oct 1, 2018
Created on Sep 18, 2018

This visualization combines a weighted kernel density estimation (KDE) with Voronoi maps to depict the distribution of waiting times between eruptions of the Old Faithful geyser. The KDE curve and histogram bins are rendered with D3.js, while each bin is filled with a Voronoi map whose cell areas encode the weight of individual data points. The weighted KDE is computed using a custom `kernelDensityEstimator` with a scaled Epanechnikov kernel, and the Voronoi maps are generated via the `d3.voronoiMap` plugin, which is adapted to maintain fixed x-coordinates during computation. Interactive controls allow toggling of the standard and weighted overlays, and hovering reveals details about individual cells or bins.

AI-generated description

This block experiments two things:

  1. computation of Weighted KDE, an extension of standard KDE; in standard KDE, each datum counts for the same amount (i.e. 1), whereas in weighted KDE, each data counts for a specific amount (i.e. its weight); for example, one can make a standard KDE of the number of sales per day, or a weighted KDE of the total sales' profit per day
  2. fill the weighted KDE curve/area with cells encoding data's weights (light weight -> small cell, heavy weight -> large cell); the objective is to give a sens of the underlying distribution that produces the weighted KDE; I use the d3-voronoï-map plugin to do so, but:
  3. tweek it so that each site's x-coord remains unchanged durring the voronoï map computation (see file d"-voronoi-map-fixed-x.js)
  4. define a specific initial positioning function (exactly encodes x-coord, and computes a random y-coord)

Usage : use the controller to hide/show objects, and hover a cell or a bin for details.

Indeed, the underlying dataset does not suit the experimentation. I have to find another one.

==original README==

Kernel density estimation is a method of estimating the probability distribution of a random variable based on a random sample. In contrast to a histogram, kernel density estimation produces a smooth estimate. The smoothness can be tuned via the kernel’s bandwidth parameter. With the correct choice of bandwidth, important features of the distribution can be seen, while an incorrect choice results in undersmoothing or oversmoothing and obscured features.

This example shows a histogram and a kernel density estimation for times between eruptions of Old Faithful Geyser in Yellowstone National Park, taken from R’s faithful dataset. The data follow a bimodal distribution; short eruptions are followed by a wait time averaging about 55 minutes, and long eruptions by a wait time averaging about 80 minutes. In recent years, wait times have been increasing, possibly due to the effects of earthquakes on the geyser’s geohydrology.

This example is based on a Protovis version by John Firebaugh. See also a two-dimensional density estimation of this dataset using d3-contour.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Kernel Density Estimation

This example visualizes the distribution of wait times between eruptions of the Old Faithful geyser, comparing a histogram of 272 observations from R’s `faithful` dataset with a smooth kernel density estimate. The density curve, computed using an Epanechnikov kernel with a bandwidth of 7, reveals the bimodal nature of the data, with peaks around 55 and 80 minutes. The visualization uses d3.histogram for binning, d3.line with curveBasis for the density path, and d3.axisBottom and d3.axisLeft for the axes, rendering in SVG.

Mmbostock
78% match
Loading thumbnail…

LOESS

This visualization uses a LOESS curve to compare the distribution of waiting times between eruptions of the Old Faithful geyser against a kernel density estimate. The chart displays a histogram of the dataset in steelblue, while multiple smoothed lines, each colored black, are overlaid to represent varying bandwidths in the kernel density estimation. The x-axis spans the range of waiting times (30 to 110), and the y-axis represents probability density. The visualization, rendered in SVG with D3 and science.js, demonstrates how different bandwidths affect the smoothness of the density estimate relative to the binned data.

CCurran Kelleher
74% 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
72% match
Loading thumbnail…

Old Faithful HeatMap

This interactive heatmap visualizes the Old Faithful eruption dataset, showing the relationship between eruption duration and waiting time as a grid of colored bins. The visualization uses Vega-Lite’s rect mark with binned quantitative encodings for both axes and a count aggregate for color intensity, rendered via vega-embed. Moving the mouse dynamically adjusts the number of histogram bins by re-rendering the specification, using D3’s `d3.tsv` to load the remote data and `d3.select` to listen for mousemove events. The color scheme uses a green sequential palette, with the legend positioned to the left.

CCurran Kelleher
72% match
Loading thumbnail…

Fork of Old Faithful HeatMap

This interactive visualization presents the Old Faithful dataset as a 2D heatmap, showing the relationship between eruption durations and waiting times. The plot uses a binned rectangular mark, with color intensity representing the count of observations in each bin, rendered using Vega-Lite’s `bin` encoding and `aggregate: "count"`. The code employs a minimal setup with D3.js to fetch the TSV data and re-renders the visualization on every mouse movement, dynamically adjusting the bin count via `Math.round(bins)`. Consequently, the heatmap’s granularity responds directly to the horizontal cursor position, letting viewers explore different binning resolutions. The visualization relies on vega-embed to render the specification as a static SVG.

AAnoukvdh
72% match
Loading thumbnail…

Kernel Density Estimation to Violin Plot

This example starts with a histogram and kernel density estimation for the Old Faithful eruption wait times from R's faithful dataset, then morphs the density curve into a violin plot. The animation transitions the curve from a line into a mirrored area, scaling it to half height, and fades the histogram and axis. Built with D3 v3, it uses `d3.svg.area`, `d3.layout.histogram`, and `transition.attr` to animate the shape, demonstrating how a density estimate becomes a violin plot.

KKcnarf
72% match
Loading thumbnail…

Animated Voronoï map

This example demonstrates an animated Voronoï map that self-organizes over time, showing both live iterative updates and a static final arrangement. The visualization uses the d3-voronoi-map plugin (v2) to compute weighted Voronoï diagrams on a circular clipping polygon, with each iteration rendered on canvas. Users can toggle between drawing the Voronoï cells, their weights as circles, or both, and choose among greyscale, radial rainbow, or conical rainbow backgrounds. The code relies on d3.v5 and the d3-weighted-voronoi plugin, with user interactions handled through HTML radio buttons and checkboxes.

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