Down-sampling time series data
This example demonstrates how the Largest-Triangle-Three-Buckets (LTTB) algorithm reduces a 1,000-point time series to a smaller set that preserves the visual shape of the data. The chart first shows the raw data as a line, then applies LTTB with a threshold tied to half the SVG width, ensuring at most one point per two pixels to avoid aliasing. The code uses D3.js (v3) with `d3.time.scale` and `d3.svg.line` for axes and rendering, and the algorithm is adapted from Steinarsson's thesis. A label updates to show the original versus downsampled point counts.
AI-generated descriptionDownsampling timeseries data using the "Largest-Triangle-Three-Buckets algorithm" (LTTB) as described in Sveinn Steinarsson's 2013 Master's thesis Downsampling Time Series for Visual Representation.
The algorithm is based on the technique of forming triangles between adjacent data points and using the area of the triangles to determine the perceptual importance of the individual points. This helps to retain the visual characteristics of the original path whilst greatly reducing the number of points representing it.
The threshold parameter for the algorithm is set at half the current width of the svg in pixels - so at most there is one point in the input domain represented for every two pixels in the output range.
Using this method helps to avoid any alising issues that occur when a high number of points are drawn in a low number of pixels.