-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (98 loc) · 3.54 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div#main {
margin: 0 auto;
padding-top: 30px;
}
</style>
</head>
<body>
<!-- preparing a DOM with width and height for ECharts -->
<div id="main" style="width:800px; height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script lang="babel" type="text/babel">
const log = console.log;
const myChart = echarts.init(document.getElementById('main'));
d3.csv("population-estimates-ab-quartely-1951-to-current.csv")
.then(function(populationEstms) {
//Convert all strings to intergers
const keys = populationEstms["columns"];
populationEstms.forEach(d => {
keys.forEach(p => {
if(d[p] !== "") d[p] = parseInt(d[p]);
});
});
//Added these to extend years range
//Not ideal but works for now
populationEstms.unshift({
"Year": populationEstms[0]["Year"] - 1,
"January 1": "",
"April 1": "",
"July 1": "",
"October 1": ""
});
populationEstms.push({
"Year": populationEstms[populationEstms.length -1]["Year"] + 1,
"January 1": "",
"April 1": "",
"July 1": "",
"October 1": ""
});
const option = {
title: {
left: "center",
text: "October Quater, Alberta Total Population Estimates: 1951 - 2017"
},
tooltip: {
trigger: "none",
axisPointer: {
type: "cross"
}
},
xAxis: [
{
data: populationEstms.map(d => d["Year"]),
axisLabel: {
interval: 9,
showMaxLabel: true,
showMinLabel: true
},
axisPointer: {
label: {
formatter: params => `${params.value} : ${params.seriesData[0].data.toLocaleString()}`,
margin: -45
}
},
boundaryGap: false,
name: "Year"
}
],
yAxis: {
name: "Population Estimate",
axisPointer: {
show: false
}
},
series: [
{
data: populationEstms.map(d => d["October 1"]),
type: "line",
smooth: true,
name: "October 1"
}
]
};
//set options and render chart
myChart.setOption(option);
});
</script>
</body>
</html>