https://github.com/domoritz/line-density

Fast heatmaps for massive time series.
https://github.com/domoritz/line-density

Last synced: about 1 month ago
JSON representation

Fast heatmaps for massive time series.

• Host: GitHub
• URL: https://github.com/domoritz/line-density
• Owner: domoritz
• License: bsd-3-clause
• Created: 2018-06-20T00:02:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-01-26T09:08:07.000Z (over 3 years ago)
• Last Synced: 2024-05-01T22:48:21.556Z (5 months ago)
• Language: TypeScript
• Homepage: https://domoritz.github.io/line-density
• Size: 4.44 MB
• Stars: 27
• Watchers: 5
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.npmjs.com/package/line-density) and can be installed with `yarn add line-density`.

## Usage

```ts

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