-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (98 loc) · 4.69 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>
<title>Caffeine Chronicles: Exploring the World of Coffee Culture</title>
<!-- Import Vega & Vega-Lite (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- CSS file -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google font -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<!-- custom style -->
</head>
<body>
<div class="page">
<!-- Title and subtitle -->
<div class="pure-g">
<div class="pure-u-1-1">
<h1>Exploring the World of Coffee Culture</h1>
<p>
From 1961, coffee has had a widespread increase in consumption as seen in this dataset. This may not have all the information, but it does help us visualise that coffee has had an increase in popularity throughout the world.
Therefore, further records have been created to help us understand the different types of coffee that are consumed in different countries, and how they are rated in terms of taste.
</p>
</div>
</div>
<!-- end pure grid group -->
<!-- Chloropleth map -->
<div class="pure-g">
<div class="pure-u-1-1">
<div id="choropleth_map" class="vis-container"></div>
</div>
</div>
<!-- end pure grid group -->
<!-- Caption/small text -->
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Different countries have their own popular selection of coffee beans that they prefer, notably 2 different kinds being <b> Arabica </b> and <b> Robusta</b>.
Arabica is known for its smooth, sugary taste that is aromatic. However, Robusta is known for its strong, bitter taste that is high in caffeine.
</p>
</div>
</div>
<!-- end pure grid group -->
<div class="pure-g">
<div class="pure-u-1-1">
<div id="bar_chart" class="vis-container"></div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="description description-right">
<h2>Taste Test!</h2>
<p>Coffee is a complex and diverse beverage, with numerous coffee varieties originating from various regions around the world.
These varieties have distinct characteristics that influence their ratings on overall taste through measurements of <b>aroma, aftertaste, acidity, flavor, body</b> and <b>balance</b>.
Here's a summary of how the top 10 most popular varieties can vary in these aspects in a minimalistic sense. </p>
</div>
</div>
<div class="pure-u-1-2">
<div id="radial_aroma" class="vis-container"></div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1 small-font">
<h2>Sources</h2>
<ul>
<li>Map dataset: https://www.kaggle.com/datasets/michaellight/usda-coffee-data-06-2020</li>
<li>Bar Chart dataset: https://www.kaggle.com/datasets/yamaerenay/ico-coffee-dataset-worldwide</li>
<li>Radial Chart Dataset: https://www.kaggle.com/datasets/fatihb/coffee-quality-data-cqi</li>
</ul>
</div>
<div class="pure-u-1-1 small-font">
<p>Visual By Ashwin George</p>
</div>
</div>
</div>
<script type="text/javascript">
var specVis1 = "js/choropleth_map.vg.json";
var specVis2 = "js/stacked_consumption.vg.json";
var specVis3 = "js/radial_aroma.json";
vegaEmbed('#choropleth_map', specVis1).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
vegaEmbed('#bar_chart', specVis2).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
vegaEmbed('#radial_aroma', specVis3).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
</body>
</html>