line-density

Fast density heatmaps for massive time series.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
line-density
0.0.44 years ago4 years agoMinified + gzip package size for line-density in KB

Readme

Fast density heatmaps for time series with WebGL
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).
<img src="https://raw.githubusercontent.com/domoritz/line-density/master/screenshot.png" width="600"></img>

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.

Resources

  • http://regl.party/api
  • https://github.com/Erkaman/regl-cnn/blob/gh-pages/src/gpu.js
  • https://github.com/realazthat/glsl-sat
  • https://github.com/regl-project/regl/blob/gh-pages/example/graph.js
  • https://beta.observablehq.com/@tmcw/game-of-life-with-regl