canvas-heatmap v1.6.3

Canvas Heatmap

Interactive heatmap, capable of displaying 1,000,000+ data points using canvas and d3.

Uses d3 for rendering the axis.

Check out the examples:

• Basic (source)

Quick start

import heatmap from 'canvas-heatmap';

then

heatmap(div, data, options={});

or

<script type="text/javascript" src="https://unpkg.com/canvas-heatmap"></script>

then

heatmap(div, data, options={});

API reference

div

The unique id of a div. The graph will be appended to this div.

data

Data can be an object {x: [], y:[], z:[[]]} or and array of objects {},{}.

options

Colors

Example of color range:

[
    { color: "#000000", point: 0.0 },
    { color: "#550088", point: 0.14285714285714285 },
    { color: "#0000ff", point: 0.2857142857142857 },
    { color: "#00ffff", point: 0.42857142857142855 },
    { color: "#00ff00", point: 0.5714285714285714 },
    { color: "#ffff00", point: 0.7142857142857143 },
    { color: "#ff8c00", point: 0.8571428571428571 },
    { color: "#ff0000", point: 1.0 },
];