LOESS

100%

✓ Published0🌍 Public

Last edited Dec 2, 2015

Created on Dec 2, 2015

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.

AI-generated description

This is a copy of work done by Jason Davies that demonstrates use of science.js. It is posted here simply so it can be studied. The original example code can be found at science.js/examples/loess. Slight modifications were made so it displays well on bl.ocks.org.

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1984930&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

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

70% match

Loading thumbnail…

Kernel Smoothing

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.

Mmbostock

67% match

Loading thumbnail…

Tweet Times with LOESS Curve

This graph visualizes the rate of tweets from Eric Fischer’s Twitter feed over a one-year period, with the observed data shown as individual points and a smoothed LOESS curve overlaid to reveal underlying temporal patterns. The x-axis represents time of day (UTC, shifted by 7 hours), while the y-axis shows tweets per hour. The visualization uses a scatterplot of dots for raw rates, a black LOESS trend line to highlight daily periodicity, and gridlines with tick labels for readability. The chart is rendered using D3.js with SVG, and the LOESS curve is computed using science.js.

CCurran Kelleher

67% match

Loading thumbnail…

Sinusoidal interpolation

This example demonstrates sinusoidal interpolation between tide event data points, contrasting smooth transitions during slack water with curved transitions during flood and ebb phases. A blue line traces the interpolated speed values over time, while circles mark the original observed measurements. The visualization uses a custom interpolation function that applies a sine-based easing to each segment, depending on whether the preceding event is classified as slack or non-slack. Built with D3 v4, it relies on `d3.timeParse`, `d3.scaleLinear`, `d3.line`, and `d3.csvParse` to process inline CSV data and render an SVG path.

PPhilippe Rivière

65% match

Loading thumbnail…

Line Graph

This line graph example displays a single smooth curve that dips and rises across a blank SVG canvas, tracing a sinusoidal-like pattern from the left edge to the right. The path is drawn with a thick black stroke and rounded line caps on a 781×554 viewBox. The visualization is rendered using React with inline SVG, with the line’s coordinates hardcoded in one path element. No data source or interactivity is present; the example focuses purely on basic SVG path rendering within a minimal HTML page.

CClaudio Puggioni

63% match

Loading thumbnail…

Line with Missing Data

This example demonstrates how a line chart handles missing data points by breaking the line into segments. The visualization plots a sine wave–like curve across 40 evenly spaced samples, where every fifth data point is null, causing the line to skip those gaps. The chart uses D3 v4’s `d3.line()` with a `.defined()` accessor to filter null values, while circles mark the valid points. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with the data generated procedurally using `d3.range()` and `Math.sin`.

深深度碎片

63% match

Loading thumbnail…

Line with Missing Data

A sine-like series of 40 points is shown as a steel-blue line, with every fifth data point missing so the line breaks at those gaps rather than interpolating across them. White circles mark the existing points. The chart uses d3.line with its `defined` accessor to skip null values, while d3.scaleLinear sets the x and y scales, and d3.axisBottom and d3.axisLeft render the axes in an SVG.

Mmbostock

63% match

Loading thumbnail…

Sine wave with line

This example animates a smooth, natural sine wave that undulates across the screen, with a line drawn through its points using a black stroke. The wave is generated from 100 data points, each positioned along the x-axis with a y-coordinate determined by a sine function that shifts over time. Built with D3 v6 in a React framework, the visualization updates every frame using `setInterval` and renders via SVG. The code employs D3’s `line` generator with a `curveNatural` interpolation and animates the wave by incrementing the phase offset `t`.

LLewis Ward

62% match