-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
867 lines (848 loc) · 67.2 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
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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Become an Olympian</title>
<!-- Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Become an Olympian</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#country">Country</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#physique">Physique</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#age">Age</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#inspiration">Inspiration</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Become an Olympian</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5"></h2>
<a class="btn btn-primary js-scroll-trigger" href="#about">Learn How</a>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">So you want to be an Olympian?</h2>
<p class="text-white-50">
Being an Olympian is one of the coolest and hardest accomplishments out there.
In this project, we explore some of the factors you can possibly change to maximize your chances of being an Olympian.
Scroll & Click the buttons to navigate through the project.
</p>
<a class="btn btn-primary js-scroll-trigger" id="btn-nav4" href="#country"><i class="fa fa-arrow-down"></i></a>
</div>
</div>
<img class="img-fluid" src="assets/img/medals%20.png" alt="" />
</div>
</section>
<!-- Country -->
<section class="projects-section bg-light" id="country" style="padding-top: 40px">
<div class="container">
<!-- Featured Project Row -->
<div id="stateCarousel" class="carousel slide" data-ride="carousel" style="height: 70vh; width: 100%">
<h2 class="text-black mb-4" style="padding-top: 20px"><b>Which Country should you represent?</b></h2>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7" id="usaViz" style="height: 70vh"></div>
<div class="col-xl-4 col-lg-5">
<button type="button" id="btn-insight-2" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2" onclick="pickOutput2()">
Sports USA wins Medals from
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Top 5 Medal Sources for USA</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalText2">
</div>
<div class="modal-footer justify-content-center">
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
<div>
<form class="form-inline">
<div class="form-group">
<label for="top-choice">Display Top</label>
<select class="form-control" id="top-choice" style="margin: 10px;">
<option value=10>1 - 10</option>
<option value=20>11 - 20</option>
<option value=30>21 - 30</option>
<option value=40>31 - 40</option>
<option value=50>41 - 50</option>
</select>
</div>
</form>
</div>
<div class="featured-text text-center text-lg-left">
<h4>USA leads in Olympic Medals</h4>
<p class="text-black-50 mb-0">From 1896 - 2016, USA has won the highest number of Olympic Medals, far higher than any other country. You are more likely to win an Olympic medal from the US than any other country.</p>
</div>
<button type="button" class="btn btn-primary" id="btn-usa1" onclick="switchView()"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7" id="usaMapViz" style="height: 70vh; width: 50vw"></div>
<div class="col-xl-4 col-lg-5">
<div id="usaMap2Viz" style="height: 25vh; width: 25vw">
</div>
<div class="featured-text text-center text-lg-left">
<h4>USA sends highest no. of Olympians</h4>
<p class="text-black-50 mb-0">If you just want to be an Olympian, being an American is still your best bet since it sends the highest no. of athletes every time. <b>Click on any country to get more details.</b></p>
</div>
<button type="button" class="btn btn-primary" id="btn-usa6" onclick="switchView3()"><i class="fa fa-arrow-left"></i></button>
<button type="button" class="btn btn-primary" id="btn-usa2" onclick="switchView()"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7" id="usaScatterViz" style="height: 70vh; width: 50vw"></div>
<div class="col-xl-4 col-lg-5">
<div>
<form class="form-inline">
<div class="form-group">
<label for="scatter-x">Bubble Size</label>
<select class="form-control" id="scatter-x" style="margin: 10px;">
<option value="population">Population</option>
<option value="gdp_per_capita">GDP Per Capita</option>
</select>
</div>
</form>
</div>
<div class="featured-text text-center text-lg-left">
<h4>More Olympians means more Medals</h4>
<p class="text-black-50 mb-0">This visualization helps you explore how different national factors correlate with Olympic medals won and total Olympians. The size of the bubble represents the factor you choose.</p>
</div>
<button type="button" class="btn btn-primary" id="btn-usa3" onclick="switchView()"><i class="fa fa-redo-alt"></i></button>
<a class="btn btn-primary js-scroll-trigger" id="btn-nav1" href="#ff1"><i class="fa fa-arrow-down"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fact -->
<section class="projects-section bg-dark" id="ff1" style="padding: 10px">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- text -->
<div class="col-xl-5 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h3 class="text-white mb-4">Fun Fact:</h3>
<h4 class="text-white mb-4">Tarzan competed in the Olympics.</h4>
<p class="text-white-50 mb-0">Johnny Weissmuller, an athlete-turned-actor who played Tarzan in 12 movies, won five gold medals in swimming in the 1920s.</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-ff1" href="#physique"><i class="fa fa-arrow-down"></i></a>
</div>
<!-- image -->
<div class="col-xl-7 col-lg-7" style="height: 70vh">
<img class="img-fluid center" src="assets/img/johnnyweissmuller.png" alt="" />
<div class="bottom-right text-white">Johnny Weissmuller</div>
</div>
</div>
</div>
</section>
<!-- Physique -->
<section class="projects-section bg-light" id="physique" style="padding-top: 10px">
<div class="container">
<!-- Featured Project Row -->
<div id="stateCarousel2" class="carousel slide" data-ride="carousel" style="height: 70vh; width: 100%">
<h2 class="text-black mb-4" style="padding-top: 20px"><b>What is the Physique of the ideal Olympian?</b></h2>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7" id="physiqueVis" style="height: 70vh"></div>
<div class="col-xl-4 col-lg-5">
<button type="button" id="btn-insight-1" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="pickOutput()">
Get One Key Insight
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Key Insight</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalText">
</div>
<div class="modal-footer justify-content-center">
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
<div>
<form class="form-inline">
<div class="form-group">
<label for="selectorBox">Choose Sport</label>
<select class="form-control" id="selectorBox" style="margin: 10px;">
<option value="Alpine Skiing">Alpine Skiing</option>
<option value="Archery">Archery</option>
<option value="Art Competitions">Art Competitions</option>
<option value="Athletics">Athletics</option>
<option value="Badminton">Badminton</option>
<option value="Baseball">Baseball</option>
<option value="Basketball">Basketball</option>
<option value="Beach Volleyball">Beach Volleyball</option>
<option value="Biathlon">Biathlon</option>
<option value="Bobsleigh">Bobsleigh</option>
<option value="Boxing">Boxing</option>
<option value="Canoeing">Canoeing</option>
<option value="Cross Country Skiing">Cross Country Skiing</option>
<option value="Curling">Curling</option>
<option value="Cycling">Cycling</option>
<option value="Diving">Diving</option>
<option value="Equestrianism">Equestrianism</option>
<option value="Fencing">Fencing</option>
<option value="Figure Skating">Figure Skating</option>
<option value="Football">Football</option>
<option value="Freestyle Skiing">Freestyle Skiing</option>
<option value="Golf">Golf</option>
<option value="Gymnastics">Gymnastics</option>
<option value="Handball">Handball</option>
<option value="Hockey">Hockey</option>
<option value="Ice Hockey">Ice Hockey</option>
<option value="Judo">Judo</option>
<option value="Lacrosse">Lacrosse</option>
<option value="Luge">Luge</option>
<option value="Modern Pentathlon">Modern Pentathlon</option>
<option value="Nordic Combined">Nordic Combined</option>
<option value="Polo">Polo</option>
<option value="Racquets">Racquets</option>
<option value="Rhythmic Gymnastics">Rhythmic Gymnastics</option>
<option value="Rowing">Rowing</option>
<option value="Rugby">Rugby</option>
<option value="Rugby Sevens">Rugby Sevens</option>
<option value="Sailing">Sailing</option>
<option value="Shooting">Shooting</option>
<option value="Short Track Speed Skating">Short Track Speed Skating</option>
<option value="Skeleton">Skeleton</option>
<option value="Ski Jumping">Ski Jumping</option>
<option value="Snowboarding">Snowboarding</option>
<option value="Softball">Softball</option>
<option value="Speed Skating">Speed Skating</option>
<option value="Swimming">Swimming</option>
<option value="Synchronized Swimming">Synchronized Swimming</option>
<option value="Table Tennis">Table Tennis</option>
<option value="Taekwondo">Taekwondo</option>
<option value="Tennis">Tennis</option>
<option value="Trampolining">Trampolining</option>
<option value="Triathlon">Triathlon</option>
<option value="Tug-Of-War">Tug-Of-War</option>
<option value="Volleyball">Volleyball</option>
<option value="Water Polo">Water Polo</option>
<option value="Weightlifting">Weightlifting</option>
<option value="Wrestling">Wrestling</option>
</select>
</div>
</form>
</div>
<div>
<form class="form-inline">
<div class="form-group">
<label for="line-y">Choose Y-Axis</label>
<select class="form-control" id="line-y" style="margin: 10px;">
<option value="Height">Height in cm</option>
<option value="Weight">Weight in kg</option>
</select>
</div>
</form>
</div>
<div class="featured-text text-center text-lg-left">
<h4>Average Physique hasn't changed much over time.</h4>
<p>The following line charts provide an idea on what sports you should play solely based on your Sex, Height, and Weight</p>
</div>
<button type="button" class="btn btn-primary" id="btn-usa4" onclick="switchView2()"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7" id="physBox" style="height: 70vh; width: 50vw"></div>
<div class="col-xl-4 col-lg-5">
<div>
<form class="form-inline">
<div class="form-group">
<label for="box-sport">Choose Sport</label>
<select class="form-control" id="box-sport" style="margin: 10px;">
<option value="All">All</option>
<option value="Alpine Skiing">Alpine Skiing</option>
<option value="Archery">Archery</option>
<option value="Art Competitions">Art Competitions</option>
<option value="Athletics">Athletics</option>
<option value="Badminton">Badminton</option>
<option value="Baseball">Baseball</option>
<option value="Basketball">Basketball</option>
<option value="Beach Volleyball">Beach Volleyball</option>
<option value="Biathlon">Biathlon</option>
<option value="Bobsleigh">Bobsleigh</option>
<option value="Boxing">Boxing</option>
<option value="Canoeing">Canoeing</option>
<option value="Cross Country Skiing">Cross Country Skiing</option>
<option value="Curling">Curling</option>
<option value="Cycling">Cycling</option>
<option value="Diving">Diving</option>
<option value="Equestrianism">Equestrianism</option>
<option value="Fencing">Fencing</option>
<option value="Figure Skating">Figure Skating</option>
<option value="Football">Football</option>
<option value="Freestyle Skiing">Freestyle Skiing</option>
<option value="Golf">Golf</option>
<option value="Gymnastics">Gymnastics</option>
<option value="Handball">Handball</option>
<option value="Hockey">Hockey</option>
<option value="Ice Hockey">Ice Hockey</option>
<option value="Judo">Judo</option>
<option value="Lacrosse">Lacrosse</option>
<option value="Luge">Luge</option>
<option value="Modern Pentathlon">Modern Pentathlon</option>
<option value="Nordic Combined">Nordic Combined</option>
<option value="Polo">Polo</option>
<option value="Racquets">Racquets</option>
<option value="Rhythmic Gymnastics">Rhythmic Gymnastics</option>
<option value="Rowing">Rowing</option>
<option value="Rugby">Rugby</option>
<option value="Rugby Sevens">Rugby Sevens</option>
<option value="Sailing">Sailing</option>
<option value="Shooting">Shooting</option>
<option value="Short Track Speed Skating">Short Track Speed Skating</option>
<option value="Skeleton">Skeleton</option>
<option value="Ski Jumping">Ski Jumping</option>
<option value="Snowboarding">Snowboarding</option>
<option value="Softball">Softball</option>
<option value="Speed Skating">Speed Skating</option>
<option value="Swimming">Swimming</option>
<option value="Synchronized Swimming">Synchronized Swimming</option>
<option value="Table Tennis">Table Tennis</option>
<option value="Taekwondo">Taekwondo</option>
<option value="Tennis">Tennis</option>
<option value="Trampolining">Trampolining</option>
<option value="Triathlon">Triathlon</option>
<option value="Tug-Of-War">Tug-Of-War</option>
<option value="Volleyball">Volleyball</option>
<option value="Water Polo">Water Polo</option>
<option value="Weightlifting">Weightlifting</option>
<option value="Wrestling">Wrestling</option>
</select>
</div>
</form>
</div>
<div>
<form class="form-inline">
<div class="form-group">
<label for="box-y">Choose Y-Axis</label>
<select class="form-control" id="box-y" style="margin: 10px;">
<option value="Height">Height in cm</option>
<option value="Weight">Weight in kg</option>
</select>
</div>
</form>
</div>
<div class="featured-text text-center text-lg-left">
<h4>Explore the ideal Physique</h4>
<p class="text-black-50 mb-0">The box plots show the distribution of height & weight for every Olympian (Male and Female) from 1896 - 2016. The vertical lines represent ranges & horizontal lines represent medians.</p>
</div>
<button type="button" class="btn btn-primary" id="btn-usa5" onclick="switchView4()"><i class="fa fa-arrow-left"></i></button>
<a class="btn btn-primary js-scroll-trigger" id="btn-nav2" href="#ff2"><i class="fa fa-arrow-down"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fact -->
<section class="projects-section bg-dark" id="ff2" style="padding: 10px">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- text -->
<div class="col-xl-8 col-lg-7">
<div class="featured-text text-center text-lg-left">
<h3 class="text-white mb-4">Fun Fact:</h3>
<h4 class="text-white mb-4">Women have only been allowed to compete in the Olympics since 1900.</h4>
<p class="text-white-50 mb-0">The first Olympic Games to feature female athletes was the 1900 Games in Paris. Hélène de Pourtalès of Switzerland became the first woman to compete at the Olympic Games and became the first female Olympic champion, as a member of the winning team in the first 1 to 2 ton sailing event on May 22, 1900.
Briton Charlotte Cooper became the first female individual champion by winning the women's singles tennis competition on July 11. Tennis and golf were the only sports where women could compete in individual disciplines. 22 women competed at the 1900 Games, 2.2% of all the competitors.</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-ff2" href="#age"><i class="fa fa-arrow-down"></i></a>
</div>
<!-- image -->
<div class="col-xl-4 col-lg-5">
<img class="img-fluid center" src="assets/img/charlotte_cooper.png" alt="Charlotte Cooper" width="400" height="500" />
<div class="bottom-right text-white">Charlotte Cooper</div>
</div>
</div>
</div>
</section>
<!-- Age -->
<section class="projects-section bg-light" id="age" style="padding-top: 10px; height: 90vh">
<div class="container">
<h2 class="text-black mb-4" style="padding-top: 20px"><b>What is the Age of the ideal Olympian?</b></h2>
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- Col 1 - Viz -->
<div class="col-xl-8 col-lg-7" id="ageViz" style="height: 40vh"></div>
<!-- Col 2 - Button -->
<div class="col-xl-4 col-lg-5">
<div class="row justify-content-center">
<div class="align-self-center">
<!-- SEX -->
<h6>Sex</h6>
<form id="formSex" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input class = "age1" type="radio" name="controlHeatmapType" value="All" checked>All<br>
</label>
<label class="btn btn-secondary">
<input class = "age1" type="radio" name="controlHeatmapType" value="M">Male<br>
</label>
<label class="btn btn-secondary">
<input class = "age1" type="radio" name="controlHeatmapType" value="F">Female<br>
</label>
</form>
<br><br>
<!-- SEASON -->
<h6>Season</h6>
<form id="formSeason" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input class = "age2" type="radio" name="controlHeatmapType" value="All" checked>All<br>
</label>
<label class="btn btn-secondary">
<input class = "age2" type="radio" name="controlHeatmapType" value="Summer">Summer<br>
</label>
<label class="btn btn-secondary">
<input class = "age2" type="radio" name="controlHeatmapType" value="Winter">Winter<br>
</label>
</form>
<br><br>
<div class="featured-text text-center text-lg-left">
<h4>When do Olympians generally peak?</h4>
<p class="text-black-50 mb-0">Use the selection options above to explore the typical age an Olympian medalist. This will provide more info on when you can expect to peak in your Athletic Career.</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-nav3" href="#ff3"><i class="fa fa-arrow-down"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fact -->
<section class="projects-section bg-dark" id="ff3" style="padding: 50px">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- text -->
<div class="col-xl-8 col-lg-7">
<div class="featured-text text-center text-lg-left">
<h3 class="text-white mb-4">Fun Fact:</h3>
<h4 class="text-white mb-4">Imagine being an Olympian at 10.</h4>
<p class="text-white-50 mb-0">The youngest Olympian in the modern era is Greek gymnast Dimitrios Loundras, who competed in the 1896
Athens Olympics at the age of 10. At age 13, springboard diver Marjorie Gestring is the youngest female
individual gold medalist in history, while 14-year-old Kusuo Kitamura (swimming) is the youngest
male individual gold medalist.</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-ff3" href="#inspiration"><i class="fa fa-arrow-down"></i></a>
</div>
<!-- image -->
<div class="col-xl-4 col-lg-5">
<img class="img-fluid center" src="assets/img/DimitriosLoundras.png" alt="Dimitrios Loundras"/>
<div class="bottom-right text-white">Dimitrios Loundras</div>
</div>
</div>
</div>
</section>
<section class="projects-section bg-light" id="inspiration" style="padding-top: 10px; height: 70vh">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<h2 class="text-black mb-4" style="padding-top: 20px"><b>Is it game over if you aren't ideal?</b></h2>
<div class="col-xl-8 col-lg-7" style="padding-right: 20px">
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Grid Items-->
<div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/ArvydasRomasSabonis.png" alt="Arvydas Romas Sabonis" />
</div>
</div>
<!-- Portfolio Item 2-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal2">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/venusteniyongabo.png" alt="Venuste Niyongabo" />
</div>
</div>
<!-- Portfolio Item 3-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal3">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/FuMingxia.png" alt="Fu Mingxia" />
</div>
</div>
<!-- Portfolio Item 4-->
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal4">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/GalenCarter.png" alt="Galen Carter" />
</div>
</div>
<!-- Portfolio Item 5-->
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal5">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/MariyaYevgenyevnaFilatova.png" alt="Mariya Yevgenyevna Filatova" />
</div>
</div>
<!-- Portfolio Item 6-->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal6">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/athletes/PaulCurkeetSamson.png" alt="Paul Curkeet Samson" />
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals-->
<!-- Portfolio Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal1Label">Arvydas Romas Sabonis</h3>
<h5>Unfavorable Height Odds</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/ArvydasRomasSabonis.png" alt="Arvydas Romas Sabonis" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">Arvydas Romas Sabonis is a Lithuanian basketball player. Recognized as one of the best European players of all
time, he won the Euroscar six times, and the Mr. Europa Award twice. He played in a variety of leagues, and spent
seven seasons in the National Basketball Association (NBA), in the United States. Playing the center position,
Sabonis won a gold medal at the 1988 Summer Olympics, in South Korea, for the Soviet Union, and later earned
bronze medals at the 1992 Olympic Games and 1996 Olympic Games, while representing Lithuania. Sabonis is one of
the tallest Olympians reaching a height of 223cm/7.3ft.</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="portfolioModal2Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal2Label">Venuste Niyongabo</h3>
<h5>Burundi's Trailblazer</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/venusteniyongabo.png" alt="Venuste Niyongabo" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">The country of Burundi has only competed in the Summer Olympic Games since 1996. However, in that first year, Burundian long and middle distance track athlete Venuste Niyongabo won the gold medal in the 5,000m. Perhaps most astonishing about this feat was the fact that Niyongabo had only competed in this event thrice previously. In the 1990s, Niyongabo was considered to be one of the fastest 1500m runners in the world, but he gave up his spot for this event in the Olympics to another Burundian runner. He also holds the record for the sixth fastest mile in the world. Plagued by injuries, however, his subsequent Olympics showings have been rather lackluster. Nonetheless, he still remains in the sports world working for different organizations to foster peace and unity through athletics.
</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-labelledby="portfolioModal3Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal3Label">Fu Mingxia</h3>
<h5>Child Prodigy</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/FuMingxia.png" alt="Fu Mingxia" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">Fu Mingxia is a Chinese female diver, multiple Olympic gold medalist and world champion. She won the
platform-diving world championship in 1991 at the age of 12, making her the youngest diving champ of all time.
She is also famous for being one of the youngest Olympic diving champions, having earned a gold at the 1992
Barcelona Games when she was just 13 years and 345 days old. Throughout the 1990s, Fu dominated the sport with
her repertoire of extremely difficult dives. During the 2000 Sydney Olympics, Fu won her fourth gold medal,
joining Americans Pat McCormick and Greg Louganis as the world's only quadruple Olympic-diving champions.
</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-labelledby="portfolioModal4Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal4Label">Galen Carter "G. C." Spencer</h3>
<h5>Never Too Old</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/GalenCarter.png" alt="Galen Carter" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">At the 1904 Olympics, G. C. Spencer competed in the Archery, Double American Round on
September 19 – his 64th birthday. He finished 13th in that event but two days later helped his
Potomac Archers team win the gold medal, thereby becoming the oldest American to ever win a gold
medal. At the time of the 1904 Olympics, Spencer, a graduate of the College of the City of New York,
lived in Greenwich, Connecticut where he was a retired minister of the Methodist Episcopal Church.
Spencer was admitted to hospital for surgery just three weeks after his Olympic triumph and died
seven days later. His obituary in the New York Times noted that he was an expert chess player.</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-labelledby="portfolioModal5Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal5Label">Mariya Yevgenyevna Filatova</h3>
<h5>Unideal Weight & Height</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/MariyaYevgenyevnaFilatova.png" alt="Mariya Yevgenyevna Filatova" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">Mariya Filatova was a gymnast that competed for the Soviet Union at the 1976 and 1980 Summer Olympic Games,
at ages 16 and 20. She won gold in the team all round in both Olympics and bronze in the Uneven bars at her second games.
Weighing in at only 30kgs and reaching a height of 136cm, she is one of the smallest and lightest competitors to compete
and win a medal at the olympics. She was one of the first female gymnasts to successfully compete a double back somersault
on floor in 1975.</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-labelledby="portfolioModal6Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h3 id="portfolioModal6Label">Paul Curkeet Samson</h3>
<h5>Strong Weight Odds</h5>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/athletes/PaulCurkeetSamson.png" alt="Paul Curkeet Samson" />
<!-- Portfolio Modal - Text-->
<p class="mb-5">Paul Curkeet Samson was an American dual sport athlete who represented the United States at the 1928 Summer Olympics in Amsterdam,
Netherlands. Samson swam for the first-place U.S. team in the qualifying heats of the men's 4×200-meter freestyle relay.
Because he did not swim in the relay event final he was not eligible to receive a medal under the 1928 Olympic rules.
He was also a member of the fourth-place U.S. water polo team. Samson weighed a whopping 114kgs and was 198cm tall.
This would clinically place his BMI 1 point away from the obese classification. Yet he defied the odds and is considered
an olympic gold medalist and a duel sport olympic athlete. </p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Anything is possible.</h4>
<p class="text-black-50 mb-0">Here are some Olympians who weren't from the leading Olympic nations or were far from the ideal physique or age required to peak at their sport.
But that didn't stop them from defying all odds to redefine what is possible. Click to know more!</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-nav5" href="#ff4"><i class="fa fa-arrow-down"></i></a>
</div>
</div>
</div>
</section>
<!-- fact -->
<section class="projects-section bg-dark" id="ff4" style="padding: 10px">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- text -->
<div class="col-xl-8 col-lg-7">
<div class="featured-text text-center text-lg-left">
<h3 class="text-white mb-4">Final Fun Fact:</h3>
<h4 class="text-white mb-4">Sports isn't just about going to the Olympics and winning medals.</h4>
<p class="text-white-50 mb-0">Annabelle Paterson, co-creator of this website, is also a Harvard swimmer. She has been able to grow a lot personally
and meet amazing people through swimming, without going to the olympics. Here is the time she met the most decorated Olympian of all time, Michael Phelps.</p>
</div>
<a class="btn btn-primary js-scroll-trigger" id="btn-ff4" href="#contact"><i class="fa fa-arrow-down"></i></a>
</div>
<!-- image -->
<div class="col-xl-4 col-lg-5">
<img class="img-fluid center" src="assets/img/annabellephelps.jpg" alt="Charlotte Cooper" width="400" height="500" />
<div class="bottom-right text-white">Annabelle with Phelps</div>
</div>
</div>
</div>
</section>
<!-- contact -->
<section class="projects-section bg-light" id="contact" style="padding: 20px">
<div class="container">
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<!-- image -->
<img class="img-fluid" src="assets/img/contact.png" alt="" />
</div>
</div>
</section>
<!-- Footer -->
<section class="contact-section bg-black" style="height: 5vh">
<div class="d-flex justify-content-center">
<a class="mx-2 text-warning" target="_blank" href="https://github.com/Seeam2590/become_an_olympian"><i class="fab fa-github"></i></a>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white">
Data: <a class="text-center text-warning" target="_blank" href="https://www.kaggle.com/rio2016/olympic-games">2016 Rio Dataset</a>, <a class="text-center text-warning" target="_blank" href="https://www.kaggle.com/heesoo37/120-years-of-olympic-history-athletes-and-results">120 Years of Data on Olympic Athletes</a>
<br>
<br>
Copyright © Under the SEA 2020 </footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- d3 -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<!-- Our d3 scripts-->
<script src="js/main.js"></script>
<script src="js/helpers.js"></script>
<script src="js/usaViz.js"></script>
<script src="js/physique.js"></script>
<script src="js/usaMapViz.js"></script>
<script src="js/usaScatterViz.js"></script>
<script src="js/usaMap2Viz.js"></script>
<script src="js/ageViz.js"></script>
<script src="js/physBox.js"></script>
<script src="js/inspiration.js"></script>
</body>
</html>