-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (107 loc) · 3.27 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A visualization of global car characteristics between 1970 and 1982</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="src/tendence.css">
<style>
/* Global settings */
* {
font-family: fantasy;
}
/* Correlation */
#correlationTable {
border-collapse: collapse;
}
#bigCorrelation {
width: 500px;
height: 500px;
}
td {
border: 1px solid black;
}
td:hover {
background: pink;
}
.chart {
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
margin: 2px;
}
.label {
font-family: fantasy;
font-size: 1em;
text-align: center;
}
.correlationChartContainer {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 100px;
}
</style>
</head>
<body onload = "init()">
<div class="container">
<h1 style="text-align: center;">A visualization of global car characteristics between 1970 and 1982</h1>
</div>
<p>
The data that we visualize here is the Auto MPG Data Set which contains 398 automobile records from 1970 to 1982 of US, Japan and Europe.
Each car is described by its model, region of production, year of production and 6 attributes: MPG (miles per gallon), number of cylinders, displacement, horsepower, weight, acceleration.
</p>
<p>
Below shows the correlation between the six attributes. Clicking on one of the graph shows a bigger detailed scatter plot.
</p>
<!-- Correlation -->
<div class="correlationChartContainer center-block">
<table id="correlationTable">
<tbody id="correlationMatrix"></tbody>
</table>
<div id="bigCorrelation"></div>
</div>
<p>
Below shows the evolution of each characteristic of car in each region along the years.
</p>
<!-- Trends -->
<div id="container"></div>
<div id="btn-group"></div>
<p>
Below shows the proportion of brands of cars produced in each origin.
</p>
<!-- Piechart -->
<div id="piechart" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
</body>
<!--<script src="js/echarts.js"></script>-->
<script src="data/cars.js"></script>
<script src="src/correlation.js"></script>
<script src="src/tendence.js"></script>
<script src="src/piechart.js"></script>
<script>
function init() {
scatterPlot();
drawPieChart();
}
</script>
</html>
<!-- Trends -->
<div id="container"></div>
<div id="btn-group"></div>
<!-- Piechart -->
<div id="piechart" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
</body>
<!--<script src="js/echarts.js"></script>-->
<script src="data/cars.js"></script>
<script src="src/correlation.js"></script>
<script src="src/tendence.js"></script>
<script src="src/piechart.js"></script>
<script>
function init() {
scatterPlot();
drawPieChart();
}
</script>
</html>