-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (102 loc) · 3.48 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html = lang="">
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<center><h1>How has COVID impacted USA</h1></center>
<center>
<script>
let svg = d3.select("body").append("svg")
.attr("width", 1200)
.attr("height", 600);
//store the width and height for later
let width = +svg.attr("width");
let height = +svg.attr("height");
//render the data
function render(data) {
let xVal = d => d.date; //gets the date for a value d
let yVal = d => d.deaths; //gets the cases amount for a value d
//set the margins
let margin = {
top: 100,
right: 150,
bottom: 100,
left: 325
};
//these set the width and height of the inner chart
let innerWidth = width - margin.left - margin.right;
let innerHeight = height - margin.top - margin.bottom;
/*
SET UP SCALES
*/
let scaleX = d3.scaleTime() //sets up how dates will scale
.domain([d3.min(data, xVal), d3.max(data, xVal)]).nice() //the data space, but nice() rounds it cleanly
.range([0, innerWidth]); //the pixel space
let xAxis = d3.axisBottom(scaleX) //the bottom axis is connected to the scaleX now
.tickSize(-innerHeight)
.tickPadding(20)
.ticks(12)
.tickFormat(d3.timeFormat("%b"));
let scaleY = d3.scaleLinear() //sets up how cases, y axis values will scale
.domain([0, d3.max(data, yVal)]).nice()
.range([innerHeight, 0])
let yAxis = d3.axisLeft(scaleY) //left axis is connected to the scaleY now
.tickPadding(20)
.tickSize(-innerWidth);
let g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`); //moves the chart out into clear space
let yG = g.append("g") //adds a grouping for the cases, y axis
.call(yAxis)
.attr("font-size", 16); //size of number of cases labels
yG.append("text") //add the y axis label
.attr("font-size", 22)
.attr("fill", "black")
.text("New Deaths")
.attr("y", innerHeight / 2)
.attr("x", -90);
let xG = g.append("g") //adds another axis grouping for the x axis, sets up labels and ticks
.call(xAxis)
.attr("transform", `translate(0, ${innerHeight})`) //moves the dates to bottom
.attr("font-size", 16);
xG.append("text") //add the label below x axis
.attr("font-size", 22)
.attr("fill", "black")
.text("Month")
.attr("y", 70)
.attr("x", innerWidth / 2);
g.append("text") //adds another grouping for the name of the line chart
.attr("font-family", "sans-serif")
.text(desiredCode + " COVID-19 Deaths - 2022")
.attr("font-size", 26)
.attr("y", -20)
.attr("x", innerWidth / 4);
/*
DRAW THE LINE
*/
let line = d3.line() //defines the x and y of the line
.x(d => scaleX(xVal(d)))
.y(d => scaleY(yVal(d)));
g.append("path") //add the line or path
.datum(data)
.attr("fill", "none")
.attr("stroke", "#ADD8E6")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round") //smooths line a bit
.attr("stroke-linecap", "round") //smooths line a bit
.attr("d", line); //call line to draw line
}
let desiredCode = "USA";
d3.csv("new_countries.csv", function(d) { //for each entry
if (d["Location.Code"] == desiredCode && +d["Date.Year"] == 2022 && +d["Date.Month"] <= 7) {
return { //parse date from multiple entries
date: d3.timeParse("%Y-%m-%d")(d["Date.Year"] + "-" + d["Date.Month"] + "-" + d["Date.Day"]),
deaths: +d["Data.Deaths"]
};
}
}).then(function(data) {
render(data); //then render the data as it has been fully processed
});
</script>
</center>
</body>
<center><a href="slide-2-new.html">Next slide - Lets take a deeper view with a state-by-state breakdown.</a></center>
</html>