-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (163 loc) · 10.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3 Visualization</title>
<!-- CSS for Visualization-->
<link rel="stylesheet" href="index.css">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
</head>
<body>
<h1>
<center>Olympic Medals By Year and Country</center>
</h1>
<div class="container-fluid">
<div class="row">
<div class="col-2">
<div class="main-controls">
<div class="color-container">
<p class="preview-text">Color</p>
<!-- preview element -->
<div class="preview"></div>
<p class="preview-text">Date</p>
<!-- Element that will contain dropdown-menu-->
<div id="dropdown-menu"></div>
</div>
<!-- colorpicker element -->
<div class="colorpicker" style="display:none">
<canvas id="picker" var="1" width="300" height="300"></canvas>
<div class="controls">
<div><label>R</label> <input type="text" id="rVal" /></div>
<div><label>G</label> <input type="text" id="gVal" /></div>
<div><label>B</label> <input type="text" id="bVal" /></div>
<div><label>RGB</label> <input type="text" id="rgbVal" /></div>
<div><label>HEX</label> <input type="text" id="hexVal" /></div>
</div>
</div>
<!-- TEST FOR LEGEND -->
<div id="legend"></div>
<!-- current country with most gold medals-->
<div id="gold-medal-country">
<img id="medal-image" src="images/gold-medal.png" alt="gold medal" width="50px" height="50px">
<p id="gold-medal-country-text"> Gold: 0</p>
</div>
<!-- current country with most silver medals-->
<div id="silver-medal-country">
<img id="medal-image" src="images/silver-medal.png" alt="silver medal" width="50px"
height="50px">
<p id="silver-medal-country-text"> Silver: 0</p>
</div>
<!-- current country with most bronze medals-->
<div id="bronze-medal-country">
<img id="medal-image" src="images/bronze-medal.png" alt="bronze medal" width="50px"
height="50px">
<p id="bronze-medal-country-text"> Bronze: 0</p>
</div>
<p class="description">
<strong>D3 World Map</strong></br>
• This is a D3 (v4) based animated Topographic map of the world. </br>
• This solution also allows you to change the color and year to better understand the
data.</br></br>
<strong>Features:</strong></br>
• Change color of map data.</br>
• Changing the date changes the map based on that dates data.</br>
• Hovering over a country pulls up the information for that country.</br>
• Highlight the countries with the most gold, silver, and bronze medals for that
year.</br></br>
<strong>Questions we are answering:</strong></br>
• How many Gold Medals per country?</br>
• How many Silver Medals per country?</br>
• How many Bronze medals per country?</br>
• Which country has the most gold medals?</br>
• Which country has the most silver medals?</br>
• Which country has the most bronze medals?</br>
• Which countries constantly dominate the olympics?</br>
</p>
</div>
</div>
<div class="col-10">
<!-- Element that will contain the window and the map -->
<div id="container"></div>
<!-- Element that will contain hover over tool tip-->
<div id="tooltip-container"></div>
</div>
</div>
<!-- TODO: Put in border and under the map -->
<!-- Write Up-->
<div class="row">
<div class="col">
<h3>Write Up</h3></br>
<u>Rationale:</u></br></br>
<p class="tab">
For this project we started with a dataset that was interesting to our group and answered
questions that we wanted to know through an interactive visualization. The dataset we chose
was one that recorded the number of gold, silver, and bronze medals awarded to every country
from 1896-2014 for the summer and winter Olympics. We chose to use a dynamic world map to
display how many medals each country won depending on the year that the user selected. The
first feature we wanted to implement was a dynamic hover feature that displays only the
award information relevant to the country that your mouse is hovering over. We also wanted
to have the map display a color gradient that allows the user to quickly see which of the
countries performed the best and which countries performed the worst, or didn’t participate.
To help the user understand the color gradient, a legend was implemented to show what darker
and lighter hues of the selected color meant. We also wanted ease of access to countries
that were smaller on the map and more difficult to mouse over, for this we implemented a
zoom feature that allows the user to zoom in and out of the map. We added a color picker to
allow the user to select the color of the map in case other colors were harder to see.
Lastly, we implemented a feature that shows the countries that accumulated the most gold,
silver, and bronze medals respectively.</br></br>
We arrived at these core set of features be asking ourselves what we would want to know
about the information and what tools would be useful to find answers to our questions.</br>
</br>
Alternatively, we considered using a globe to display our information but a flat 2-D drawing
of a map displayed the information more effectively to the user by showing the entire world
at the same time. Having a spinning globe would also mean that the user would have to wait to
select on the country of interest when it was visible on the screen, but with a 2-D world
map the user can instantly find their country of interest and gather the information they
wanted much faster.</br></br>
</p>
<u>Overview of Development Process:</u></br></br>
<p class="tab">
We first had to find an implementation of a dynamic map that implemented a drawing feature
that drew a different map depending on an input. We learned how we could modify our map to
change depending on the year that we selected. From there we had to figure out how to color
the map with a color gradient and display the legend to show what the colors meant. After
that we added the zoom functionality and the description of the visualization. The overall
project took 40+ hours of work. The most time consuming parts of the project included adding
features that interacted with the map because some refactoring was needed for each feature.
</br></br>
<strong>Victor</strong>: Set up the initial project template, implemented the color picker, added boostrap styling
to the final version, added project to be hosted on github pages, and implemented medal rankings.
Also worked on documentation.</br>
<strong>Gabe</strong>: Created the drop-down menu that redrew the map depending on the year the user
selected. Created the legend that changes depending on the selection of the color picker.
Also worked on documentation.</br>
<strong>Mitch</strong>: Implemented zoom in and zoom out functionality, did all the data wrangling and cleaning,
found the topojson file that included country names. Also worked on documentation.</br>
</p>
</div>
</div>
<!-- End of Write Up-->
</div>
<!-- D3 js library for visualizations-->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Library for topojson map processing-->
<script src="https://d3js.org/topojson.v1.min.js"></script>
<!-- Popper, used by bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<!-- Bootstrap js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<!-- Main js code for project-->
<script src="index.js"></script>
</body>
</html>