Fast density heatmaps for time series with WebGL
Learn more in our paper at https://arxiv.org/pdf/1808.06019.pdf.
Try the demo at https://domoritz.github.io/line-density.
This implementation renders as many lines a possible into a single framebuffer and computes the sums and normalization entirely on the GPU. The multiple heatmaps are eventually collected into a single output buffer. We can then render the buffer with the tool of our choice (e.g. Vega).
You can use line-density in Observable. Check out https://beta.observablehq.com/@domoritz/line-density.
Twitter published a library that uses the line density algorithm in pure JavaScript at https://observablehq.com/@twitter/density-plot-introduction.
Installation
This module is available on npm and can be installed with yarn add line-density.
Usage
import density from "line-density";
import ndarray from "ndarray";
const data = ndarray([1, 2, 3, 2, 1, 2], [2, 3]);
const lineDensity = await density(
// the time series data
data,
// x binning
{ start: 0, stop: 3, step: 1 },
// y binning
{ start: 0, stop: 3, step: 1 }
);The density function takes an optional canvas as the fourth parameter (for use with https://github.com/Automattic/node-canvas).
Related Repositories
https://github.com/domoritz/line-density-rust for a parallel Rust implementation.