forked from micheunderscore/DVAssignment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (124 loc) · 5.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Visualization</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<eta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/styles/styles.css" />
<title>Document</title>
</head>
<body>
<div class="center">
<div class="textbox">
<h1 class="title">Top 30 Point-Scoring Formula One Drivers</h1>
</div>
<div id="chartBox" class="textbox">
<div id="pieChart" class="displayCharts"></div>
<br />
<hr />
<br />
<div id="lineChart" class="displayCharts"></div>
<br />
<hr />
<br />
<div id="barChart" class="displayCharts"></div>
<br />
<hr />
<br />
<div id="teamChart" class="displayCharts"></div>
<p class="reference">
Source: Formula 1 World Championship (1950 - 2022) | Rohan Rao
(Retrieved 20-7-22)
</p>
</div>
<div class="textbox">
<h3 class="title">Objectives</h3>
<p class="paragraph">
<ol>
<li>To apply statistical analysis on the chosen dataset to supply key knowledge for analytical models.</li>
<li>To analyse hidden patterns and trends to produce useful information and visualisation.</li>
<li>To provide useful insight for patterns within the data as anomalies in the dataset may be attributed to significant regulation changes or key historical events in Formula One.</li>
</ol>
</p>
<h3 class="title">Insights</h3>
<p class="paragraph">
This D3 donut chart is utilized in order to graph the distribution of
the points collected by each F1 Drivers depending on the driver's
total career points. We were able to make each slice clickable by
implementing a few fundamental D3 routines, and doing so will bring
the points corresponds to that particular slice. Users can find it
much simpler and more convenient to compare the F1 drivers total
collected points when using donut charts since each of the slices have
their own unique lengths, yet they all have the same width.
</p>
<p class="paragraph">
In the line graph, each data point is depicted as a single segment of
a straight line. The F1 drivers average positions in their career are
shown along the x-axis, while the statistics of their rankings are
presented along the y-axis. The line graph is better at displaying
data over time and visually illustrating changes that take place
throughout the F1 Drivers career. The Line graph shows the data in
intervals, making it easier for readers to identify trends.
</p>
<h3 class="title">About This Dataset</h3>
<p class="paragraph">
Formula 1 World Championship (1950 - 2022): Formula One (also known as
F1 or Formula One) is the highest level of single-seater racing
sanctioned by the Fédération Internationale de l'Automobile (FIA) and
owned by the Formula One Group. Since its inception in 1950, the FIA
Formula One World Championship has been one of the most prestigious
forms of motorsport in the world. The term "formula" in the name
alludes to the set of regulations that must be followed by all
competitors' vehicles. A Formula One season consists of a series of
races known as Grands Prix that take place on purpose-built circuits
as well as public roads across the world. From 1950 through the most
recent season in 2021, the dataset contains all information on Formula
1 races, drivers, manufacturers, qualifying, circuits, lap times, pit
stops, and titles.
</p>
</div>
<div class="textbox">
<h2 class="title">Group Submission</h2>
<table>
<tr>
<th>Member Name</th>
<th>Matrix ID</th>
</tr>
<tr>
<td>Muhammad Iqbal bin Asim</td>
<td>18001179</td>
</tr>
<tr>
<td>Nor Intan Liyana Binti Ibrahim</td>
<td>17009052</td>
</tr>
<tr>
<td>Muhammad Akhimullah bin Saiful Bahri</td>
<td>19000657</td>
</tr>
<tr>
<td>Muhammad Faris Bin Ramlee</td>
<td>18001053</td>
</tr>
<tr>
<td>Muhammad Hakim Irfan bin Mohd Zaini</td>
<td>18001134</td>
</tr>
</table>
</div>
</div>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Function for radial charts -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js"></script>
<!-- PIE CHART -->
<script type="module" src="./src/js/main.js"></script>
<!-- LINE CHART -->
<script type="module" src="./src/js/lineChart.js"></script>
<!-- INTAN WORKSPACE -->
<script type="module" src="./src/js/intan.js"></script>
<!-- AKHI WORKSPACE -->
<script type="module" src="./src/js/akhi.js"></script>
</body>
</html>