https://github.com/mourner/simpleheat

A tiny JavaScript library for drawing heatmaps with Canvas
https://github.com/mourner/simpleheat

Last synced: 15 days ago
JSON representation

A tiny JavaScript library for drawing heatmaps with Canvas

• Host: GitHub
• URL: https://github.com/mourner/simpleheat
• Owner: mourner
• License: bsd-2-clause
• Created: 2014-01-28T14:11:36.000Z (almost 11 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-05-15T09:21:38.000Z (over 1 year ago)
• Last Synced: 2024-05-15T13:09:19.356Z (6 months ago)
• Language: JavaScript
• Homepage: http://mourner.github.io/simpleheat/demo
• Size: 33.2 KB
• Stars: 923
• Watchers: 42
• Forks: 183
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
simpleheat

==========

A super-tiny JavaScript library for drawing heatmaps with Canvas.

Inspired by [heatmap.js](https://github.com/pa7/heatmap.js), but with focus on simplicity and performance.

Powers [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat), a heatmap plugin for [Leaflet](http://leafletjs.com).

Demo: http://mourner.github.io/simpleheat/demo

```js

simpleheat('canvas').data(data).draw();

```

## Reference

#### Constructor

```js

// create a simpleheat object given an id or canvas reference

var heat = simpleheat(canvas);

```

#### Data

```js

// set data of [[x, y, value], ...] format

heat.data(data);

// set max data value (1 by default)

heat.max(max);

// add a data point

heat.add(point);

// clear data

heat.clear();

```

#### Appearance

```js

// set point radius and blur radius (25 and 15 by default)

heat.radius(r, r2);

// set gradient colors as {: ''}, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}

heat.gradient(grad);

// call in case Canvas size changed

heat.resize();

```

#### Rendering

```js

// draw the heatmap with optional minimum point opacity (0.05 by default)

heat.draw(minOpacity);

```