Skip to content

Instantly share code, notes, and snippets.

Just doing my thing...

# Fraser FraserChapman

Just doing my thing...
Last active August 31, 2015 23:55
linear gradient with draggable stops.
View README.md

Linear gradient with stops offset proportionally to the input domain value they represent.

For example given the domain: [0, 5, 10, 50, 100] And the range: ["#190729", "#191996", "#2F972F", "#FFFF66", "#FF1919"] The stops would be offset by: 0%, 5%, 10%, 50%, 100%

The colour at the percentage offset is represented by the hex value at the same index position in the scheme, colours between stops are interpolated in a linear fashion.

When a scheme is selected a random domain is generated and the gradient is redrawn using it. Information on the current domain and selected range is given along with the stop percentages and the domain values that they correspond to.

Last active September 18, 2018 09:54
Down-sampling time series data
View README.md

Downsampling 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.

To test the example choose Open in new window and resize the window.