-
Notifications
You must be signed in to change notification settings - Fork 0
/
heatmap.html
116 lines (105 loc) · 3.58 KB
/
heatmap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 600px; height: 600px;
}
.heatmap {
width:100%; height:100%;
}
</style>
</head>
<body>
<!-- <canvas id="main" width="600" height="600"></canvas> -->
<div class="wrapper">
<div class="heatmap"></div>
</div>
</body>
<script src="javascript/jquery.min.js"></script>
<script src="javascript/heatmap.min.js"></script>
<script>
$(document).ready(function() {
let hmDiv = document.querySelector('.heatmap');
const offset = 10;
// Random dots - replace with indicator data
const dotCount = 100;
const distance = 10;
const expM = 2;
const rad = 5;
const fh = 24;
const spacing = 6;
const lh = fh + spacing;
let vals = [];
for (let i = 0; i < dotCount; i++) {
let a = Math.random() * Math.PI * 2.0;
let d = (Math.pow(Math.E, Math.random() * expM) - 1.0) * distance;
let x = Math.cos(a) * d;
let y = Math.sin(a) * d;
//vals.push({x:300+Math.round(x), y: 300+Math.round(y), value: Math.floor(Math.random() * 10)});
// vals.push({x:300+Math.round(x), y: 300+Math.round(y), value: 1});
vals.push({x:330, y: 300, value: 1});
}
heatmap = h337.create({
container: document.querySelector('.heatmap')
});
heatmap.setData({
max: 10,
data: vals
});
let canvas = heatmap._renderer.canvas;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
ctx.fillStyle = 'black';
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.stroke();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(offset, offset);
ctx.lineTo(width - offset, height - offset);
ctx.moveTo(width - offset, offset);
ctx.lineTo(offset, height - offset);
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'green';
ctx.font = fh + 'px serif';
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillText('Macro', width / 2, offset + lh * 0);
ctx.fillText('(ecological systems)', width / 2, offset + lh * 1);
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText('Meso', offset, height / 2 - lh * 0.5);
ctx.fillText('(empowerment)', offset, height / 2 + lh * 0.5);
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillText('Meso', width - offset, height / 2 - lh * 0.5);
ctx.fillText('(strain)', width - offset, height / 2 + lh * 0.5);
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillText('Micro', width / 2, height - offset - lh * 1 );
ctx.fillText('(behaviour)', width / 2, height - offset - lh * 0);
// ctx.translate(width / 2, height / 2);
/*
ctx.moveTo(0, 0);
ctx.fillStyle = `rgba(255, 0, 0, 1)`;
for (let i = 0; i < vals.length; i++) {
let inst = vals[i];
let x = inst.x;
let y = inst.y;
let v = inst.value;
ctx.moveTo(x, y);
ctx.ellipse(x, y, rad, rad, 0, 0, Math.PI * 2);
ctx.fill();
}
*/
});
</script>
</html>