2e:null 2f:["$","title",null,{"children":"A tasteful tour of the world | Vy | Observable"}] 34:T46b,tableau_heatmap = html`

`35:T492,tableau_summary = html`

`36:T69c,**T1. Compare the top 5 most used ingredients in each cuisine (Compare, Extremes)** Let's look at the most used ingredients in each cuisine, basing only on how often an ingredient appears in a cuisine's recipes **How?** * Separated vertically (by ingredient), aligned horizontally (by % of recipes) * Marks: Line * Channels: * Length of lines/bars represent the percentage of recipes and are aligned on a common scale -> Most effective for ordered attributes * Side-by-side views of all cuisines allow for easy comparison between cuisines **Insights** * Soy sauce and fish sauce are the most common ingredients in East and Southeast Asian cuisines (with the exception of Filipino), while salt is the most common elsewhere. Regardless, salt is still common in Asian cuisines, standing #3 in Chinese, Thai, and Vietnamese and #2 in Japanese. Unsurprisingly as salt is an ubiquitous flavor booster in most savory food * Vegetable oil, sesame oil in East/Southeast Asian cuisines seem to be counterparts of olive oil in Western cuisines * All-purpose flour and butter are among the top ingredients in most Northwestern European cuisines like British, French, Irish (and even Southern US) * Spice-driven cuisines like Indian and Moroccan have 2 spices within the top 5, including garam masala and ground cumin, which probably explains their distinct flavorings in their dishes * Moroccan cuisine is one that incorporates from many other cultural influences - Berber, Arab, Jewish, French, Indian, and Mediterranean to name a few - and we can see some of those other cuisines' most representative ingredients included in Morrocco's top ingredients as well37:T1398,barchart = { return function barChart() { let svg, margin = { top: 20, right: 40, bottom: 40, left: 35 }, width = 50, height = 50; const y = d3.scaleBand().padding(0.2), x = d3.scaleLinear(); function chart(selection) { selection.each(function(data) { y.domain(data.map(d => d.ingredient)).rangeRound([0, height - margin.top - margin.right]); x.domain([0, d3.max(data, d => d.recipes_percentage)]).rangeRound([0, width - margin.left - margin.right]); svg = d3 .select(this) .selectAll("svg") .data([data]); // if the svg exists reuse it, otherwise create it let svgEnter = svg.enter().append("svg"); let gEnter = svgEnter.append("g"); gEnter .append("text") .attr("text-anchor", "start") .attr("startOffset", "100%") .text(data.map(d => d.cuisine)[0]) .style("font-size", "16px") .style("font-weight", 600) .attr( "transform", "translate(0, -5)" ); gEnter .append("text") .attr("text-anchor", "start") .attr("startOffset", "100%") .attr( "transform", "translate(10, 170)" ) .style("font-size", "12px") .text("Percentage of recipes") .attr("fill", "black"); gEnter .append("g") .attr("class", "axis axis--x") .attr( "transform", "translate(0," + (height - margin.top - margin.bottom) + ")" ); gEnter .append("g") .attr("class", "axis axis--y") // .append("text") // .attr("transform", "rotate(-90)") // .attr("y", 6) // .attr("dy", "0.71em") // .attr("text-anchor", "end") // .text("Frequency"); let g = svgEnter .merge(svg) .attr("width", width) .attr("height", height) .select("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); const tickStep = d3.max(data, d => d.recipes_percentage) - d3.min(data, d => d.recipes_percentage); const step = Math.ceil(tickStep / 3) * 3; gEnter.select(".axis--x") .call(d3.axisBottom(x) // .tickSizeInner(4) // .tickSizeOuter((interval,i) => { // return i % 4 !== 0 ? 0 : 4; // }) // .tickFormat((interval,i) => { // return i % 4 !== 0 ? " ": interval * 100 + "%"; // }) // .ticks(3, "%") .ticks(3, "%") // .tickFormat((x, i) => { // return x > 1 ? d3.format(",")(x): x * 100 + "%"; // }) // .tickFormat(d => d * 100 + "%") // .tickValues([0, 0.25, 0.5]) // .tickValues( // d3.range( // 0, // d3.max(data, d => d.recipes_percentage) + step , // step) // ) ) .call(g => g.select(".domain").remove()) // gEnter.select(".axis--y").call(d3.axisLeft(y).tickSizeInner(0)).call(g => g.select(".domain").remove()); let bars = gEnter .merge(g) .selectAll(".bar") .data(data); bars .enter() .append("rect") .merge(bars) .attr("class", "bar") // .attr("fill", "#fddaec") .attr("fill", "#d4dc9a") .attr("x", function(d) { return x(d.recipes_percentage); }) .attr("y", function(d) { return y(d.ingredient); }) .attr("x", 0) .attr("y", d => y(d.ingredient)) .attr("width", d => x(d.recipes_percentage)) .attr("height", y.bandwidth()); bars .enter() .append("text") .merge(bars) .attr("class", "label") //y position of the label is halfway down the bar .attr("y", function (d) { return y(d.ingredient) + y.bandwidth() / 2 + 4; }) //x position is 3 pixels to the right of the bar .attr("x", function (d) { return 6; }) .text(function (d) { return d.ingredient; }) .style("font-size", "14px"); bars.exit().remove(); }); } chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; return chart; }; }38:T7f9,**T2. Compare the top 5 most cuisine-specific ingredients in each cuisine (Compare, Extremes)** If the previous task looks at more general ingredients that are needed as a base for each cuisine, this task explores the ingredients that give each cuisine its distinctive taste compared to other cuisines. The distinct ingredient usage is calculated by dividing the ingredient usage % in one cuisine by the ingredient usage % in all other cuisines. **How?** * Separated vertically (by ingredient), aligned horizontally (by % of usage vs others) * Marks: Line * Channels: * Length of lines/bars represent the percentage of usage vs other cuisines and are aligned on a common scale -> Most effective for ordered attributes **Insights** * If not familiar with Korean cuisine, Gochujang, Korean chile flakes (gochugaru), and even kimchi might sound foreign to some, however they are some of the pillars of Korean dishes, with Gochugaru used 1063x more than other cuisines * On the other hand, while fresh mozzarella might be a well-known ingredient in a lot of places, it's still the most unique to Italian cuisine, being used 194x more than any other cuisines * For Vietnamese, fish sauce actually reappears in alternative names "vietnamese fish sauce" and "nuoc mam" - which simply means the same thing in Vietnamese. The best fish sauce is said to come from Phú Quốc island and Phan Thiết, Vietnam, due to the region’s sea salt and perfect climate during fermentation * Four out of five most unique ingredients in Irish cuisine are alcoholic ingredients. Alcohol is probably used to punch up simple ingredients and dishes like beef stews and slow-cooked meat (most likely with their favorite Guinness beer) * Cooking with alcohol is also common elsewhere, such as Chinese cuisine with Chinese rice wine and Shaoxing wine * It would be interesting to see what the US as a whole would have as its defining ingredients, given its cuisine is more so a melting pot of so many other cuisines in my opinion39:Te9f,barchart2 = { return function barChart2() { let svg, margin = { top: 20, right: 40, bottom: 40, left: 35 }, width = 50, height = 50; const y = d3.scaleBand().padding(0.2), x = d3.scaleLinear(); function chart(selection) { selection.each(function(data) { y.domain(data.map(d => d.ingredient)).rangeRound([0, height - margin.top - margin.right]); x.domain([0, d3.max(data, d => d.uniqueness)]).rangeRound([0, width - margin.left - margin.right]); svg = d3 .select(this) .selectAll("svg") .data([data]); // if the svg exists reuse it, otherwise create it let svgEnter = svg.enter().append("svg"); let gEnter = svgEnter.append("g"); gEnter .append("text") .attr("text-anchor", "start") .attr("startOffset", "100%") .text(data.map(d => d.cuisine)[0]) .style("font-size", "16px") .style("font-weight", 600) .attr( "transform", "translate(0, -5)" ); gEnter .append("g") .attr("class", "axis axis--x") .attr( "transform", "translate(0," + (height - margin.top - margin.bottom) + ")" ); gEnter .append("text") .attr("text-anchor", "start") .attr("startOffset", "100%") .attr( "transform", "translate(5, 170)" ) .style("font-size", "12px") .text("Usage vs. other cuisines") .attr("fill", "black"); gEnter .append("g") .attr("class", "axis axis--y") let g = svgEnter .merge(svg) .attr("width", width) .attr("height", height) .select("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); const tickStep = d3.max(data, d => d.uniqueness) - d3.min(data, d => d.uniqueness); const step = Math.ceil(tickStep / 3) * 3; gEnter.select(".axis--x") .call(d3.axisBottom(x) .ticks(3) ) .call(g => g.select(".domain").remove()) let bars = gEnter .merge(g) .selectAll(".bar") .data(data); bars .enter() .append("rect") .merge(bars) .attr("class", "bar") .attr("fill", "#f2bdc5") //"#dcd29a" .attr("x", function(d) { return x(d.uniqueness); }) .attr("y", function(d) { return y(d.ingredient); }) .attr("x", 0) .attr("y", d => y(d.ingredient)) .attr("width", d => x(d.uniqueness)) .attr("height", y.bandwidth()); bars .enter() .append("text") .merge(bars) .attr("class", "label") //y position of the label is halfway down the bar .attr("y", function (d) { return y(d.ingredient) + y.bandwidth() / 2 + 4; }) //x position is 3 pixels to the right of the bar .attr("x", function (d) { return 6; }) .text(function (d) { return d.ingredient; }) .style("font-size", "14px"); bars.exit().remove(); }); } chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; return chart; }; }3a:T4d2,**Bonus task - Compare the distribution of ingredients that are both common and unique in each cuisine (Compare, Distribution)** Combining the previous two tasks, gives us a view of which ingredients are both commonly used and unique in each cuisine. The interactive graph below allows you to select a specific cuisine to explore at a time. The closer a dot (ingredient) is to the dividing line (value 1 on the x-axis), the more universal it is in terms of usage within all other cuisines. The more a dot is to the up-right of the graph, the more commonly used AND unique it is to the current cuisine. **How?** * Express values * Marks: Point * Channels: Vertical & horizontal positions * Manipulation: Selection (of cuisines) **Insights** * Consistent with the previous charts, salt appears to be both common and universal in many cuisines * On the other hand, salt-alternatives soy sauce and fish sauce that are common in some Asian cuisines are not as universal in others * French cuisine seems to have more ingredients universally used across other cuisines. A possible guess is because of how French cuisine and cooking techniques are considered a standard in many culinary curricula worldwide3b:T1b3f,scatterplot = { const margin = { left: 40, top: 10, bottom: 20, right: 150 }; const height = 500; let x = d3 .scaleLog() .base(10) .domain(d3.extent(ingredients_by_recipes_and_uniqueness[cuisines.findIndex(item => { return item === cuisineSelection })], d => d.uniqueness)) .range([0, width - margin.left - margin.right]) .nice() let y = d3 .scaleLinear() .domain(d3.extent(ingredients_by_recipes_and_uniqueness[cuisines.findIndex(item => { return item === cuisineSelection })], d => d.recipes_percentage)) .range([height - margin.top - margin.bottom, 0]) .nice() let xAxis = (g, scale) => g .attr('transform', `translate(${margin.left}, ${height - margin.top - margin.bottom})`) // add axis .style("font-size", "14px") .call(d3 .axisBottom(scale) .ticks(5) .tickFormat((x, i) => { return x == 1 ? "Same usage" : x; }) ) // remove baseline .call(g => g.select('.domain').remove()) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -height + margin.top + margin.bottom) .attr('y2', 0)) let yAxis = (g, scale) => g .attr('transform', `translate(${margin.left}, 0)`) .style("font-size", "14px") .call(d3.axisLeft(scale).tickFormat(y => y * 100 + "%")) // remove baseline .call(g => g.select('.domain').remove()) // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', width - margin.left - margin.right)) // set up const svg = d3.create('svg') // add more margin to the right to account for the tooltips .attr('width', width + margin.left + margin.right + 100) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // axes g.append("g").call(xAxis, x); g.append("g").call(yAxis, y); g.selectAll("rect") .data(ingredients_by_recipes_and_uniqueness[cuisines.findIndex(item => { return item === cuisineSelection })]) .join("rect") .attr("x", d => x(1) + margin.left) .attr("width", 1) // .attr("width", d => width -x(d.occurence)) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#706b4f") // g.selectAll("text") // .data(ingredients_by_recipes_and_uniqueness[cuisines.findIndex(item => { return item === cuisineSelection })]) // .join("text") // // .attr("y", -25) // // .attr("x", d => x(1) + margin.left) // .attr('fill', '#706b4f') // .style("font-size", "20px") // .attr('font-weight', 600) // .text("here") // draw points const radius = 5; g.selectAll('circle') .data(ingredients_by_recipes_and_uniqueness[cuisines.findIndex(item => { return item === cuisineSelection })]) .join('circle') .attr('cx', d => x(d.uniqueness) + margin.left) .attr('cy', d => y(d.recipes_percentage)) .attr('fill', "#fed9a6") .attr('r', radius) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // x label g.append('text') .attr('x', (width - margin.left - margin.right) / 2) .attr('y', height + 15) .attr('fill', 'black') .style("font-size", "18px") .attr('font-weight', 600) .attr('text-anchor', 'middle') .text('Usage vs. other cuisines') // y label g.append('text') .attr('x', -120) .attr('y', -15) .attr("transform", "rotate(-90)") .attr('fill', 'black') .style("font-size", "18px") .attr('font-weight', 600) .attr('text-anchor', 'end') .text("% of recipes in this cuisine") // left side label g.append('text') .attr('x', width - margin.right - 10) .attr('y', height / 2) .attr('fill', '#706b4f') .style("font-size", "18px") .attr('font-weight', 600) .attr('text-anchor', 'end') .text("→ Ingredients more unique to this cuisine") // right side label g.append('text') .attr('x', margin.left + 10) .attr('y', height / 2) .attr('fill', '#706b4f') .style("font-size", "18px") .attr('font-weight', 600) .attr('text-anchor', 'start') .text("Ingredients more common in other cuisines ←") // create tooltip const tooltip = g.append('g') .attr('visibility', 'hidden'); const tooltipHeight = 24; // add a rectangle to the tooltip to serve as a background const tooltipRect = tooltip.append('rect') .attr('fill', '#f2bdc5') .attr('stroke', 'black') .attr('rx', 5) .attr('height', tooltipHeight); // add a text element to the tooltip to contain the label const tooltipText = tooltip .append('text') .attr('fill', 'black') .attr('font-size', "16px") .attr('font-weight', 600) .attr('y', 5) // offset it from the edge of the rectangle .attr('x', 6) // offset it from the edge of the rectangle .attr('dominant-baseline', 'hanging') // handle hovering over a circle function mouseEnter(event, d) { // make the circle larger d3.select(this) // .attr('r', radius * 2) .attr('stroke', 'black') .attr('fill', '#f2bdc5') .raise(); // update the label's text and get its width tooltipText.text(`${d.ingredient} (${d.uniqueness.toFixed(2)}x)`); const labelWidth = tooltipText.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label, plus some extra space tooltipRect.attr('width', labelWidth + 10); // move the tooltip to the position of the circle (offset by a bit) // and make the tooltip visible const xPos = x(d.uniqueness) + margin.left + radius * 3; const yPos = y(d.recipes_percentage) - tooltipHeight / 2; tooltip.attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving a circle function mouseLeave(event, d) { // reset the size of the circle d3.select(this) .attr('stroke', 'none') .attr('fill', "#fed9a6") .lower(); // make the tooltip invisible tooltip .attr('visibility', 'hidden'); } return svg.node(); }3c:[{"id":"ddd553ed1ac014392a07489de402be0bea1058e26607d9ceac880be9aa92138ad1b016fa30c828758c7aa795b1f3f2289eb55be71ac270954ac444e06a056a11","href":"https://static.observableusercontent.com/files/ddd553ed1ac014392a07489de402be0bea1058e26607d9ceac880be9aa92138ad1b016fa30c828758c7aa795b1f3f2289eb55be71ac270954ac444e06a056a11","name":"train.json","type":"application/json","lastModified":1646988227374.993,"size":12415067},{"id":"ff8399e9b52a652ccf7f3837d35c262d63c135ebe7d9c156f6d68d914bec876cc58801f890416de2b14e579984087110b38af5f5165937726531a9b8eabacffc","href":"https://static.observableusercontent.com/files/ff8399e9b52a652ccf7f3837d35c262d63c135ebe7d9c156f6d68d914bec876cc58801f890416de2b14e579984087110b38af5f5165937726531a9b8eabacffc","name":"most_unique_ingredients.json","type":"application/json","lastModified":1647383202609.308,"size":8329},{"id":"f130bb916389ab56b95811ad9f6ffb737b26e4b96203b1befe1b268ebdc2221508880d297aed8c5ba2b1d0d91415bb378ce08f74aa5a0222754532a293e7495e","href":"https://static.observableusercontent.com/files/f130bb916389ab56b95811ad9f6ffb737b26e4b96203b1befe1b268ebdc2221508880d297aed8c5ba2b1d0d91415bb378ce08f74aa5a0222754532a293e7495e","name":"num_recipes_by_cuisine.json","type":"application/json","lastModified":1647384593587.285,"size":299},{"id":"4822c24f914c83ba9bfa09db93e2c0352fb9d4fe9663257728d80edee67b2a210f15f38407792b1d4339fa362546a3eb776d3761e12b7f434159f1c593b2135d","href":"https://static.observableusercontent.com/files/4822c24f914c83ba9bfa09db93e2c0352fb9d4fe9663257728d80edee67b2a210f15f38407792b1d4339fa362546a3eb776d3761e12b7f434159f1c593b2135d","name":"most_used_ingredients.json","type":"application/json","lastModified":1647383202795.27,"size":8715},{"id":"82bf9ea47eb54a913d671558ac86dd7fd9c8c6cca98ac421f57762c06f2ae00679e838566650e62da5e5ad15665ddae7968f3a700d85c1c112329f298b3c9d22","href":"https://static.observableusercontent.com/files/82bf9ea47eb54a913d671558ac86dd7fd9c8c6cca98ac421f57762c06f2ae00679e838566650e62da5e5ad15665ddae7968f3a700d85c1c112329f298b3c9d22","name":"ingredients_by_recipes_and_uniqueness.json","type":"application/json","lastModified":1647383204846.945,"size":3354925},{"id":"3447c4983a88a57477342a1fa3f39f0e8950872a8587bb3e18cdef1227b27d953ac88d4884013796d5f4be6ad95b5e718c9cae4a671bc3059124150dddbfe9a2","href":"https://static.observableusercontent.com/files/3447c4983a88a57477342a1fa3f39f0e8950872a8587bb3e18cdef1227b27d953ac88d4884013796d5f4be6ad95b5e718c9cae4a671bc3059124150dddbfe9a2","name":"top_50_ingredients.csv","type":"text/csv","lastModified":1647556412801.117,"size":921}] 32:{"id":"141d46ccddfb6298","slug":"a-tasteful-tour-of-the-world","title":"A tasteful tour of the world","thumbnail":"390c7dc0703f460e6508cb12e990d88ccc24acb9a02e0f5e5d3164b5ac4d6df4","access_level":"public","create_time":"$D2022-03-11T08:41:10.745Z","update_time":"$D2022-05-09T20:02:21.698Z","view_time":null,"first_public_time":"$D2022-03-19T08:43:02.863Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"70a28fc0926865c6","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":"starter_2024"},"version":3974,"publish_version":3974,"role":null,"authored":false,"authors":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null}],"members":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A tasteful tour of the world","cells":[{"id":0,"value":"# A tasteful tour of the world","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3425,"value":"* *Coursework for NEU's [Data Visualization course](https://johnguerra.co/classes/data_visualization_spring_2022/) by John Alexis Guerra Gómez*\n* [Data source](https://www.kaggle.com/datasets/kaggle/recipe-ingredients-dataset)\n* [Tweet](https://twitter.com/anthuriumcryst/status/1505105567911608320)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3526,"value":"As a foodie and cooking enthusiast, I'm always curious about how different flavor combinations work together when creating a dish. While fusion food is pretty trendy these days, I still find the original and defining flavors of each cuisine around the world fascinating, as they represent a piece of its host country's identities and heritage that set each culture apart.\n\nIn this notebook, I will walk you through a yummy tour across different cuisines around the world to discover what flavors they represent. The data is available on Kaggle and provided by Yummly, and contains 39,774 different recipes from 20 cuisines. This amounts to a whopping total of 6,714 unique ingredients. \n\nThe goal is to learn and apply D3.js concepts to visualize and extract insights, by recreating visualizations from this [article by Nathan Yau](https://flowingdata.com/2018/09/18/cuisine-ingredients/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3400,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3401,"value":"{\n tableau_heatmap;\n var divElement = document.getElementById('viz1647559064697'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='627px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='627px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3922,"value":"Something worth calling out is that not all cuisines are equally represented in the dataset (more than 7,000 Italian recipes vs. less than 500 Brazilian recipes). As a result, a better approach to comparing cuisines would probably be to add a weight to each recipe to ensure each cuisine has an equal impact on an aggregation. For the purpose of this notebook, however, the data and aggregation were kept as is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3348,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3349,"value":"{\n tableau_summary;\nvar divElement = document.getElementById('viz1647559318569'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='527px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='527px';} else { vizElement.style.width='100%';vizElement.style.height='727px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3429,"value":"## Hypotheses\n\n* **(Selected)** **Possible insight 1:** Soy sauce and fish sauce are the most common ingredients in East and Southeast Asian cuisines, while salt is the most common in other cuisines.\n * For this, I can simply calculate the number of ingredients (quant) that appear in each cuisine (categorical). Each cuisine and its top ingredients can be represented with a bar chart.\n \n* **(Selected)** **Possible insight 2:** Gochujang base is used 1,000 more times in Korean cuisines than any other cuisines.\n * For this, I will need to calculate the relative usage of each ingredient in each cuisine compared to others. Specifically, that means dividing the ingredient usage % in one cuisine by the ingredient usage % in other cuisines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3436,"value":"## Abstraction\n\n### Users\n* Foodies, culture and culinary enthusiasts\n\n### Data\n* Data source: https://www.kaggle.com/kaggle/recipe-ingredients-dataset\n* Dataset type: Table\n* Data availability: Static\n\n Each table row represents a recipe.\n \n **Attributes:**\n * *cuisine*: cuisine of the recipe\n * Type: Categorical\n * *ingredients*: list of ingredients used in the recipe\n * Type: Categorical\n \n **Derived attributes:**\n * *recipes_percentage*:\n * Type: Ordered - Quantitative\n * Orientation: Sequential\n * *uniqueness*:\n * Type: Ordered - Quantitative\n * Orientation: Sequential\n * Other aggregated attributes include *count of recipes per cuisine* and *total occurence of each ingredients* (see data processing part for more details)\n * Type: Ordered - Quantitative\n * Orientation: Sequential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3366,"value":"## Most used ingredients per cuisine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3493,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"{\n let div = html`

`;\n let chart = barchart().width(200).height(200);\n\n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(most_used_ingredients)\n\t.enter().append(\"div\")\n\t\t.call(chart)\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3370,"value":"## Most cuisine-specific ingredients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3551,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1632,"value":"{\n let div = html`

`;\n let chart = barchart2().width(200).height(200);\n \n d3.select(div)\n\t.selectAll(\"svg\")\n\t.data(most_unique_ingredients)\n\t.enter().append(\"div\")\n\t\t.call(chart)\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2953,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3642,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3354,"value":"### Recipe usage in a cuisine vs. others","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2748,"value":"viewof cuisineSelection = {\n const cuisineSelection = select({\n options: cuisines,\n // title: \"Select a cuisine\",\n value: \"brazilian\"\n });\n cuisineSelection.input.style.fontSize = \"18px\";\n cuisineSelection.input.style.fontWeight = \"bold\";\n return cuisineSelection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2097,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3439,"value":"## Data Processing\n\nTo increase speed, data wrangling was done with Javascript on a separate Observable notebook and the resulted data was imported back to the current notebook.\n\nTo see the detailed process: https://observablehq.com/d/1beb00e9189d05ee/safe\n\nOverviews of exported data below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3446,"value":"**For D3 charts**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2885,"value":"viewof all_cuisines_dataView = aq.from(most_used_ingredients[0]).view() // also used in the tableau heatmap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2884,"value":"viewof all_cuisines_specific_dataView = aq.from(most_unique_ingredients[0]).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof all_cuisines_compare_dataView = aq.from(ingredients_by_recipes_and_uniqueness[0]).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3455,"value":"**For Tableau charts**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3464,"value":"viewof num_recipes_by_cuisine_dataView = aq.from(num_recipes_by_cuisine).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3470,"value":"viewof top_50_ingredients_dataView = aq.from(top_50_ingredients).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3476,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2940,"value":"most_used_ingredients = FileAttachment(\"most_used_ingredients.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2941,"value":"most_unique_ingredients = FileAttachment(\"most_unique_ingredients.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2938,"value":"ingredients_by_recipes_and_uniqueness = FileAttachment(\"ingredients_by_recipes_and_uniqueness.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2992,"value":"num_recipes_by_cuisine = FileAttachment(\"num_recipes_by_cuisine.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3462,"value":"top_50_ingredients =FileAttachment(\"top_50_ingredients.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2855,"value":"cuisines = [\n \"brazilian\",\n \"british\",\n \"cajun_creole\",\n \"chinese\",\n \"filipino\",\n \"french\",\n \"greek\",\n \"indian\",\n \"irish\",\n \"italian\",\n \"jamaican\",\n \"japanese\",\n \"korean\",\n \"mexican\",\n \"moroccan\",\n \"russian\",\n \"southern_us\",\n \"spanish\",\n \"thai\",\n \"vietnamese\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1923,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { navio } from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"barchartStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"