-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
97 lines (97 loc) · 5.7 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
<!DOCTYPE html>
<html>
<head>
<title>
Car Mileage Visualization
</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="script.js"></script>
<div id="content">
<div id="intro-content">
<h1>Car Mileage Visualization</h1>
<p>
This set of visualizations have been created for the purpose of viewing and analyzing mileage, trip, gas prices, and fuel usage trends across mileage data. I hope to use these visualizations to analyze driving habits across the year, or find instances where driving and fuel efficiency could be improved.
</p>
<p>
The data for the visualization was collected from the vehicle's onboard computer, as well as when filling up the fuel tank. I plan to continue collecting data and adding it to the visualizations to see trends as time progress in the future.
</p>
<h3>
Dataset
</h3>
<p>
For reference, the car used for this data is a <a target="_blank" href="https://www.cars.com/research/honda-accord/specs/usc40hoc011d0/">2014 Honda Accord EX-L</a>. I mostly use the car for commuting to and from school, but less frequently for various events, travel, groceries, etc.
</p>
<p>
I realize that these other use cases are not made clear in the usage data, but can still make a negative impact in terms of understanding why certain trends exist. I hope to resolve this in the future with either data filtering or additional visualization(s).
</p>
</div>
<div id="avg-content">
<h2>Average Miles Per Gallon Between Fillups</h2>
<svg id="avg-canvas" class="chart">
</svg>
<p>
Average mileage, also known as <i>average miles per gallon</i>, is a simple way to view how efficiently one is driving, while abstracting away the actual distance driven in the given time period. In this case, we can put the miles per gallon against the date of a fillup and see how efficiently the car has been driven across time.
</p>
</div>
<div id="mileage-content">
<h2>Mileage vs. Potential Miles</h2>
<svg id="mileage-canvas" class="chart">
</svg>
<p>
This visualization goes into more detail than the previous one in regards to the actual miles driven between fuel fillups. Across time, we can put the total miles driven from one fillup to another and get an idea as to how much distance we travel over the course of one fuel tank.
</p>
<p>
One of the nice things cars do these days is estimate the range that can be traveled given the amount of fuel remaining. We can stack this on top of the total miles driven to give insight into how many miles <i>could be driven</i> before the fillup needed to occur. It's possible that the fillup could be delayed a day or two, or for those who get antsy when the fuel is low and fill up early, maybe even a week.
</p>
<p>
Some information isn't apparent when viewing this visualization. It's entirely possible that the potential drivable miles is significantly higher because one filled up the tank early. However, this might have been done in anticipation of a long drive that was farther than the estimated range could provide.
</p>
<p>
Regardless, it's still a means to help understand how well one maximizes the fuel in their car in comparison to what the car calculates is possible.
</p>
</div>
<div id="price-mile-content">
<h2>Price Per Mile By Fillup Date</h2>
<svg id="price-mile-canvas" class="chart">
</svg>
<p>
Price per mile is another metric to show how efficiently the car was driven over the course of time between fillups. More specifically, it relates the miles driven to the money spent on the fuel for that time period.
</p>
<p>
The price per gallon is retrieved when the fillup is made for that trip, and we can multiply that by the reciprocal of the average miles per gallon for that period between fillups.
</p>
<p>
This visualization gives insight into how effectively one is using their fuel in relation to how much they initially paid for it. For drivers, the goal is to reduce the price per mile value to maximize the travel distance per unit currency.
</p>
</div>
<div id="fillup-frequency-content">
<h2>Fillup Frequency</h2>
<svg id="fillup-freq-canvas" class="chart">
</svg>
<p>
The frequency at which fillups occur over time is another interesting metric because it provides insight into the time periods where fillups are required more often. This could be caused by inefficient mileage, more frequent trips, or a higher usage of fuel due to additional vehicle services.
</p>
<p>
We can look at frequency over all time to see if the month(s) show any trends in clustered fillup dates.
</p>
</div>
<div id="credits">
<h2>Credits</h2>
<p>
This visualization was created by <a href="https://github.com/SIZMW">Aditya Nivarthi</a>.
</p>
<h2>Source</h2>
<p>
The source code for this visualization can be found <a href="https://github.com/SIZMW/car-mileage-visualization">here</a>.
</p>
</div>
</div>
</body>
</html>