generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (105 loc) · 5.52 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/d3.v6.1.1/d3.min.js"></script>
<title>SF Marathon Vis</title>
</head>
<body>
<h1>Running the San Francisco Marathon</h1>
<div>
<h2>Motivation</h2>
<p> Our project is aimed at helping new runners prepare for a marathon by providing statistics of past marathon participants.
This will aid in their training by giving them goals to work up to based on their age and gender.
The intended users of this visualization tool will ideally be someone who is looking to run the San Francisco marathon and/or someone
who wants to analyze or predict marathon results based on demographics such as age and sex. The user will be able to
assess how people in their sex and age-group category have performed in the past so they can work towards a desired pace and finishing time.
</p>
</div>
<div>
<h2>Background</h2>
<div class="center">
<h3>Data</h3>
<p>Our data tool visualizes past results of the San Francisco marathon and lets a user input their age-group and sex and be able to
see a distribution of finishing times as well as statistics on average paces for their group. The data was sourced from a github repo of a past marathon participant.
They originally scraped the data from a website that had past race results. There are some ethical considerations with this
data since it has identifying details like name, age, and city. However, since all of this data was available publicly and
it deals with race times, there's nothing too personal. There were some missing values to deal with, so we dropped any rows with missing
values to keep data clean and consistent.
</p>
<a href="https://github.com/deedy/sf-marathon/blob/master/data/full_marathon_2008_2021.csv">Original data source</a>
<h2>Demo Video</h2>
<div class="video-container">
<video width="1000" controls>
<source src="demo/DS4200 DEMO.mp4" type="video/mp4">
<track src="demo/captions.vtt" kind="subtitles" srclang="en" label="English" default>
</video>
</div>
<h2>Report</h2>
<a href="https://northeastern-my.sharepoint.com/:w:/g/personal/simon_al_northeastern_edu/EeZQ9lbSho1BqFBvs5KtZkEBKWBCzf-t14COqasDrrS-6Q">Report</a>
</div>
</div>
<h2>Visualizations</h2>
<div class="inputs">
<h4><u>User Inputs</u></h4>
<div class="flex">
<div class="col">
<label>Sex: </label>
<select id="sex">
<option value = "F"> Female </option>
<option value = "M"> Male </option>
</select>
</div>
<div class="col">
<label>Age Group: </label>
<select id="age">
<option value = "01-19"> 01-19 </option>
<option value = "20-24"> 20-24 </option>
<option value = "25-29"> 25-29 </option>
<option value = "30-34"> 30-34 </option>
<option value = "35-39"> 35-39 </option>
<option value = "40-44"> 40-44 </option>
<option value = "45-49"> 45-49 </option>
<option value = "50-54"> 50-54 </option>
<option value = "55-59"> 55-59 </option>
<option value = "60-64"> 60-64 </option>
<option value = "65-69"> 65-69 </option>
<option value = "70-74"> 70-74 </option>
<option value = "75-79"> 75-79 </option>
</select>
</div>
</div>
<br>
<div class="center">
<button type="button" id="submit">Submit</button>
</div>
</div>
<h3 id="warning" class="center">YOU MUST CHOOSE A CATEGORY TO VISUALIZE THE DATA (PRESS SUBMIT)</h3>
<div class="flex">
<div class="col">
<h3>Box Plot of Average Pace (mins) For a Selected Sex-Age Category</h3>
<br>
<div id="vis1"></div>
</div>
<div class="col">
<h3>Histogram of All Finishing Times (mins)</h3>
<br>
<div id="vis2"></div>
</div>
</div>
<div>
<h2>Acknowledgements</h2>
<ul>
<li><a href="https://d3-graph-gallery.com/boxplot">https://d3-graph-gallery.com/boxplot</a></li>
<li><a href="https://d3js.org/">https://d3js.org/</a></li>
<li><a href="https://d3-graph-gallery.com/graph/boxplot_horizontal.html">https://d3-graph-gallery.com/graph/boxplot_horizontal.html</a></li>
<li><a href="https://d3-graph-gallery.com/graph/histogram_basic.html">https://d3-graph-gallery.com/graph/histogram_basic.html</a></li>
<li><a href="https://d3-graph-gallery.com/graph/interactivity_tooltip.html">https://d3-graph-gallery.com/graph/interactivity_tooltip.html</a></li>
<li><a href="https://www.geeksforgeeks.org/d3-js-transform-translate-function/">https://www.geeksforgeeks.org/d3-js-transform-translate-function/</a></li>
<li><a href="https://www.w3schools.com/css/css_important.asp">https://www.w3schools.com/css/css_important.asp</a></li>
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>