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 [{},{}].

| Parameter | Description | | --------- | ----------------------------------------------------- | | x | 1D array of x coordinates | | y | 1D array of y coordinates | | z | 2D array of z values (z.shape === (y.shape, x.shape)) |

options

| Option | Description | Default | Type | | ------------------- | ----------------------------------------------------- | ----------- | -------- | | title | Title for the graph (hidden for web display) | | String | | xLabel | Label for the x axis | | String | | yLabel | Label for the y axis | | String | | zLabel | Label for the z axis | | String | | xUnit | Unit for the x axis | | String | | yUnit | Unit for the y axis | | String | | zUnit | Unit for the z axis | | String | | xLog | Use log scale for the x axis | false | Boolean | | yLog | Use log scale for the y axis | false | Boolean | | tooltip | Show a tooltip on hover | true | Boolean | | zMin | Minimum value for z color scale | Data min | Number | | zMax | Maximum value for z color scale | Data max | Number | | fontSize | Font size of graph text | 12 | Number | | contour | Draw filled contours | false | Boolean | | yReverse | Reverse y axis | false | Boolean | | xReverse | Reverse x axis | false | Boolean | | marginTop | Top margin in px | 10 | Number | | marginLeft | Left margin in px | 46 | Number | | marginBottom | Bottom margin in px | 46 | Number | | marginRight | Right margin in px | 70 | Number | | legendRight | Plot the legend | true | Boolean | | thresholdStep | Number of thersholds for when plotting contours | 20 | Number | | backgroundColor | Background color in html | transparent | String | | autoDownsample | Downsample for contour plot | 500 | Number | | setDownloadGraph | Add png download to function | false | Function | | setDownloadGraphDiv | Unique div ID to apply onclick event for png download | false | String | | hover | Return the mouse values on hover | false | Function | | click | Return the mouse values on click | false | Function | | width | Width of the graph | div width | Number | | height | Height of the graph | div height | Number | | colors | Color range for the plot (see below for example) | Red -> Blue | Array | | language | Select language for time axis. en, de, fr, es | en | String |

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 },
];