Kernel Smoothing

100%

Kernel Smoothing

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 1, 2015

This example visualizes kernel smoothing by plotting raw count data over time as small, semi-transparent steel-blue symbols, then overlaying a smooth black trend line that averages nearby values with an Epanechnikov kernel. The data, loaded from a CSV file, is parsed with `d3.utcParse` and drawn to a Canvas context. The custom smoothing curve is implemented via `d3.line` with a `kernelSmooth` curve factory, which computes weighted averages over a specified bandwidth. The visualization uses D3 v4 for scaling and plotting, and the result is a clear comparison between the noisy observations and the smoothed pattern.

AI-generated description

A quick-and-dirty attempt at kernel smoothing. See d3/d3-shape#43.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Histogram Smoothing

This visualization demonstrates how repeated iterations of a moving average smooth a histogram of 300 random normal samples into a progressively flatter curve, approximating a Gaussian filter and kernel density estimation. The code uses d3.histogram to bin the data, d3.area to render the histogram on two stacked Canvas elements, and a d3.timer to animate the blur process at 30 FPS. Each frame, the `blur` function averages each bin’s density with its neighbors, while the foreground canvas redraws the area with a semi-transparent fill and the background canvas strokes the current curve with a hue that cycles through time.

CCurran Kelleher

75% match

Loading thumbnail…

Histogram Smoothing

A histogram of 300 random normal samples, drawn as a smooth area chart on a Canvas, is repeatedly smoothed by a three-point moving average. Each animation frame applies one blur pass to the bin densities, causing the distribution to progressively flatten and widen toward a normal curve. The code uses d3.histogram to bin the data, d3.area with a Canvas context for rendering, and d3.timer to drive the animation, with colors cycling through hues via d3.hsl. The rainbow-like trail of strokes shows the smoothing progression over time.

CCurran Kelleher

72% match

Loading thumbnail…

Untitled

A kernel density estimation chart displays the distribution of price data from a CSV file, with a smooth green curve showing density across a 0-1000 price range. The visualization uses D3 v6 methods including `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `kernelDensityEstimator` with an Epanechnikov kernel. The SVG rendering is built within a React framework, with axes positioned via margins, and the density curve generated using `d3.line` with `curveBasis` smoothing.

Ssubratanp

70% match

Loading thumbnail…

Untitled

This example visualizes the distribution of probability estimates from eight verbal uncertainty phrases (such as “Almost Certainly” and “Almost No Chance”) using kernel density estimation. Each smoothed density curve is colored with a viridis scale based on the group mean, revealing differences in central tendency and spread across categories. The visualization uses D3 v4 to load CSV data from GitHub, compute the means, and render the densities as SVG paths. The kernel density estimator applies an Epanechnikov kernel, while axes, gridlines, and labels are drawn with `d3.axisBottom`, `d3.axisLeft`, and the `d3.scaleSequential` with `d3.interpolateViridis`.

SSimone

69% match

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

68% match

Loading thumbnail…

LOESS

This example demonstrates the LOESS (locally weighted regression) smoothing technique on noisy sinusoidal data. The visualization displays 100 randomly generated data points, each represented by a small circle, with a smooth black trend line overlaid to show the underlying pattern. The data is simulated, with x values evenly spaced from 0 to 1 and y values following a sine wave with added random noise. LOESS regression is applied using the science.js library with a bandwidth of 0.2, producing a smooth curve that captures the data’s trend. The chart includes axes, uses an SVG rendering, and is built with D3.js v3 and science.js.

CCurran Kelleher

67% match

Loading thumbnail…

Untitled

A histogram displays the distribution of a dataset of numeric values, with bars colored on a gradient from light to dark steelblue based on frequency. A black kernel density estimation curve overlays the bars, and users can adjust both the number of histogram bins and the bandwidth of the Gaussian kernel via range sliders, triggering smooth transitions. The visualization is built with D3 v4, using `d3.histogram`, `d3.layout.histogram`, `d3.scale.linear`, and SVG rendering, with the density curve computed via a custom `kernelDensityEstimator` and drawn using `d3.line` with `d3.curveBasis`.

HHugo-Dominguez

66% match

Loading thumbnail…

Monotone Interpolation

This example demonstrates monotone interpolation, a curve-fitting method that produces a smooth line through a series of points without overshooting the local data range. Six yearly data points from 2001 to 2006 are plotted as white circles with steelblue outlines on a chart with time-scaled X and linear Y axes. The code uses D3 v3’s `d3.svg.line` with the `"monotone"` interpolator to generate the SVG path, while `d3.time.scale` and `d3.scale.linear` handle the axes. The chart is rendered as an SVG element with axis and line classes styled via CSS.

Mmbostock

66% match