no-heatmap.js 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +19 -0
- package/README.md +55 -0
- package/build/heatmap.js +729 -0
- package/build/heatmap.min.js +9 -0
- package/docs/assets/css/commons.css +41 -0
- package/docs/assets/css/docs.css +136 -0
- package/docs/assets/css/prism.css +126 -0
- package/docs/assets/js/prism.js +7 -0
- package/docs/faq.html +0 -0
- package/docs/getting-started.html +0 -0
- package/docs/how-to-migrate.md +97 -0
- package/docs/index.html +276 -0
- package/examples/angular-heatmap/index.html +64 -0
- package/examples/googlemaps-heatmap/index.html +65 -0
- package/examples/heatmap-legend/index.html +126 -0
- package/examples/leaflet-heatmap/index.html +80 -0
- package/examples/mousemove-heatmap/index.html +64 -0
- package/examples/raindrops/index.html +66 -0
- package/examples/svg-area-heatmap/austria.svg +1540 -0
- package/examples/svg-area-heatmap/index.html +62 -0
- package/examples/unblurred-datapoints/index.html +87 -0
- package/package.json +46 -0
- package/plugins/angular-heatmap/angular-heatmap.js +62 -0
- package/plugins/boilerplate.js +45 -0
- package/plugins/gmaps-heatmap/README.md +7 -0
- package/plugins/gmaps-heatmap/gmaps-heatmap.js +278 -0
- package/plugins/gmaps-heatmap/package.json +23 -0
- package/plugins/leaflet-heatmap/README.md +4 -0
- package/plugins/leaflet-heatmap/leaflet-heatmap.js +246 -0
- package/plugins/leaflet-heatmap/package.json +21 -0
- package/plugins/segment-heatmap.js +71 -0
- package/plugins/svg-area-heatmap.js +195 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Mousemove example (with backgroundColor) | heatmap.js</title>
|
|
6
|
+
<style>
|
|
7
|
+
body, html { margin:0; padding:0; height:100%;}
|
|
8
|
+
body { font-family:sans-serif; }
|
|
9
|
+
body * { font-weight:200;}
|
|
10
|
+
#heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
|
|
11
|
+
#heatmapContainer { width:100%; height:100%;}
|
|
12
|
+
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200; z-index:10000;}
|
|
13
|
+
#all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
|
|
14
|
+
</style>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<div id="heatmapContainerWrapper">
|
|
18
|
+
<div id="heatmapContainer">
|
|
19
|
+
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
</div>
|
|
23
|
+
<h1>heatmap.js Mousemove Example</h1>
|
|
24
|
+
<div id="all-examples-info">
|
|
25
|
+
<strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers & inline documentation.
|
|
26
|
+
</div>
|
|
27
|
+
<script src="/build/heatmap.js"></script>
|
|
28
|
+
<script>
|
|
29
|
+
window.onload = function() {
|
|
30
|
+
// create a heatmap instance
|
|
31
|
+
var heatmap = h337.create({
|
|
32
|
+
container: document.getElementById('heatmapContainer'),
|
|
33
|
+
maxOpacity: .6,
|
|
34
|
+
radius: 50,
|
|
35
|
+
blur: .90,
|
|
36
|
+
// backgroundColor with alpha so you can see through it
|
|
37
|
+
backgroundColor: 'rgba(0, 0, 58, 0.96)'
|
|
38
|
+
});
|
|
39
|
+
var heatmapContainer = document.getElementById('heatmapContainerWrapper');
|
|
40
|
+
|
|
41
|
+
heatmapContainer.onmousemove = heatmapContainer.ontouchmove = function(e) {
|
|
42
|
+
// we need preventDefault for the touchmove
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
var x = e.layerX;
|
|
45
|
+
var y = e.layerY;
|
|
46
|
+
if (e.touches) {
|
|
47
|
+
x = e.touches[0].pageX;
|
|
48
|
+
y = e.touches[0].pageY;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
heatmap.addData({ x: x, y: y, value: 1 });
|
|
52
|
+
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
heatmapContainer.onclick = function(e) {
|
|
56
|
+
var x = e.layerX;
|
|
57
|
+
var y = e.layerY;
|
|
58
|
+
heatmap.addData({ x: x, y: y, value: 1 });
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
};
|
|
62
|
+
</script>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Raindrops example (custom gradient) | heatmap.js</title>
|
|
6
|
+
<style>
|
|
7
|
+
body, html { margin:0; padding:0; height:100%;}
|
|
8
|
+
body { font-family:sans-serif; }
|
|
9
|
+
#heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
|
|
10
|
+
#heatmapContainer { width:100%; height:100%;}
|
|
11
|
+
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
|
|
12
|
+
#all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
|
|
13
|
+
|
|
14
|
+
</style>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<div id="heatmapContainerWrapper">
|
|
18
|
+
<div id="heatmapContainer">
|
|
19
|
+
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<h1>Adding datapoints in real time with heatmap.js</h1>
|
|
23
|
+
<div id="all-examples-info">
|
|
24
|
+
<strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers & inline documentation.
|
|
25
|
+
</div>
|
|
26
|
+
<script src="../../build/heatmap.js"></script>
|
|
27
|
+
<script>
|
|
28
|
+
window.onload = function() {
|
|
29
|
+
// create heatmap instance
|
|
30
|
+
var heatmap = h337.create({
|
|
31
|
+
container: document.getElementById('heatmapContainer'),
|
|
32
|
+
// a waterdrop gradient ;-)
|
|
33
|
+
gradient: { .1: 'rgba(0,0,0,0)', 0.25: "rgba(0,0,90, .6)", .6: "blue", .9: "cyan", .95: 'rgba(255,255,255,.4)'},
|
|
34
|
+
maxOpacity: .6,
|
|
35
|
+
radius: 10,
|
|
36
|
+
blur: .90
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// boundaries for data generation
|
|
40
|
+
var width = (+window.getComputedStyle(document.body).width.replace(/px/,''));
|
|
41
|
+
var height = (+window.getComputedStyle(document.body).height.replace(/px/,''));
|
|
42
|
+
|
|
43
|
+
var generate = function() {
|
|
44
|
+
var max = 100;
|
|
45
|
+
var min = 0;
|
|
46
|
+
var t = [];
|
|
47
|
+
|
|
48
|
+
var x = (Math.random()* width) >> 0;
|
|
49
|
+
var y = (Math.random()* height) >> 0;
|
|
50
|
+
var c = 100;
|
|
51
|
+
var r = (Math.random()* 100) >> 0;
|
|
52
|
+
|
|
53
|
+
// add the datapoint to heatmap instance
|
|
54
|
+
heatmap.addData({ x: x, y:y, value: c, radius: r});
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// this generates new datapoints in a kind of random timing
|
|
58
|
+
setTimeout(function test() {
|
|
59
|
+
var rand = (Math.random() * 500) >> 0;
|
|
60
|
+
generate();
|
|
61
|
+
setTimeout(test, rand);
|
|
62
|
+
}, 100);
|
|
63
|
+
};
|
|
64
|
+
</script>
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|