-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
333 lines (275 loc) · 14.8 KB
/
index.html
File metadata and controls
333 lines (275 loc) · 14.8 KB
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fonts/icomoon.css">
<script src="javascript/bootstrap.bundle.min.js"></script>
<!--import the css file for the bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--import the javascript library for echarts -->
<script src="javascript/echarts.min.js"></script>
<!-- import the javascript library for monitoring the width of the web page-->
<script src="javascript/flexible.js"></script>
<!--import the jQuery javascript library-->
<script src="javascript/jquery-3.7.1.min.js"></script>
<!--javascript libraries for using d3 charts-->
<script charset="utf-8" src="https://d3js.org/d3.v4.min.js"></script>
<script charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>
<style>
/*css for the nav bar to make the font bold*/
.nav-link {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
font-weight: bold;
font-size:0.3rem;
}
.navbar {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.heading {
font-size: 0.4rem;
}
.text {
font-size: 0.3rem;
}
/*layout for the chart content and make it stay in the center*/
#myTabContent {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.btn-sm {
padding: 0.2rem 0.4rem;
font-size: 0.3rem;
margin-right:0;
}
/* Style for the tooltip */
.tooltip-inner {
writing-mode: horizontal-tb;
transform: none;
font-size: 0.3rem;
}
/*change the arrow color */
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: var(--bs-info);
}
/*smaller dropdown font size */
.dropdown-menu .dropdown-item {
font-size: 0.3rem;
}
.dropdown-menu {
min-width: .5rem;
}
/* Style for smaller padding in dropdown items */
.dropdown-menu .dropdown-item {
padding: 0.25rem 1rem;
}
/*color for the icons design*/
.icon-plane{
color:palevioletred;
}
.icon-bus{
color:black;
}
.icon-cup1{
color:orange;
}
.icon-cup2{
color:red;
}
.icon-cup3{
color:blue;
}
.icon-train{
color:green;
}
.icon-clock{
color:purple;
}
/*
#chartContainer { margin: auto; margin-top: 0.5rem; justify-content:left;align-items:left;margin:auto;width:100%};
#chartContainer p {margin-left: 20px; margin-bottom: 5px; margin-top: 0; padding: 0;} */
</style>
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--tab for the interactive map-->
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Interactive Population Map</button>
</li>
<!--tab for the dropdown menu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Animated Population Growth Line Race</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-bs-toggle="tab" href="#fourregion"><span class="icon-bus"></span> Four Main Regions</a></li>
<li><a class="dropdown-item" data-bs-toggle="tab" href="#southregion"><span class="icon-cup1"></span> Southern Regions</a></li>
<li><a class="dropdown-item" data-bs-toggle="tab" href="#westregion"><span class="icon-cup2"></span> Western Regions</a></li>
<li><a class="dropdown-item" data-bs-toggle="tab" href="#midwestregion"><span class="icon-cup3"></span> Midwest Regions</a></li>
<li><a class="dropdown-item" data-bs-toggle="tab" href="#northeastregion"><span class="icon-train"></span> Northeast Regions</a></li>
</ul>
</li>
<!--tab for the D3 line chart-->
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Interactive State Population Growth</button>
</li>
</ul>
<!-- Design for the US population interactive map -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<h3 class="heading"><span class="icon-plane"></span>USA Population Interactive Map 2020</h3><p class="text">This map utilizes a color gradient to represent the population levels of each U.S. state, using different shades to indicate varying population sizes based on the 2020 Census data. States with darker colors denote higher populations, while those with lighter colors represent lower populations.
he map features an information box that appears when a user hovers over or clicks on a state, displaying the state's name and its corresponding population figure from the 2020 Census.
Additionally, there is a legend on the right side of the map that correlates the color shades with population figures, clearly indicating the scale from low to high.
The map also offers a zoom functionality for a closer examination of specific areas.</p>
<!-- Container for US population interactive map an example modified from E-chart https://echarts.apache.org/examples/en/editor.html?c=map-usa-->
<div id="usmap" style="width:100%;height:7.5rem;"></div>
</div>
<!--Design for the population growth race chart all the four charts are based on the echarts example from https://echarts.apache.org/examples/en/editor.html?c=line-race-->
<!--Line Chart for the Four Regions Part-->
<div class="tab-pane fade" id="fourregion" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="row">
<div class="col-auto">
</div>
<div class="col">
<h3 class="heading"><span class="icon-bus"></span> USA Population Line Race Chart in Four Main Regions</h3>
</div>
</div>
<p class="text">This animated line chart illustrates the population growth trends across four major regions of the USA: the Northeast, South, Midwest, and West, from 1910 to 2020.
By hovering your mouse over the chart, you can see the exact population figures for each region in any given year.
Additionally, there is a play button on the right side of the chart that allows you to play the animation at any time.
The dropdown menu also offers options to view population growth animations for different areas.
</p>
<!-- Container for population line race -->
<div id="growth" style="width: 15rem; height: 8rem;"></div>
<div style="float:right"> <button type="button" id='replay' class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Click the button to play the animation.">
Play Animation
</button></div>
</div>
<!--Line Chart for Southern Regions Part-->
<div class="tab-pane fade" id="southregion" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="row">
<div class="col-auto">
</div>
<div class="col">
<h3 class="heading"><span class="icon-cup1"></span> USA Population Line Race Chart in South Regions</h3>
</div>
</div>
<p class="text">This animated line chart illustrates the population growth trends across south regions of the USA from 1910 to 2020.
By hovering your mouse over the chart, you can see the exact population figures for each region in any given year.
Additionally, there is a play button on the right side of the chart that allows you to play the animation at any time.
The dropdown menu also offers options to view population growth animations for different areas.
</p>
<!-- Container for population line race in southern regions -->
<div id="southgrowth" style="width: 15rem; height: 8rem;"></div>
<div style="float:right"> <button type="button" id='replaysouth' class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Click the button to play the animation.">
Play Animation
</button></div>
</div>
<!--Line Chart for Western Regions Part-->
<div class="tab-pane fade" id="westregion" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="row">
<div class="col-auto">
</div>
<div class="col">
<h3 class="heading"><span class="icon-cup2"></span> USA Population Line Race Chart in Western Regions</h3>
</div>
</div>
<p class="text">This animated line chart illustrates the population growth trends across west regions of the USA from 1910 to 2020.
By hovering your mouse over the chart, you can see the exact population figures for each region in any given year.
Additionally, there is a play button on the right side of the chart that allows you to play the animation at any time.
The dropdown menu also offers options to view population growth animations for different areas.
</p>
<!-- Container for population line race in westhern regions -->
<div id="westgrowth" style="width: 15rem; height: 8rem;"></div>
<div style="float:right"> <button type="button" id='replaywest' class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Click the button to play the animation.">
Play Animation
</button></div>
</div>
<!--Line Chart for Midwest Regions Part-->
<div class="tab-pane fade" id="midwestregion" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="row">
<div class="col-auto">
</div>
<div class="col">
<h3 class="heading"><span class="icon-cup3"></span> USA Population Line Race Chart in Midwest Regions</h3>
</div>
</div>
<p class="text">This animated line chart illustrates the population growth trends across midest regions of the USA from 1910 to 2020.
By hovering your mouse over the chart, you can see the exact population figures for each region in any given year.
Additionally, there is a play button on the right side of the chart that allows you to play the animation at any time.
The dropdown menu also offers options to view population growth animations for different areas.
</p>
<!-- Container for population line race in midwesthern regions -->
<div id="midwestgrowth" style="width: 15rem; height: 8rem;"></div>
<div style="float:right"> <button type="button" id='replaymidwest' class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Click the button to play the animation.">
Play Animation
</button></div>
</div>
<!--Line Chart for Northeast Regions Part-->
<div class="tab-pane fade" id="northeastregion" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="row">
<div class="col-auto">
</div>
<div class="col">
<h3 class="heading"><span class="icon-train"></span> USA Population Line Race Chart in Northeast Regions</h3>
</div>
</div>
<p class="text">This animated line chart illustrates the population growth trends across northeast regions of the USA from 1910 to 2020.
By hovering your mouse over the chart, you can see the exact population figures for each region in any given year.
Additionally, there is a play button on the right side of the chart that allows you to play the animation at any time.
The dropdown menu also offers options to view population growth animations for different areas.
</p>
<!-- Container for population line race in midwesthern regions -->
<div id="northeastgrowth" style="width: 15rem; height: 8rem;"></div>
<div style="float:right"> <button type="button" id='replaynortheast' class="btn btn-secondary btn-sm"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Click the button to play the animation.">
Play Animation
</button></div>
</div>
<!-- Design for the D3 line chart -->
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
<h3 class="heading"><span class="icon-clock"></span> USA D3 Interactive Line Chart</h3>
<p class="text">This interactive D3 line chart allows you to select any state and view its population growth from 1910 to 2020.
By hovering your mouse over the chart, you can see the precise population figures for each year.
Additionally, the chart includes options to view data for the four main regions as well as for the entire United States.
</p>
<!--container for the interactive d3 line chart which is based on the example from week4-->
<div id="chartContainer">
<p><select id="StateMenu"><option>Select State:</option></select></p>
<svg id="chart"></svg> <!-- Added an SVG element where the chart will be drawn -->
</div>
</div>
</div>
<!-- import the javascript file for the echarts line race for population growth in four main regions -->
<script src="javascript/line.js"></script>
<!-- import the javascript file for the usmap -->
<script src="javascript/usmap.js"></script>
<!--import the javascript file for the d3 line chart-->
<script src="javascript/d3linechart.js"></script>
<!--import the javascript file for echarts line race for south region population-->
<script src="javascript/southregion.js"></script>
<!--import the javascript file for echarts line race for west region population-->
<script src="javascript/westregion.js"></script>
<!--import the javascript file for echarts line race for midwest region population-->
<script src="javascript/midwestregion.js"></script>
<!--import the javascript file for echarts line race for northeast region population-->
<script src="javascript/northeastregion.js"></script>
<script>
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>