mourner / simpleheat

A tiny JavaScript library for drawing heatmaps with Canvas

simpleheat

A super-tiny JavaScript library for drawing heatmaps with Canvas. Inspired by heatmap.js, but with focus on simplicity and performance.

Powers Leaflet.heat, a heatmap plugin for Leaflet.

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

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

Reference

Constructor

// create a simpleheat object given an id or canvas reference
var heat = simpleheat(canvas);

Data

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

// set point radius and blur radius (25 and 15 by default)
heat.radius(r, r2);

// set gradient colors as {<stop>: '<color>'}, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
heat.gradient(grad);

// call in case Canvas size changed
heat.resize();

Rendering

// draw the heatmap with optional minimum point opacity (0.05 by default)
heat.draw(minOpacity);

simpleheat's Issues

Values larger than the maximum are visualized incorrectly

Values that are larger than the maximum specified for the heatmap are not colorized correctly. This happens because a ctx.globalAlpha greater than 1 is ignored, so the color of the previously drawn circle is used again. Values that are larger than the maximum value should be drawn in the same colour as the maximum value.

This picture demonstrates the current behaviour:

This picture demonstrates the expected behaviour (at least what I would expect):

steps to reproduce this issue:

• set heatmap max value to 2 instead of 18: var heat = simpleheat('canvas').data(data).max(2) (demo/index.html, 42)
• disable adding data on mouseover by commenting out demo/index.html ll.54-56
• replace demo/data.js with the following:

var data = [[20, 20, 2], [120, 120, 3], [220, 220, 1], [320, 320, 3]];

• open demo/index.html in your browser

I also opened a pull request with a fix for this issue.

Alternating radius

How about making points radius to be dependent on data value?

Radius does not change

I've been trying to change the radius using heat.radius(r,blur) but it never changes.
I suspect that something is reverting the radius to the default. I added a console.log to the radius method and called it once in my script. For some reason though radius change function ran twice. The first run my input is the same but the second one, the variable blur becomes undefined, which gives it a value of 15.

Gradient thresholds

How does the intensity values in the data tie to the thresholds in the gradient. if I use 1st quartile , median, 3rd quartile, and max value as my thresholds/color stops, the heat map does not render accordingly so I would like to know how to interpret the thresholds.

Thanks.

Big radius will cause drawing problems

Hi,

I guess this must be known but I am not sure what to do to fix this. When you increase the radius to 200 for example, you'll get drawing problems where quarter circles are added above each heatmap point.
I've noticed that increasing the shadowOffsetX and Y and the values in the arc function below would alleviate the problem with bigger radiuses. Does this affect performance? If not, we could just choose a much higher value and if it does, we could make it proportional to the radius so that it only increases if really needed.

Legend

Is there a way to add a legend for the color scale of the heatmap? Im using leaf.heat which is based on this.

bower: no master branch.

Can't use this repo via bower, because of missing master branch.

Add Flow Types

Flow is a popular type checker for JavaScript.

It would be really helpful if the maintainers for this library could add Flow typing to it, so it could be consumed in projects that use Flow typing.

Thank you!

Hovering with mouse do not correspond with the heatmap drawing location on Firefox

Using Firefox 26.0 and hovering, I see the heatmap drawing on the right side of my mouse real position. It works fine on Chrome.
FYI, my OS is Windows 7.

Change Value

How can we change the min and max value of x and y coz my data are [[5,-8,280],[-7,-7,499],[4,-7,1283],[5,-7,14440],[6,-7,453],[7,-7,1286],[8,-7,4612],[-7,-6,7665],[-6,-6,9944]] which doesn't give me result as is wanted

Is it possible to select adjacent same color points

1. Draw the map using data
2. Color values are changing between 0 and 1
3. Pick a point on the map where there is not a sample
4. Select the samples in the area where the color value is +-0.05 different than the selected point and adjacent
   Can we select them ?

minOpacity is actually minValue

See attached screenshot, of simpleheat demo, with minOpacity set to 1

heat.resize() not working

The canvas element when you do heat.resize() works, but the heatmap points still with the same coordinates as origin, and do not update. Any ideas?

In detail:
In origin, canvas size is 300x150, but then when dinamically image is loaded, I resize heatmap to 700x700, the canvas is successfully updated but the heatmap points are drawed in a 300x150 canvas.

draw() interferes with other previously applied canvas colours

In my case, I added a 30% opacity coloured area for the heatmap to sit within. When calling draw with the appropriate gradient it adjusts the colours of the area (stoke and fill). I've been looking through the source trying to figure out where this could originate from but I am unable.

Any ideas?

simpleheat.js:87 Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The provided value (5) is outside the range (0.0, 1.0).

A DOM Exception is raised while rendering the page . Tried to go through the simpleheat.js file, but don't know where to change the range.

Need the defaultGradient to be
defaultGradient: {
5.0: 'blue',
10.0: 'cyan',
15.0: 'lime',
20.0: 'yellow',
25.0: 'red'
},

Any help is appreciated . Thanks in advance.

Usage of %

Hey how can I position heatmap data points in %?

Kernel Density Estimation

A more formal method for doing heatmaps, probably more performance-intensive than what this has right now, but possibly more readable/informative?

http://en.wikipedia.org/wiki/Kernel_density_estimation

heatmap intensity not reflecting correctly?

Say I have a list of 5 locations with coordinates, and each location has a number I want to show on a heatmap, so I can visualize which loation has most 'hits'. For example

Location 1: x,y,80

Location 2: x,y,1

Location 3: x,y,20

Location 4: x,y,40

Location 5: x,y,30

I’m creating the heatmap by adding the location to the heatmap with the intensity set to the number of times the count is, so

heatmapLocations = []
for location in locations
                heatmapLocations.append((x,y,count))
heatmap = Heatmap(locations=heatmapLocations)

My heatmap is showing, and it shows the highest count as a red circle, so that’s correct, also location 3 with count 20 is shown as light yellow, which is also correct, but location 4 and 5 are shown the same as location 1, especially when I zoom in, as if they have the same density, although there value is half of location 1. How can I reflect this? I tried the different heatmap parameters as max_zoom, max, radius, etc, but can’t seem to get it right. I also tried to normalise my data by dividing the numbers by 100, so the values are 0.8, 0.2, etc. but with no effect. I think I'm missing something understanding the way the heatmap works.

Legend

Any plans to add a legend?

Inverse Distance Weighting

See #2, basically the same jam http://en.wikipedia.org/wiki/Inverse_distance_weighting /cc @darrell

Unnecessary files in npm package

The 0.4.0 version of the package contains some unnecessary files which makes simpleheat as a dependency larger than it needs to be. For example, the demo directory (14kb) and yarn.lock file (27kb) are unnecessary in the released version.

You could easily exclude these by adding an .npmignore file into the root before packaging:

.npmignore
demo/
yarn.lock

Help to better understand how to show the heatmap

Hi all, i'm trying to use the library to show data from a matrix PIR temperature sensor that give me a 8x8 temperature matrix.

I've done a simple page to show the values and added a custom gradient in order to show a legend too; the result is this one:

This is the gradient:

var myGradientHeat = {
	0.0:	'black',
	0.2: 'blue',
	0.4: 'cyan',
	0.6: 'lime',
	0.8: 'yellow',
	1.0: 'red'
};

Fake data has been used to show series from min to max and check the gradient.
Heatmap is drawn settuing Maxvalue as max value in the series and minOpacity at 5%

The matter is that i suppose to see the entire gradient, to be clear: i aspect to see black points where the point's value is min (0 for this series) and red point at max.

I see that points that have values from half to max have color that more or less follow the gradient (legend) but moving towards min value the point's color differ from gradient and they become transparent.

Question: is this an expected behavior or not ? Is there a method to achieve my goal to show all the point following the gradient?

Thank you very much for the help.

Could you publish a new version on NPM

Hi, @mourner

Could you publish a new version on NPM as it adds supports for rendering in node.

Thank you very much.

:)

minOpacity || 0.05

I had a problem with this line:

ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity || 0.05);

In my app, I had clusters of elements with zero values, but the heatmap "insisted" that was something there. So I checked the source code and notice that the "|| 0.05" can lead to artifacts in the visualization, so I simply removed that and everything looks real now.

I don't know what you had in mind when you set that threshold, but I think it would be better to rely only on the minOpacity parameter.

question

hi,i m evauluating to use in future your tiny library. It seams very fast :) i have a doubt ....
how can put a overlay image under the heatmap?

when the width or height are 0 triggers a throw

When I am using this (inside leaflet.heat) I am getting an error thrown as due to the lifecycle of objects, but initial canvas is created with size 0,0 so throwing an error with the getImageData functions.
Is it possible to put guards around these to do something without a throw if the width or height are 0.

Contours?

Hi there, is there a simple way to include contours?