forked from john-guerra/w209_assignment_1_template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (112 loc) · 4.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Whisky Quality vs. Age</title>
<link rel="stylesheet" href="./css/main.css" />
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="chart">
<h1>Are older whiskies better?</h1>
<div class="description">
A visual representation comparing the stated age of 293 different whiskies to my personal rating of them.
</div>
<div id="chart"></div>
<div id="filter">
Filter by type:
<input onclick="filter(this)" type="checkbox" id="scotch" name="scotch" value="Scotch">
<label style="background-color:hsl(45,50%,50%)" for="scotch">Scotch</label>
<input onclick="filter(this)" type="checkbox" id="bourbon" name="bourbon" value="Bourbon">
<label style="background-color:hsl(0,50%,50%)" for="bourbon">Bourbon</label>
<input onclick="filter(this)" type="checkbox" id="rye" name="rye" value="Rye">
<label style="background-color:hsl(300,50%,50%)" for="rye">Rye</label>
<input onclick="filter(this)" type="checkbox" id="irish" name="irish" value="Irish">
<label style="background-color:hsl(120,50%,50%)" for="irish">Irish</label>
<input onclick="filter(this)" type="checkbox" id="japanese" name="japanese" value="Japanese">
<label style="background-color:hsl(240,50%,50%)" for="japanese">Japanese</label>
</div>
<div id="readout" class="readout"></div>
</br>
<div class="chart-footer">
By <a href="https://linkedin.com/in/mrkawa">Matt Kawa</a>.
<br />
<strong>Source</strong>: <a href="./data/whisky.csv">Personal Data Collection</a>
</div>
</div>
<br />
<div>
The data does not seem to indicate a meaningful relationship between stated age and rating. Of course the data is highly subjective in nature and any insights drawn are indicative only of my personal preferences.
<br /><br />
The data was collected gradually over the course of nearly 6 years, during which time I assigned a rating in increments of 0.5 on a scale of 0.5 to 5 to every unique whisky I tasted. The entire dataset is 757 records in length, however most whiskies in the set do not state the age of the product on the label.
<br /><br />
Although it is often possible to make an educated guess as to the actual age of the contents of a No Age Statement (NAS) bottle based on context, laws, public statements, and conjecture, the only way to be legally certain of the age of a whisky is for it to be printed on the bottle. For the purposes of this visualization, most NAS whiskies were omitted, unless the age is clearly advertised in their marketing materials or legally required to be at least a certain age (e.g. Bottled in Bond).
</div>
<br />
<br />
<br />
<h2>Problem Abstraction</h2>
<table>
<thead>
<tr>
<th colspan="2">Problem Abstraction</th>
</tr>
</thead>
<tbody>
<tr>
<td>What</td>
<td>
<ul>
<li>Comma-separated data table as input.</li>
<li>Contains categorical data (e.g. type of whisky) as well as nominal (e.g. age) and ordinal (e.g. rating) numerical data.</li>
<li>Source of data is self-collection.</li>
</ul>
</td>
</tr>
<tr>
<td>Why</td>
<td>
<ul>
<li>To better understand the releationship (or lack thereof) between the amount of time a whisky is aged and how much I enjoy it drinking it.</li>
</ul>
</td>
</tr>
<tr>
<td>How</td>
<td>
<ul>
<li>The location of the marks represents Age (x-axis) and Rating (y-axis).</li>
<li>
The data points are color-coded by type of whisky as follows:
<ul>
<li>Orange: Scotch</li>
<li>Red: Bourbon/American</li>
<li>Rye: Pink</li>
<li>Green: Irish</li>
<li>Yellow: Japanese</li>
<li>Canadian: Gray</li>
<li>World (Other): Blue</li>
<li>Flavored: Purple</li>
</ul>
</li>
<li>For extra clarity, the size <span style="font-style: italic">as well as opacity</span> of the points are determined by the number of records occupying that point on the x-y plane.</li>
</ul></td>
</tr>
<tr>
<td>Insight: Relationship</td>
<td>There does not seem to be any strong correlation between age and perceived quality.</td>
</tr>
<tr>
<td>Insight: Distribution</td>
<td>There appears to be a somewhat normal distribution of ratings. Perhaps another form of visualization could help clarify further.</td>
</tr>
<tr>
<td>Insight: Types</td>
<td>There seem to be no meaningful differences between the different types of whisky and their age-quality correlations (or lack thereof).</td>
</tr>
</tbody>
</table>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="./js/main.js"></script>
</body>
</html>