-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
117 lines (113 loc) · 6.08 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1990 Automobile Data</title>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/dc.min.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">Automobile Data</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" data-scroll-nav="0">Home</a></li>
<li><a class="active" data-scroll-nav="1">Top 10</a></li>
<li><a class="active" data-scroll-nav="2">Dashboard</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section class="container-fluid" data-scroll-index="0">
<div class="row slider">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Cars in the 90'</h1>
<p>Data vizualization from the past</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-2 info-text">
<div>
<p>The 1990s might not seem too long ago, but it’s worth remembering that period. Still, there are quite a few '90s survivors on the road today, and we’ve drilled down into the data to find out what happened between 1990-'99 and what are the top 10 best cars.</p>
</div>
</div>
</section>
<section class="container-fluid" data-scroll-index="1">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h2 class ="title-format">MOST ICONIC 1990’S CARS (TOP 10)</h2>
<div class="thumbnail">
<img id ="iconic-car" src="images/toyota.jpg" alt="car image">
<div class="text-center">
<img src="images/arrow-left.png" class="prev pointer" alt="Prev">
<img src="images/arrow-right.png" class="next pointer" alt="Next">
</div>
<div class="caption">
<h3 class ="title-format car-name">Toyota Supra</h3>
<p class ="car-description text-format"> The final version of the Supra had a point to prove. Born out of the derivative Celica, the 1993 was all rounded corners and turbo boost. The unbelievably strong inline six engine block became a legend, and the car ended up in everything from Need For Speed to The Fast and the Furious.
Even if it is a little over-worshipped at times, it's still a 320 hp coupe that's as easy to drive fast is it is comfy to ride in. Certain elements of society never really got over the Supra's demise, which is a big reason why it's perpetually rumored for revival. </p>
<h3 class ="title-format">Final thoughts about this section..</h3>
<p class="text-format">Looking back, it’s strange how some of the iconic cars from the 1990s are already legends and still hold up well to scrutiny, while others are rather disappointing and deserve to be forgotten. Interesting decade. Do you have a favorite ‘90s car from this list?</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid" data-scroll-index="2">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h2 class="title-format">Data visualization</h2>
<div class="col-xs-12 col-md-12 col-lg-6">
<div id="fuel-type"></div>
<p class="text-format graph-text">In the 90's were only two kinds of fuel used to power up the cars. In this graph we can see how many cars were with diesel or petrol engines.<br><b>Conclusion: </b>The preferend engine type was the petrol one.The silent one .....</p>
</div>
<div class="col-xs-12 col-md-12 col-lg-6">
<div id="by-type"></div>
<p class="text-format graph-text">Like in our days there are many car body types.This is a graphical representation of cars classified by body types.<br><b>Conclusion: </b>The most bought car was the medium-sized one</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="made-in"></div>
<p class="text-format graph-text">Here we see a classification after the car manufacturer. There was three big manufacturers : Europe, Usa and Japan.<br><b>Conclusion: </b>In the 90's the european cars were in the smallest number</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="reliability-price"></div>
<p class="text-format graph-text">Here we have a classification after the reliability of the cars. We have 5 that is super reliable and 1 is not reliable. <br><b>Conclusion: </b>The most of the cars in the 90's were with a medium reliability (3). That's because they were accessible from a price point of view.</p>
</div>
</div>
</section>
<footer>
<div class="col-xs-12 footer">
<p class="text-center made">Copyright 2018 made by</p>
<img class="logo" src="images/logo.png" alt="developer logo">
</div>
</footer>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script src="js/scrollIt.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/datagraphs.js"></script>
</body>
</html>