-
Notifications
You must be signed in to change notification settings - Fork 0
/
grad.html
170 lines (147 loc) · 5.5 KB
/
grad.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
<title>UIUC Enrollment Narrative</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<h2>Graduate Enrollment Since 1870</h2>
<p><mark>Hover over the line</mark> to see how enrollment increased throughout the years for <a href = "http://catalog.illinois.edu/graduate/">graduate programs</a></p>
<div>
<svg id="my_dataviz" height=140 width=800></svg>
</div>
<svg width="500" height="470" id="chart"></svg>
<script>
// select the svg area
var svg = d3.select("#my_dataviz")
// Handmade legend
svg.append("circle").attr("cx",670).attr("cy",125).attr("r", 6).style("fill", "#13294b")
svg.append("text").attr("x", 680).attr("y", 130).text("graduates").style("font-size", "15px").attr("alignment-baseline","right")
// Create dimensions of graph
var margin = {top: 50, right: 150, bottom: 30, left: 55},
width = 550 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Parse year
var parseDate = d3.time.format("%Y", "").parse;
var bisect = d3.bisector(function(d) { return d.year; }).left;
// Set ranges and axes (x and y)
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.grad); });
// Adds the svg canvas
var svg = d3.select("#chart")
.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 + ")");
// Retrieve data from dataset
d3.csv("https://raw.githubusercontent.com/mpara0/uiuc-viz/main/enrollment.csv", function(error, data) {
data.forEach(function(d) {
d.year = parseDate(d.year);
d.grad = +d.grad;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.grad; })]);
// Creates line
svg.append("path")
.style("stroke", "#13294b")
.attr("class", "line")
.attr("d", valueline(data))
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// label X Axis
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.attr("fill", "#13294b")
.text("(Year)");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
//style Y Axis label
svg.append("text")
.attr("class", "axis-title")
.attr("transform", "rotate(-90)")
.attr("y", -45)
.attr("dy", "5em")
.style("text-anchor", "end")
.attr("fill", "#13294b")
.text("(Population in thousands)");
// Create the circle that travels along the curve of chart
var focus = svg.append("g")
.append('circle')
.style("fill", "none")
.attr("stroke", "black")
.attr('r', 8.5)
.style("opacity", 0)
// Create the text that travels along the curve of chart
var focusText = svg
.append('g')
.append('text')
.style("opacity", 0)
.attr("text-anchor", "left")
.attr("alignment-baseline", "middle")
// Create a rect on top of the svg area: this rectangle recovers mouse position
svg
.append('rect')
.style("fill", "none")
.style("pointer-events", "all")
.attr('width', width)
.attr('height', height)
.on('mouseover', mouseover)
.on('mousemove', mousemove)
.on('mouseout', mouseout);
// What happens when the mouse move -> show the annotations at the right positions.
function mouseover() {
focus.style("opacity", 1)
focusText.style("opacity",1)
}
function mousemove() {
// recover coordinate we need
var x0 = x.invert(d3.mouse(this)[0]);
var i = bisect(data, x0, 1);
selectedData = data[i]
focus
.attr("dx", x(selectedData.year))
.attr("dy", y(selectedData.grad))
focusText
.html( "total:" + selectedData.grad)
.attr("x", x(selectedData.year))
.attr("y", y(selectedData.grad))
}
function mouseout() {
focus.style("opacity", 0)
focusText.style("opacity", 0)
}
});
</script>
<div class="pagination">
<a href="#">«</a>
<a href="index.html">1</a>
<a href="ugrad.html">2</a>
<a class="active" href="grad.html">3</a>
<a href="resources.html">4</a>
<a href="#">»</a>
</div>
</body>
</html>