-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (255 loc) · 7.86 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<html>
<head>
<title>INFO 3300 - Data-driven Web Applications</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans" rel\
="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src = "function.js"></script>
<style>
body {font-family: 'Alegreya Sans', Calibri, sans-serif;}
p {padding-left: 15;}
h1 {padding-left: 15}
h2 {padding-left: 15;}
rect {
fill: #8E8B99;
}
.background {
fill: #D9D9D9;
}
.butter {
fill: #3E59B3;
}
.milk{
fill:#3E59B3;
}
.cream{
fill: #3E59B3;
}
.egg {
fill: #fe2820;
}
.fish {
fill: #722943;
}
.tomato{
fill: #8DDB87;
}
.corn {
fill:#FFFB46;
}
.onion {
fill: #FF708F;
}
.garlic {
fill: #ffffb2;
}
.cayenne {
fill: #feb24c;
}
.olive_oil {
fill: #668C31;
}
.sesame_oil{
fill: #55047D;
}
.vegetable_oil{
fill: #F8F86F;
}
.wheat {
fill: #E69719;
}
.cumin{
fill: #fed976;
}
.soy_sauce{
fill: #fd8d3c;
}
.scallion{
fill: #f03b20;
}
.turmeric{
fill: #bd0026;
}
.rice{
fill: #93241C;
}
.legend{
fill: #ADD8E6;
}
</style>
</head>
<body>
<h1>Top Five Ingredients From Eleven Different Cuisine Types Ranked From Most Commonly Used to Least Commonly Used </h1>
<p>In a recent research paper, "Flavor Network and the Principle of Food Pairings", several researchers compiled a list of recipes from several online recipe websites. Using this list of recipes, we
calculted the five ingredients that appeared the most in each cuisine type. For example, in North American recipes, the top five ingredients were butter, eggs, wheat, onions, and milk. In Western Europe,
the top five used ingredients were also butter, eggs, wheat, onions, and milk. This would yield a final set of five ingredients: butter, eggs, wheat, onions, and milk. However, once Northern European is
added, the set of top used ingredients increases to include cream (Northern Europeans fourth most used ingredient). This process was done for 11 total cuisine types and yielded a final set of 19 different
ingredients. The graphs below all show each cuisine type and the rankings of this set of 19 ingredients in each cuisine type. Furthermore, each graph highlights an interesting trend in the ingredient rankings
across all cuisines. </p>
<h2>Dairy</h2>
<svg id = "graph0" width="3000" height="1700">
<g id = 'barplot0'></g>
<g id = 'icons0'></g>
</svg>
<br/>
<br />
<h2>Oils</h2>
<svg id = "graph1" width="3000" height="1700">
<g id = 'barplot1'></g>
<g id = 'icons1'></g>
</svg>
<br/>
<br />
<h2>Spices</h2>
<svg id = "graph2" width="3000" height="1700">
<g id = 'barplot2'></g>
<g id = 'icons2'></g>
</svg>
<br/>
<br />
<h2>Carbohydates</h2>
<svg id = "graph3" width="3000" height="1700">
<g id = 'barplot3'></g>
<g id = 'icons3'></g>
</svg>
<br/>
<script>
function returnFirstXKeys (object, x = 10, index = []) {
// Initilize a keys variable
// Object.keys returns an array of keys in string type
var keys = Object.keys(object);
// Checks if the first ten keys exists in the index array
// If not, the key will be pushed into the index array
for (var i = 0; i < x; i++) {
if(!index.find(function(element){return element === keys[i]})) {
index.push(keys[i]);
}
}
// Returns index (if needed)
return index;
}
function countByCuisineType (data) {
// Initilize cuisineTypeIndex object to store cuisineType count
cuisineTypeIndex = {};
// Checks if the cuisineType exists in the cuisineTypeIndex object
// If not, it will set the cuisineType count to 1
// Otherwise, it will add 1 to the count
data.forEach(function(recipe){
if(cuisineTypeIndex[recipe['cuisineType']] === undefined) {
cuisineTypeIndex[recipe['cuisineType']] = 1;
} else {
cuisineTypeIndex[recipe['cuisineType']] += 1;
}
});
return cuisineTypeIndex;
}
function filterByCuisineType (data, type) {
// Checks if object key "cuisine" matches filtered specified type
// Returns array of recipe objects filtered by specified type
return data.filter(function(row) {
return row['cuisineType'] === type;
});
}
function countIngredients (data) {
// initilize ingredientsIndex object to store ingredient count
var ingredientsIndex = {};
// Checks if the ingredient exists in the ingredientsIndex object
// If not, it will set the ingredient count to 1
// Otherwise, it will add 1 to the count
for (var i = 0; i < data.length; i++) {
data[i].ingredients.forEach(function(ingredient) {
if(ingredientsIndex[ingredient] === undefined) {
ingredientsIndex[ingredient] = 1;
} else {
ingredientsIndex[ingredient] += 1;
}
})
}
// return ingredientsIndex after ingredient count sorted by descending order
return sortObjectValuesByDescendingOrder(ingredientsIndex);
}
function sortObjectValuesByDescendingOrder(obj) {
var sortedObj = {};
var sortable = [];
// Pushes object keys and values into an array (to be sorted later)
for (var key in obj) {
sortable.push([key, obj[key]]);
}
// Sorts objects by descending order
sortable.sort(function(a, b) {
return b[1] - a[1];
});
// Moves keys and values pairs into an object
sortable.forEach(function(item) {
sortedObj[item[0]] = item[1];
});
// Returns object organized by descending order of values
return sortedObj;
}
function convertObjValuesToPercentages (obj, total) {
// Initilize new object (as not to change original object)
var newObj = {};
// Do the math
for (var key in obj) {
newObj[key] = obj[key] / total * 100;
}
// Return new object
return newObj;
}
var svg = d3.select('#graph');
var cuisine_types = ['North American', 'Western European', 'Northern European','Eastern European', 'Southern European', 'Latin American', 'Middle Eastern', 'African', 'South Asian', 'Southeast Asian', 'East Asian',];
var x_scale = d3.scaleLinear().domain([0,0.9]).range([0,180]);
//creates axis
var x_axis = d3.axisTop(x_scale).ticks(5).tickFormat(d3.format(".0%"));
//import cuisines.csv
d3.text("cuisines.csv", function(error, data){
rawData = d3.csvParseRows(data, function(row) {
var ingredients = [];
// Filter out ingredient columns that are undefined
for (var i = 1; i < row.length; i++) {
ingredients.push(row[i]);
if (row[i+1] === '') { break;}
}
return {
cuisineType: row[0],
ingredients: ingredients
};
});
var processedData = [];
var topIngredientsIndex = [];
var cuisineTypesByCount = countByCuisineType(rawData);
for (var cuisineType in cuisineTypesByCount) {
var cuisineTypeCount = cuisineTypesByCount[cuisineType];
var ingredientsByCount = countIngredients(filterByCuisineType(rawData, cuisineType));
var ingredientsByPercentage = convertObjValuesToPercentages(ingredientsByCount, cuisineTypeCount);
processedData.push({
cuisineType: cuisineType,
totalNumberOfRecipes:cuisineTypeCount,
ingredientsByCount:ingredientsByCount,
ingredientsByPercentage:ingredientsByPercentage
});
returnFirstXKeys(ingredientsByCount, 5, topIngredientsIndex);
}
console.log(processedData);
console.log(topIngredientsIndex);
var cat = [];
cuisine_types.forEach(function(cuisine_type) {
processedData.forEach(function(dataSet) {
if (dataSet.cuisineType === cuisine_type.replace(/\s/g, "")) {
cat.push(dataSet);
}
});
});
//six total groupings
groupings = [{'cream':'cream', 'butter':'butter', 'milk':'milk'}, {'olive_oil':'olive_oil', 'sesame_oil':'sesame_oil', 'butter':'butter', 'vegetable_oil':'vegetable_oil'},
{'cumin':'cumin', 'garlic':'garlic', 'cayenne':'cayenne', 'soy_sauce':'soy_sauce', 'scallion':'scallion', 'turmeric':'turmeric'},
{'corn':'corn', 'rice':'rice', 'wheat':'wheat'}];
groupings.forEach(function(d, i){
create_graph(cat, topIngredientsIndex, d, x_axis, x_scale, i);
});
});
</script>
</body>
</html>