Canvas Heatmap


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

!Image of Canvas Heatmap

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

`

`

then

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

API reference

$3

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

$3

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)) |

$3

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