-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
69 lines (66 loc) · 2.04 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge" /> -->
<title>Example</title>
</head>
<body>
<div id="container"></div>
<script src="../../build/reglmapanimation.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"
integrity="sha256-m0QmIsBXcOMiETRmpT3qg2IQ/i0qazJA2miCHzOmS1Y="
crossorigin="anonymous"
></script>
<script>
d3.csv("../../assets/csv/pop_grid_5km.csv", (d) => {
return {
value: d.value,
y: +d.y,
x: +d.x,
};
}).then((pointData) => {
//make container fill screen
let width = Math.min(window.innerWidth, 1200);
let height = Math.min(window.innerHeight, 900);
let container = document.getElementById("container");
container.style.height = height + "px";
container.style.width = width + "px";
//animation
ReglMapAnimation.animation()
.container(container)
.pointData(pointData)
.width(width)
.height(height)
.colors([
"#ffffcc",
"#ffeda0",
"#fed976",
"#feb24c",
"#fd8d3c",
"#fc4e2a",
"#e31a1c",
"#b10026",
])
.thresholds([0, 1, 250, 750, 1500, 3000, 7500, 25000])
.duration(1000)
.delayAtEnd(2000)
.xAxisTitle("Population (number of inhabitants per 25 km²)")
.yAxisTitle("Area (in km²)")
.binLabels(true)
.binYLabelFunction(function (bin) {
let count = bin.binCount * 25;
let str = count.toLocaleString("en").replace(/,/gi, " ");
return str + " km²";
})
.chartOffsetY(-100)
.legend(true)
.legendTitle("Population per 25 km²")
//.initialAnimation("spiral")
.animate();
});
</script>
</body>
</html>