-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (164 loc) · 11.5 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<html>
<head>
<script type="text/javascript" src="app.js">
</script>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
</head>
<body onload=assignment9()>
<div>
<h2 class="section">Final Project: What Makes a Great Chocolate Bar? 🍫</h2>
<p class = "class_indent1">As a chocolate enthusiast 🥰, I would like to learn more about what constitutes a great chocolate bar.
In this project, I will explore how the ratings 🌟 of chocolates from different countries vary and how the ingredients used in their production ☕️ may influence these ratings.
</p>
<div class = "class_indent">
<h3>Question 1: Which companies make the best chocolate bars?</h3>
<p>
To begin with, I would like to learn about which companies produced highly-rated chocolate bars so that I may purchase their products in the future.
<br><br>
To answer this question,
I plan to compute the average rating of each chocolate company and identify the top 10 companies with the highest averages.
I have decided to use a lollipop chart,
which is a modified form of the basic bar chart.
While bar charts are effective for displaying information using line marks and position channels,
the top 10 companies in this case all have high ratings,
which could result in a cluttered figure with multiple bars of similar height.
Therefore, the lollipop chart provides a better visual effect.
Since there is only one value to be displayed, I will use the same color for all lollipops.
<br><br>
From the plot, we can observe that <b>Ocelot</b> and <b>Heirloom Cacao Preservation (Zokoko)</b> have the highest average ratings.
However, these are both new companies for me. I hope to try their products during the upcoming spring break ☀️.
</p>
<div id="q1">
</div>
<h4>Plot:</h4>
<p class = "interaction_tips">
Feel free to view detailed information (and 🍫 images) by moving your cursor on each lollipop (each circle) 🍭!
</p>
<div id="q1_plot" class="center_plot">
<svg id="mySvg">
<defs id="mdef">
<pattern id="Ocelot" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Ocelot.png"></image>
</pattern>
<pattern id="HeirloomCacaoPreservationZokoko" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Heirloom.png"></image>
</pattern>
<pattern id="Matale" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Matale.png"></image>
</pattern>
<pattern id="Patric" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Patric.png"></image>
</pattern>
<pattern id="IdilioFelchlin" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Idilio.png"></image>
</pattern>
<pattern id="Utopick" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Utopick.png"></image>
</pattern>
<pattern id="TimoAMeyer" x="0" y="0" height="50" width="40">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Timo.png"></image>
</pattern>
<pattern id="Obolo" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Obolo.png"></image>
</pattern>
<pattern id="Nikoa" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Nikoa.png"></image>
</pattern>
<pattern id="LandmarkAmano" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Landmark.png"></image>
</pattern>
<pattern id="Kerchner" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/choc1.png"></image>
</pattern>
<pattern id="Chocolate" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/choc2.png"></image>
</pattern>
<pattern id="CacaoSampaka" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Cacao.png"></image>
</pattern>
<pattern id="BenoitNihant" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Benoit.png"></image>
</pattern>
<pattern id="MadecasseCinagra" x="0" y="0" height="50" width="50">
<image x="0" y="0" width="50" height="50" xlink:href="imgs/Cinagra.png"></image>
</pattern>
</defs>
</svg>
<p class = "interaction_tips">Photo credit: All images of chocolates were obtained from the official websites of the chocolate brands, as well as from store information pages on Amazon, Yelp, Cocoa Runners, and Theobroma Cacao. Two images are from the free images website Pixabay.</p>
</div>
</div>
<div class = "class_indent">
<h3>Question 2: Does higher cocoa percentage and greater number of ingredients make better chocolate bars?</h3>
<p>
To answer this question, I decided to use scatterplots with point marks and positions (horizontal & vertical) and color channels. Scatterplot are helpful for exploring correlation between two variables. I also made the dots transparent, with deeper colors indicating more data points.
<br><br>
I assumed that a higher cocoa percentage would lead to a higher rating because a higher percentage usually indicates better quality chocolate bar 🍫. However, after examining the scatterplot, I found that there is no obvious pattern between cocoa percentage and rating. A chocolate bar with low cocoa percentage can also have a high rating, and a chocloate bar with high cocoa percentage may even have a lower rating! Most highly-rated chocolate bars seem to have a cocoa percentage between 65% and 80%.
<br><br>
It appears that the complexity of making a chocolate bar has little impact on its rating. The chocolate ratings are almost evenly distributed among various ingredient counts, indicating that the number of ingredients has little correlation with the chocolate's rating.
</p>
<h4>Plot:</h4>
<p class = "interaction_tips">Feel free to click the button to switch between the two plots.</p>
<div id="radio_q2" class="center_plot">
<input type="radio" id="q2_cocoa" name="attribute" value= "cocoa_percent" checked="checked">
<label for="Cocoa">Cocoa Percentage</label>
<input type="radio" id="q2_counts" name="attribute" value= "counts_of_ingredients">
<label for="Ingredients">Number of Ingredients</label>
</div>
<div id="q2">
<h4></h4>
</div>
<div id="q2_plot" class="center_plot">
</div><br>
</div>
</div>
<div class = "class_indent">
<h3>Question 3: Popular flavors 🧐
</h3>
<p>I am also curious about what are the most popular tastes among the chocolate bars recommended by the chocolate experts (rating >= 3). Maybe next time I can also try these flavors!🥰 I would also like to count the total number of each popular flavor, and see how many times it is the first taste, the second taste, the third taste, and the fourth taste of a chocolate bar.
<br><br>
To answer this question, I decide to use a stacked bar chart with lines mark and positions (horizontal & verticle) and color channels. Stacked bar chart are much more dense than pie chart, and in this question, it is especially helpful when we want to compare the compositions of different tastes. Since first taste, second taste, third taste, and fourth taste are categorical variables, I use some random chocolate colors (color hue) to represent each subcategory.
<br><br>
From the stacked bar chart below, we can observe that <b>nutty </b> is the most popular taste in a great chocolate bar. This makes sense, nuts are great complement of dark chocolate! We can also see that the composition of the counts of each taste varies. Although <b>creamy</b> 🍦 is not the most common taste, it has the highest count of first taste. <b>Cocoa</b> ☕️ has the highest count of thrid taste and fourth taste.
</p>
<div id="q3">
</div>
<h4>Plot:</h4>
<div id="q3_plot" class="center_plot">
</div>
</div>
<div class = "class_indent">
<h3>Question 4: Does high average rating means high overall performance of a chocolate company?</h3>
<p>In question 1, we learn what are some best companies producing chocolate bars. In this question, I would like to further explore the distribution of high-rated chocolate companies. To achieve this, I find the chocolate bars companies with the top 3 highest average ratings among companies that have more than 20 chocolate bars. I decide to use box plots with lines and points marks and position and color channels since box plots will be helpful for us to compare the spread of the data. I use a sequencial color scale to represent the rating data point. Brighter colors indicates higher ratings.
<br><br>
We can observe that companies with high average rating generally tend to have a high overall performance. Most of their ratings are scattered around the center. However, their distributions may varies.
</p>
<div id="q5">
</div>
<h4>Plot:</h4>
<div id="q5_plot" class="center_plot">
</div>
<br><br>
<br><br>
</div>
<div class = "class_indent">
<h3>Question 5: Where do the best chocolate bars come from? 🗺️</h3>
<p>After learning about chocolate flavors, I also want to learn more about the ingredients of great chocolate bars. Specifically, do ingredients from certain regions tend to have better cocoa beans?
<br><br>
To answer this question, we can find the most common chocolate bean origin countries of the chocolate bars that are recommended by the chocolate experts (with rating >= 3.5 out of 5). I decide to use a map with points mark and position and size channel. Each point represent the number of high rating chocolate bars in a certain country encoded by the circle size. Since we only have one value, I use the same color for all circles.
<br><br>
We can observe from the graph that <b>Venezuela</b> is the country of beans origin that has the highest number of tasty chocolate bars. Many countries from Middle America seem to have plentiful high-quality cocoa beans that produce great chocolate 💗!
</p>
<div id="q4">
</div>
<h4>Plot:</h4>
<div id="q4_plot" class="center_plot">
</div>
</div>
</body>
</html>