-
Notifications
You must be signed in to change notification settings - Fork 0
/
HeatMap2.html
102 lines (86 loc) · 3.65 KB
/
HeatMap2.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
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
#my_dataviz{
background-color: whitesmoke;
}
}
</style>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body class="body">
<H1> Heat Map for Age of Female Athletes </H1>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 100, left: 150},
width = 700 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom,
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]
buckets = colors.length
const legendElementWidth = width;
// append the svg object to the body of the page
var svg = d3.select("#my_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 + ")");
// ["1900", "1904", "1906", "1908", "1912", "1920", "1924", "1928", "1932", "1936", "1948", "1952","1956",
// "1960","1964","1968","1972","1976","1980","1984","1988","1992","1994","1996","1998","2000",
// "2002","2004","2006","2008","2010","2012","2014","2016"]
// Labels of row and columns
var myYear = ["2016", "2014", "2012", "2010", "2008", "2006", "2004", "2002", "2000", "1998", "1996", "1994", "1992", "1988",
"1984", "1980", "1976", "1972", "1968", "1964", "1960", "1956", "1952", "1948", "1936", "1932", "1928", "1924", "1920",
"1912", "1908", "1906", "1904", "1900"]
var myEvent = ["Wrestling", "Weightlifting", "Water Polo", "Volleyball", "Triathlon", "Trampolining", "Tennis", "Taekwondo", "Table Tennis",
"Synchronized Swimming", "Swimming", "Speed Skating", "Softball", "Snowboarding", "Ski Jumping", "Skeleton",
"Short Track Speed Skating", "Shooting", "Sailing", "Rugby Sevens", "Rowing", "Rhythmic Gymnastics", "Motorboating",
"Modern Pentathlon", "Luge", "Judo", "Ice Hockey", "Hockey", "Handball", "Gymnastics", "Golf", "Freestyle Skiing", "Football",
"Figure Skating", "Fencing", "Equestrianism", "Diving", "Cycling", "Curling", "Cross Country Skiing", "Croquet", "Canoeing", "Boxing",
"Bobsleigh", "Biathlon", "Beach Volleyball", "Basketball", "Badminton", "Athletics", "Art Competitions", "Archery", "Alpinism",
"Alpine Skiing"]
// Build X scales and axis:
var x = d3.scaleBand()
.range([ 0, width ])
.domain(myYear)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
// Build X scales and axis:
var y = d3.scaleBand()
.range([ height, 0 ])
.domain(myEvent)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
var myColor = d3.scaleQuantile( )
.domain([16, buckets - 1, 52])
.range(colors)
//Read the data
d3.csv("https://raw.githubusercontent.com/OmkarChekuri/D3/master/NewFemaleData.csv", function(data) {
svg.selectAll()
.data(data, function(d) {return d.year+':'+d.event;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.year) })
.attr("y", function(d) { return y(d.event) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
.append("title")
.text((d) => "Age: "+ d.value+ "\nYear: "+ d.year + "\nEvent: "+ d.event)
})
</script>
</body>