forked from ClementPavue/DataVizProject
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·153 lines (152 loc) · 6.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>US Flight | Data Viz.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="device-notification">
<a class="device-notification--logo" href="#0">
<img src="image/logo.png" alt="Global">
<p>US Flight Visualization</p>
</a>
</div>
<div class="perspective effect-rotate-left">
<div class="container"><div class="outer-nav--return"></div>
<div id="viewport" class="l-viewport">
<div class="l-wrapper">
<header class="header">
<a class="header--logo" href="#0">
<img src="image/logo.png" alt="Global">
<p>US Flight Visualization</p>
</a>
<div class="header--nav-toggle">
<span></span>
</div>
</header>
<nav class="l-side-nav">
<ul class="side-nav">
<li class="is-active"><span>Map</span></li>
<li><span>Speed</span></li>
<!-- <li><span>Delays</span></li> -->
<li><span>Project</span></li>
</ul>
</nav>
<ul class="l-main-content main-content">
<li class="l-section section section--is-active">
<div class="intro">
<div class="col" id="info">
<h3 id="airport">Please select an airport</h3>
<div class="intro--options">
<div class="col" id="map"></div>
<div class="info-map">
<h3 id="airport_city"></h3>
<div id="airport_weather"></div>
<div id="airport_humidity"></div>
<div id="airport_zone"></div>
<div id="airport_code"></div>
<!-- <div id="icon"></div> -->
<h3 id="description_map">Airports on US soil:</h3>
<div id="content_map" style="text-align: justify">
The United States has about a third of all airports.
<br>Fourth largest country, airplanes are the quicker
<br>conveyance. The US has been prosperous enough
<br>to support a large interest in aviation and allow access
<br>since the beginning to the middle class.
<br>Here we are displaying the major commercial airports
<br>associated with other useful information.
</div>
<ul id="airline-available"></ul>
<h3>Number of flights per day:</h3>
<div id="legend"></div>
</div>
</div>
</div>
</li>
<li class="l-section section">
<div class="work">
<h3 id="cruise">Cruising speed by airline</h3>
<div class="intro--options">
<div class="chart-wrapper" id="speed"></div>
<div class="info-speed">
<h3>History of fuel savings:</h3>
<div style="text-align: justify">
Airlines are before all profit seeking. In order to make savings,
they can fly at a lower speed.We can see how
greedy they can be thanks to this <span class="tooltip"><span class="gold">violin plot<sup>?</sup></span><span class="tooltiptext">It is similar to box plots, except that they also show the probability density of the data at different values.</span></span>.
</div>
<h4>Mean by airlines(km/h): <span id="order" class="gold" style="cursor:pointer">↑</span></h4>
<ul id="airline_code"></ul>
</div>
</div>
</li>
<!-- <li class="l-section section">
<div class="contact">
<div class="contact--lockup">
<div>
HeatMap
<div id="heat"></div>
</div>
</div>
</div>
</li> -->
<li class="l-section section hire0">
<div class="hire">
<h2>About our project</h2>
<div class="work-request--options">
<span class="options-a">
<label for="opt-1" style="border:none; pointer-events: none">
Kévin Brou Boni
</label>
<label for="opt-2" style="border:none; pointer-events: none">
Clément Pavué
</label>
<label for="opt-3" style="border:none; pointer-events: none">
EL Mehdi Roussaky
</label>
</span>
<span class="options-b">
<a href="https://youtu.be/gwrTGZztC-Q">
<label for="opt-4">
Screencast
</label>
</a>
<a href="https://clementpavue.github.io/DataVizProject/process_book.pdf">
<label for="opt-5">
Process book
</label>
</a>
<a href="https://github.com/ClementPavue/DataVizProject">
<label for="opt-6" style="border:none">
<img src="image/GitHub-Mark-120px-plus.png" style="height: 36px">
</a>
</label>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<ul class="outer-nav">
<li class="is-active">Map</li>
<li>Speed</li>
<!-- <li>Delays</li> -->
<li>Project</li>
</ul>
</div>
</body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="js/functions-min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script data-main="js/main" src="js/require.js"></script>
</footer>
</html>