-
Notifications
You must be signed in to change notification settings - Fork 0
/
heatmap.html
98 lines (86 loc) · 3.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Visualization</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="dataviz"></div>
<script>
var margin = {top: 30, right: 10, bottom: 40, left: 90},
width = 500 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var svg = d3.select("#dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
d3.json("/exercise2-olympics.json").then(function(data) {
var countries = {};
for (var i = 0; i < data.length; i++) {
var c = data[i]['Country'] + '-' + data[i]['Sport'];
if(countries[c]) {
var count = countries[c];
countries[c] = (countries[c] + 1);
}
else {
countries[c] = 1;
}
}
var data = [];
var countrySet = new Set();
var sportSet = new Set();
for(c in countries) {
var country = c.split("-")[0];
var sport = c.split("-")[1];
var count = countries[c];
countrySet.add(country);
sportSet.add(sport);
}
countrySet = Array.from(countrySet);
sportSet = Array.from(sportSet);
for(c in countrySet) {
for(s in sportSet) {
if(countries[countrySet[c] + '-' + sportSet[s]]) {
data.push({"country": countrySet[c], "sport": sportSet[s], "count": countries[countrySet[c] + '-' + sportSet[s]]});
}
else {
data.push({"country": countrySet[c], "sport": sportSet[s], "count":0});
}
}
}
var x = d3.scaleBand()
.range([ 0, width ])
.domain(sportSet)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height+ ")")
.call(d3.axisBottom(x))
.attr("y", 50);
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(countrySet)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
var myColor = d3.scaleLinear()
.range(["#AAD4CA", "#69b3a2"])
.domain([1,100]);
svg.selectAll()
.data(data, function(d) {return d.sport+':'+d.country;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.sport) })
.attr("y", function(d) { return y(d.country) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.count)} )
svg.append("text").attr("x", 100).attr("y", -10)
.text("Sports played by each country")
.style("font-size", "15px").attr("alignment-baseline","left")
});
</script>
</body>
</html>