-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (109 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141666987-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141666987-1');
</script>
<title>Roland Garros Dataviz</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Sofia" rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script type="text/javascript" src="d3.v4.js"></script> <!-- https://d3js.org/ -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id=bg></div>
<div id="nav-bar">
<div id=left-container>
<img class="logo img_link" src='img/ensae.png' onclick="open_ensae()">
 
<img class="logo img_link" src='img/toucan.png' onclick="open_toucan()">
 
<img class=logo src='img/separator.png'>
<div class=lang-fr>
<span id=nav-bar-title>Roland Garros : une histoire de champions</span><br>
<span id=nav-bar-signature>Une datavisualisation <a target="_blank" href="https://www.linkedin.com/in/raphael-huille">par Raphael Huille </a></span>
</div>
<div class=lang-en>
<span id=nav-bar-title>Roland Garros : a story of champions</span><br>
<span id=nav-bar-signature>A datavizualisation <a target="_blank" href="https://www.linkedin.com/in/raphael-huille">by Raphael Huille </a></span>
</div>
</div>
<div id=center-container>
</div>
<div id=right-container class=lang-fr>
<div id=feedback onclick="giveMeFeedBack()">Donnez moi votre avis   <i class="far fa-envelope"></i></div>
<div id=langSwitcher>
<span class=swicther onclick="switchLangue('en')">en</span>
<span class=swicther onclick="switchLangue('fr')">fr</span>
</div>
</div>
<div id=right-container class=lang-en>
<div id=feedback onclick="giveMeFeedBack()">Give me feedback <i class="far fa-envelope"></i></div>
<div id=langSwitcher>
<span class=swicther onclick="switchLangue('en')">en</span>
<span class=swicther onclick="switchLangue('fr')">fr</span>
</div>
</div>
</div>
<div id=nav-bar-shower-container class="button" onclick="toogleNavBar()">
<div id=nav-bar-shower></div>
<div id=flag></div>
</div>
<i class="fas fa-info-circle" id=info-opener></i>
<div id='container' onclick="hideNavBar(); toogleInfoVisibility()">
<div id=start-page onclick="toogleInfoVisibility()">
<div class=start-page-title>Roland Garros</div>
<div class="lang-fr start-page-title"> Une histoire de champion</div>
<div class="lang-en start-page-title">A story of champions</div>
<div id=sep></div>
<div class=lang-fr id=start-page-subtitle>Une vizualisation interactive des hommes et des matchs qui ont marqué le tournois.
</div>
<div class=lang-en id=start-page-subtitle-en>An interactive data vizualisation of men and matches that made the tournament.
</div>
<div id=start-page-signature>
<a target="_blank" href="https://www.linkedin.com/in/raphael-huille">
<span class=lang-fr>Par</span>
<span class=lang-en>By</span>
Raphael Huille
</a>
</div>
<div id=start-button__container onclick="hideLandingPageAndStartStory()">
<span class=lang-fr id=start-button>Commencer</span>
<span class=lang-en id=start-button-en>Start</span>
</div>
</div>
<div id=timeline-container>
<i id=go-to-previous onclick="goToPreviousStep()" class="button fas fa-chevron-circle-left"></i>
<div id=timeline></div>
<i id=go-to-next onclick="goToNextStep()" class="button fas fa-chevron-circle-right"></i>
</div>
<div id=text-story-container>
<div id=textStory></div>
</div>
<svg id=svg>
<g id=graph></g>
<g id=tooltips></g>
<g id=time></g>
</svg>
</div>
<div id=info>
</div>
<div id=source><a target="_blank" href="https://github.com/rhuille/data-preparation-for-d3/blob/master/Construction%20of%20a%20Roland%20Garros%20dataset.ipynb">Source</a></div>
</body>
<script type="text/javascript" src="selectDomElement.js"></script>
<script type="text/javascript" src="simulation.js"></script>
<script type="text/javascript" src="loadTime.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="story.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>