-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
128 lines (108 loc) · 8.25 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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable = yes">
<title>Olympic Feathers</title>
<meta name="author" content="Nadieh Bremer - Visual Cinnamon">
<meta name="title" content="Olympic Feathers">
<meta name="description" content="Visualizing all ±5000 gold medallists since the first Olympic Games in 1896">
<meta name="keywords" content="data, visualization, visualisation, data visualization, data visualisation, information, information visualization, information visualisation, dataviz, datavis, infoviz, infovis, collaboration, data art">
<meta name="theme-color" content="#17a554">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="img/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png" />
<!-- Social media -->
<meta property="og:title" content="Olympic Feathers">
<meta property="og:site_name" content="Visual Cinnamon">
<meta property="og:url" content="https://olympicfeathers.visualcinnamon.com">
<meta property="og:description" content="Visualizing all ±5000 gold medallists since the first Olympic Games in 1896">
<meta property="og:type" content="article">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://olympicfeathers.visualcinnamon.com/img/olympicfeathers_feature.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="800">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@NadiehBremer">
<meta name="twitter:creator" content="@NadiehBremer">
<meta name="twitter:title" content="Olympic Feathers">
<meta name="twitter:description" content="Visualizing all ±5000 gold medallists since the first Olympic Games in 1896">
<meta name="twitter:image:src" content="https://olympicfeathers.visualcinnamon.com/img/olympicfeathers_feature.png">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500" rel="stylesheet">
<!-- Styling -->
<link href="css/style.css" rel="stylesheet">
<!-- JS -->
<script src="plugins/d3.min.js"></script>
<!-- Custom Scripts -->
<script src="js/createOtherSportsChart.js"></script>
<script src="js/createAnnotations.js"></script>
<script src="js/createFeatherLegend.js"></script>
<script src="js/createColorLegend.js"></script>
</head>
<body>
<div id="olympic-wrapper">
<div class="olympic-section-wrapper head-title-wrapper">
<h1 id="olympic-top-title">All Olympic Gold Medal Winners</h1>
<h3 id="olympic-top-subtitle">summer editions since 1896</h3>
</div>
<div class="olympic-section-wrapper">
<div id="olympic-introduction">
<p class="bold-start">More than 5000 Olympic events have had a winner, rewarded with a gold medal from 1904 onwards, in the Summer Olympics since the first games of 1896. Investigate the visuals below to see how each of these medals has been won in the 56 different sporting disciplines that have competed at the games, of which 41 are still held at Rio 2016.</p>
<p>Most of the Olympic sports started out being a men only event. Thankfully this started to change during the 2nd half of the last century. Even the number of medals that can be won for one discipline is slowly becoming the same for both genders. Today at Rio there are 3 disciplines left in which only one gender can compete; the Greco-Roman wrestling, already at the games since the very first edition, is done solely by men. Rhythmic gymnastics & synchronized swimming on the other hand, both at the Olympics since 1984, are only performed by women.</p>
<p>Although Rio could have been celebrating the 31st Olympic Games, 3 editions have been canceled, due to WW I in 1916 and WW II in 1940 & 1944. And yes, Tug of war has truly been part of 5 Olympic Games, from 1900 to 1920. Hover over the medals to see the winning athlete or team or hover over the time-line in the bottom of each circle to find your own interesting stories.</p>
<p class="visual-note">Instead of a medal being represented by a specific width, in these visuals 1 medal always has the same arc length. This makes sure that the more recent the edition of the games, the more emphasis it gets due to the increasing size of the ring.</p>
</div>
</div>
<!-- THE chart -->
<div id="olympic-chart"></div>
<!-- legend -->
<div class="olympic-section-wrapper head-title-wrapper">
<h1 id="olympic-legend-title">How to read a feather</h1>
</div>
<div class="olympic-section-wrapper">
<div id="olympic-feather-legend">
<p class="bold-start">Each circle represents a grouping of several different (but approximately) similar themed sports, such as water or ball sports. Within a circle we find slices. Let's call each slice a feather to make it easier to distinguish as a whole. Each feather represents one discipline.</p>
<p>A feather is split up into 31 sections, radiating outward. Starting from the first Olympic Games in 1896 at the center to the current Olympic Games in Rio in 2016 at the other end. Each discipline is twice as wide as the maximum number of medals that could ever be won during one edition for a gender (men and women get the same width).</p>
<p>The next split is by gender. For the example feather to the right, the small bars going upward on the light red background are gold medals won by women. The bars going towards the bottom, with the light blue background are gold medals won by men.</p>
<p>All the medals have the same arc length and you can see in the bottom (men) section of the example feather to the right how wide 1 medal is for each edition of the Olympics. For medals won by a men & woman team or two gold medals in the same event each person gets 0.5 medal assigned. The medal bars are colored according to the continent in which the country of the winning athlete or team lies. Furthermore, for each edition and gender, the bars are stacked from the continent that won the most medals to the least.</p>
<p>Finally, some sport disciplines have Olympic records, such as athletics and swimming. As an extra level of detail, the events in which the gold medalist reached a currently standing Olympic record (after Rio 2016) are marked with a white dot. You can see the record when you hover over the medal.</p>
<p></p>
</div>
</div>
<div id="olympic-legend-visual-wrapper">
<div id="olympic-chart-legend"></div>
<div id="olympic-color-legend"></div>
</div>
<!-- Credits & Data -->
<div id="credits">
<div class="credit-bold">Design concept with pen & (digital) paper, data wrangling in R, & coding with d3.js by <a href="https://twitter.com/NadiehBremer">Nadieh Bremer</a> <span class="credit-divider">|</span> <a href="https://www.visualcinnamon.com/">VisualCinnamon.com</a></div>
<div class="credit-note">With valuable design advice from Jeroen de Lange <span class="credit-divider">|</span> Read all about the data preparation and creation of the visualization <a href="https://www.datasketch.es/project/olympic-feathers">here</a></div>
</div>
</div>
<!-- Tooltip -->
<div id="tooltip">
<div id="tooltip-container">
<div class="tooltip-event"></div>
<div class="tooltip-rule"></div>
<div class="tooltip-discipline"></div>
<div id="tooltip-athlete"></div>
<div id="tooltip-record"></div>
<div id="tooltip-country"></div>
<div id="tooltip-edition"></div>
</div>
</div>
<!-- Tooltip - Edition -->
<div id="tooltip-edition-wrapper">
<div id="tooltip-edition-container">
<div id="tooltip-edition-edition"></div>
<div id="tooltip-edition-city"></div>
<div id="tooltip-edition-continent"></div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>