-
Notifications
You must be signed in to change notification settings - Fork 0
/
viz.html
188 lines (155 loc) · 10.2 KB
/
viz.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Visual F1</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Stalemate&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--D3-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<!--Three.js-->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
}
}
</script>
<link rel="stylesheet" href="static/css/styles.css">
<link rel="icon" href="images/icon.png">
</head>
<body>
<div id="nav-wrapper">
<nav>
<a href="#inicio" class="nav-button active" id="i"><i class="fa fa-circle"></i></a>
<a href="#historia" class="nav-button" id="h"><i class="fa fa-circle"></i></a>
<a href="#engine" class="nav-button" id="e"><i class="fa fa-circle"></i></a>
<a href="#resto" class="nav-button" id="r"><i class="fa fa-circle"></i></a>
<a href="#pilotos" class="nav-button" id="f"><i class="fa fa-circle"></i></a>
<!-- use "images/icon.png" as icon -->
<img src="images/icon.png" id="LilCar" alt="LilCar">
</nav>
<span class="nav-text original"></span>
</div>
<section id="inicio">
<img id="title" src="images/title.svg" href="viz.html">
<div id="spacing"></div>
<div id="3dcar"></div>
</section>
<section id="historia" style="padding-top: 10vh;">
<h1>O passado</h1>
<div class="flexHorizontal">
<img class="f1_car" src="images/f1_car.png">
<p>A Fórmula 1 é considerada a categoria mais importante do automobilismo mundial. Por ela, passaram nomes como Ayrton Senna, Michael Schumacher, Nelson Piquet, Niki Lauda e tantos outros pilotos de renome.
<br> <br>
Como em todo esporte a motor, na F1 os resultados dependem da combinação entre piloto e equipamento, e essa relação move há anos uma <em>multidão de fãs.</em></p>
</div>
<div class="flexHorizontal">
<p class="alignright"> O passado do esporte reflete em sua atualidade, e olhar pra trás é, antes de tudo, muito interessante. Em 1950, quando o esporte foi institucionalizado, os motores eram menos potentes e os carros muito mais frágeis. A velocidade máxima não chegava a 300km/h, e o cinto de segurança nem era obrigatório.
<br> <br>
Acompanhe a seguir a <em>linha do tempo </em>:</p>
<img class="old_cars" src="images/old_cars.png">
</div>
</section>
<div id ="pista_historia">
<img src="images/historia_flags.svg" id = "hist-image" usemap="#imagem-map">
<div class="tooltip"></div>
<map name="imagem-map">
<area shape="rect" coords="0px,400px,150px,600px" alt="Área 1" class="tooltip-area" title="1895: Provavelmente ano da primeira corrida automobilítica, que durou 48h em uma pista de 1200km">
<area shape="rect" coords="200,550,350,750" alt="Área 2" class="tooltip-area" title="1901: Primeiro Grand Prix, a competição mais importante da atualidade no automobilismo.">
<area shape="rect" coords="330,120,500,300" alt="Área 3" class="tooltip-area" title="1950: Criação oficial da Formula 1 pela FIA (Federação Internacional de Automobilismo). O vencedor da primeira corrida foi o italiano Nino Farina, pela Alfa Romeo.">
<area shape="rect" coords="620,90,770,270" alt="Área 4" class="tooltip-area" title="1972: Um brasileiro é campeão da Fórmula 1 pela primeira vez. Emerson Fittipaldi vence correndo pela Lotus e 2 anos depois pela MacLaren.">
<area shape="rect" coords="650,420,800,610" alt="Área 5" class="tooltip-area" title="1977: A Renault desenvolve os motores turbo, que potencializavam as velocidades alcançadas mas eventualmente causaram acidentes fatais, então foram proibidos em 1988.">
<area shape="rect" coords="920,350,1070,550" alt="Área 6" class="tooltip-area" title="1994: Morre Ayrton Senna. Sensação brasileira, que conquistou 3 títulos e carregava a esperança do país no esporte. O acidente fatal ocorreu durante uma corrida do GrandPrix, e foi televisionado enquanto o país parava para assistir.">
<area shape="rect" coords="970,20,1380,220" alt="Área 7" class="tooltip-area" title="2023: Atualidade. Nos últimos anos, destacou-se a Mercedes, consagrando 7 vitórias consecutivas entre 2014 e 2020, 6 delas com a direção de Lewis Hamilton, inglês considerado o melhor piloto da atualidade. No ano de 2023, a competição mundial ainda está em andamento, mas tudo aponta que a RedBull desenvolveu um carro com potencial enorme de ser campeão!">
</map>
</div>
<section id="engine">
<div class="flexHorizontal">
<div class="container">
<div class="row">
<h1>As construtoras</h1>
</div>
<div class="row">
<p>Além de uma competição de pilotos, a Formula 1 é uma competição de engenheiros de primeira linha. Para que um piloto tenha condições de competir, o desempenho da constutora é essencial, desde a construção de um carro potente à equipe de PitStop.</p>
<p>Acumulando pontos ao longo das corridas, as construtoras também competem entre si pelo título de campeã mundial.</p>
<h3 style = "font-weight: bold; color:white">Veja o histórico de vitórias</h3>
<div class="d-flex flex-row">
<div class="p-2">
<h5 class="alignleft"><a href="barRaceConstructor.html" class="largepill"><em>Construtoras</em></a></h5>
</div>
<div class="p-2">
<h5 class="alignleft"><a href="barRaceRaces.html" class="largepill"><em>Corridas por construtora</em></a></h5>
</div>
<div class="p-2">
<h5 class="alignleft"><a href="barRacePilot.html" class="largepill"><em>Pilotos</em></a></h5>
</div>
</div>
</div>
</div>
<div class="flexVertical engine">
<img src="./images/engine.jpg" width="150px">
</div>
</div>
</section>
<section id="resto">
<div class="flexHorizontal">
<div class="flexVertical pit">
<img src="./images/pitstop.png" width="200">
</div>
<div class="container">
<div class="row">
<h1 class="alignright">PitStop</h1>
</div>
<div class="row">
<p class="alignright"> O PitStop é um momento decisivo na corrida. As equipes, que no início da F1 consistiam em 4 pessoas (e agora são 25!), são altamente treinadas para realizar as trocas de pneu o mais rápido possível e retornar o piloto à corrida. </p>
<p class="alignright"></p>
<h3 class="alignright"><a href="pitStop.html" class="largepill"><em>PitStops!</em></a></h3>
</div>
</div>
</div>
</section>
<section id="pilotos">
<div class="flexHorizontal">
<div class="container">
<div class="row">
<h1 class="alignleft">Os pilotos</h1>
</div>
<div class="row">
<p class="alignleft"> Os pilotos da Fórmula 1, em geral, se tornam heróis nacionais. Atualmente, a Inglaterra vibra por Lewis Hamilton como, anos atrás, as corridas de Ayrton Senna paravam o Brasil. O esporte exige habilidade e treino em níveis altíssimos!</p>
<p class="alignleft"></p>
<h3 class="alignleft"><a href="timeSerie.html" class="largepill"><em>Temporada!</em></a></h3>
</div>
</div>
<div class="flexVertical pit">
<img src="./images/pilotos.png" width="200">
</div>
</div>
</section>
<footer class="flexHorizontal">
<div>
<h2>Projeto Final de Visualização de Dados - FGV</h2>
<p><em>Ana Carolina Erthal, Felipe Lamarca, Guilherme de Melo</em></p>
<img src="./images/icon.png" width="70px">
</div>
<div>
<p style="width: 300px; text-align: right; color: #FFFFFF"> <a class="linkreference" href="https://www.f1-telemetry.net/information">F1 Telemetry</a><br><br></p>
<p style="width: 300px; text-align: right; color: #FFFFFF"> <a class="linkreference" href="https://www.kaggle.com/datasets/rohanrao/formula-1-world-championship-1950-2020">Kaggle - Formula 1 World Championship</a><br><br></p>
<h3 class="alignright"><a href="index.html" class="largepill"><em>Sobre o projeto</em></a></h3>
</div>
</footer>
<!--bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--personal js-->
<!--<script src="static/js/imageMapResizer.min.js"></script>-->
<script src="static/js/scroll.js"></script>
<script src="static/js/tooltip_historia.js"></script>
<script src="static/js/style.js"></script>
<script type="module" src="static/js/main.js"></script>
</body>
</html>