31:T580,{ const myDiv = html`

`; var data = foodGroupFilter2.map((cat) => ({ name: cat, type: "scatter", mode: "markers", x: nutrition_filtered .filter((r) => r.RecipeCategory == cat) .map((n) => n[axisSelections["xMeasure"]]), y: nutrition_filtered .filter((r) => r.RecipeCategory == cat) .map((n) => n[axisSelections["yMeasure"]]), label: nutrition_filtered .filter((r) => r.RecipeCategory == cat) .map((n) => n.label), hovertext: nutrition_filtered .filter((r) => r.RecipeCategory == cat) .map((n) => n.label), hoverinfo: "text+x+y", marker: { symbol: 100, color: color(cat), size: nutrition_filtered .filter((r) => r.RecipeCategory == cat) .map((n) => 10 * n[axisSelections["zMeasure"]]), opacity: 0.8, line: { width: 1 } } })); var layout = { hovermode: "closest", xaxis: { showgrid: false, zeroline: true, visible: true, title: axisSelections["xMeasure"], range: [0, 1] }, yaxis: { showgrid: false, zeroline: true, visible: true, title: axisSelections["yMeasure"], range: [0, 1] }, showlegend: true, width: width, height: width, paper_bgcolor: "white" }; Plotly.newPlot(myDiv, data, layout); return myDiv; }32:T46e,{ const myDiv = html`

`; Plotly.newPlot(myDiv, [{ type: 'scatterternary', mode: 'markers', a: nutrition2.map(n=>n.FatContent), b: nutrition2.map(n=>n.ProteinContent), c: nutrition2.map(n=>n.CarbohydrateContent), text: nutrition2.map(n=>n.label), label:nutrition2.map(n=>n.label), marker: { symbol: 100, color: nutrition2.map(n=>color(n.RecipeCategory)), size: nutrition2.map(n=>n.nutritionalDensity/5), opacity: 0.5, line: {width: 1} }, }], { showlegend: false, width: width, height:width, ternary: { sum: 1, aaxis: makeAxis('A:Fat', 0), baxis: makeAxis('
B:Protein', 45), caxis: makeAxis('
C:Carbs', -45), bgcolor: 'white' }, paper_bgcolor: 'white', }); function makeAxis(title, tickangle) { return { title: title, titlefont: {size:20}, tickangle: tickangle, tickfont: {size:15}, tickcolor: 'rgba(0,0,0,0)', ticklen: 5, showline: true, showgrid: true }; } return myDiv; }33:T5c8,function addBubbleLegend(svg){ var calorymin=d3.min(recipes_density.map(d=>d[axisSelections.zMeasure])); var calorymax=d3.max(recipes_density.map(d=>d[axisSelections.zMeasure])); // The scale you use for bubble size var size = d3.scaleSqrt() .domain([calorymin, calorymax]) // What's in the data, let's say it is percentage .range([1, 50]) // Size in pixel // Add legend: circles var valuesToShow = [d3.format(".1f")(calorymax/4), d3.format(".1f")(calorymax/2), d3.format(".1f")(calorymax)] var xCircle = 500 var xLabel_ = 575 var yCircle = 110 svg .selectAll("legend") .data(valuesToShow) .enter() .append("circle") .attr("cx", xCircle) .attr("cy", function(d){ return yCircle - size(d) } ) .attr("r", function(d){ return size(d) }) .style("fill", "none") .attr("stroke", "black") // Add legend: segments svg .selectAll("legend") .data(valuesToShow) .enter() .append("line") .attr('x1', function(d){ return xCircle + size(d) } ) .attr('x2', xLabel_) .attr('y1', function(d){ return yCircle - size(d) } ) .attr('y2', function(d){ return yCircle - size(d) } ) .attr('stroke', 'black') .style('stroke-dasharray', ('2,2')) // Add legend: labels svg .selectAll("legend") .data(valuesToShow) .enter() .append("text") .attr('x', xLabel_) .attr('y', function(d){ return yCircle - size(d) } ) .text( function(d){ return d } ) .style("font-size", 10) .attr('alignment-baseline', 'middle') }34:[] 2f:{"title":"Food.com Recipe Nutrition Explorer","cells":[{"id":0,"value":"md`# Food.com Recipe Nutrition Explorer\n\nThese interactive visualizations let you explore the nutrition content of the Food.com recipe dataset available at Kaggle https://www.kaggle.com/irkaal/foodcom-recipes-and-reviews.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"viewof filter2 = text({\n placeholder: 'Try \"brain\" or \"raw\"',\n title: \"Pre-Filter by Recipe Name\",\n description: \"Supports Regular Expressions\",\n value: \"health|savor|decad|delic|flavo\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"md`## Scatter Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"md`This scatter plot is a **simple way to search** the database. \n\nIt is possible to arrange each recipe on a 2D plane defined by the X and Y axes selected on the dropdowns below. \n\nIn order to visualize a third dimension, the size of the bubble associated to each recipe is defined to be proportional to a user selected nutritional feature.\n\n**Some Interesting Discoveries:**\n- One-Dish meals and breakfast recipes cluster in different locations of the Carb vs Fat plane.\n- Scaling the bubbles by Sugar content shows that most breakfast recipes are high in sugars.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"viewof axisSelections = columns({\n xMeasure : select({\n title: \"X Axis\",\n description: \"Pick X Axis Variable\",\n options: nutritionalCats,\n value: \"FatContent\" \n}),\n yMeasure : select({\n title: \"Y Axis\",\n description: \"Pick Y Axis Variable\",\n options: nutritionalCats,\n value: \"CarbohydrateContent\"\n})\n,\n zMeasure : select({\n title: \"Bubble Size\",\n description: \"Pick Bubble Scaling Variable\",\n options: nutritionalCats,\n value: \"ProteinContent\"\n})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"md`**Bubble Scale Filter**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"viewof zMeasureFilter = rangeSlider(nutrition.map((n) => n[axisSelections[\"zMeasure\"]]),n => n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"md`## Ternary Plot\n\nThe ternary interactive plot below shows the proportion of fat, protein and carbohydrate content for each of the recipes in the food.com dataset obtained from https://www.kaggle.com/irkaal/foodcom-recipes-and-reviews. \n\nIt allows quick search of **balanced** and **highly nutritious** recipes given a text query such as 'chicken', 'healthy', 'raw','liver', etc.\n\n- A perfectly balanced recipe (equal caloric contributions from fat, protein and carbs producing a 1:1:1 nutritional ratio) will be displayed in the center of the diagram. \n\n- Marker size indicates nutritional density which is proportional to calories per serving.\n\n*This visualization was inspired by Self magazine's caloric ratio pyramid (https://nutritiondata.self.com/help/analysis-help#cp-pyramid)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"swatches({color})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"swatches({\n color: d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"viewof foodGroupFilter2 = checkbox({\n title: \"Recipe Categories\",\n options: topCategories.map(d=>d.key),\n //value: [\"Asian\",\"Mexican\",\"European\"],\n //value: [\"Beverages\",\"Smoothies\"],\n //value: [\"Sauces\"],\n //value: [\"Meat\", \"Breads\"],\n value: [\"Breakfast\", \"Lunch/Snacks\",\"One Dish Meal\"],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"md`**Nutritional Density Filter**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"viewof nutriFilter = rangeSlider(nutritionalDensity, (n) => n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"recipes=d3.csv(\"https://raw.githubusercontent.com/DoTorr/UCF/main/recipes.csv\",d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"recipesGroupedByCategory = group(recipes).by(d=>d.RecipeCategory).run()","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"nutritionalCats=[\"FatContent\",\"CholesterolContent\",\"SodiumContent\",\"CarbohydrateContent\",\"FiberContent\",\"SugarContent\",\"ProteinContent\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"topCategories = recipesGroupedByCategory.filter(d=>d.values.length>500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"md`# Pre-Filter Data by Text in Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"renderableData2 = recipes.filter(d => d.Name.match(new RegExp(filter2, 'i')) &&\n foodGroupFilter2.includes(d.RecipeCategory));","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"recipes_density = renderableData2.map(d=>({\n RecipeId:d.RecipeId,\n Name:d.Name,\n RecipeCategory:d.RecipeCategory,\n FatContent:d.FatContent/d.RecipeServings,\n CholesterolContent:d.CholesterolContent/d.RecipeServings,\n SodiumContent:d.SodiumContent/d.RecipeServings,\n CarbohydrateContent:d.CarbohydrateContent/d.RecipeServings,\n FiberContent:d.FiberContent/d.RecipeServings,\n SugarContent:d.SugarContent/d.RecipeServings,\n ProteinContent:d.ProteinContent/d.RecipeServings,\n RecipeServings:d.RecipeServings\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`# Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"fatExtent = d3.extent(renderableData2.map(r=>r.FatContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"proteinExtent = d3.extent(renderableData2.map(r=>r.ProteinContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"carbExtent = d3.extent(renderableData2.map(r=>r.CarbohydrateContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"sodiumExtent = d3.extent(renderableData2.map(r=>r.SodiumContent))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1400,"value":"cholesterolExtent = d3.extent(renderableData2.map((r) => r.CholesterolContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"fiberExtent = d3.extent(renderableData2.map((r) => r.FiberContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"sugarExtent = d3.extent(renderableData2.map((r) => r.SugarContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"nutritionSum = renderableData2.map(r=>r.FatContent/fatExtent[1]+r.ProteinContent/proteinExtent[1]+r.CarbohydrateContent/carbExtent[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"nutritionalDensity = renderableData2.filter(d=>d.RecipeServings>=1).map((r,i)=>(r.FatContent+r.ProteinContent+r.CarbohydrateContent)/r.RecipeServings)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"nutrition = nutritionSum.map((s, i) => ({\n label: renderableData2[i].Name,\n FatContent: (renderableData2[i].FatContent / (fatExtent[1] * s)).toPrecision(\n 4\n ),\n ProteinContent: (\n renderableData2[i].ProteinContent /\n (proteinExtent[1] * s)\n ).toPrecision(4),\n CarbohydrateContent: (\n renderableData2[i].CarbohydrateContent /\n (carbExtent[1] * s)\n ).toPrecision(4),\n SodiumContent: (\n renderableData2[i].SodiumContent /\n (sodiumExtent[1] * s)\n ).toPrecision(4),\n SugarContent: (\n renderableData2[i].SugarContent /\n (sugarExtent[1] * s)\n ).toPrecision(4),\n FiberContent: (\n renderableData2[i].FiberContent /\n (fiberExtent[1] * s)\n ).toPrecision(4),\n CholesterolContent: (\n renderableData2[i].CholesterolContent /\n (cholesterolExtent[1] * s)\n ).toPrecision(4),\n RecipeCategory: renderableData2[i].RecipeCategory,\n nutritionalDensity: nutritionalDensity[i]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"nutrition_filtered = nutrition.filter(r=>\n//r[axisSelections[\"xMeasure\"]] < xMeasureFilter.range[1] &\n//r[axisSelections[\"xMeasure\"]] > xMeasureFilter.range[0] &\n//r[axisSelections[\"yMeasure\"]] < yMeasureFilter.range[1] &\n//r[axisSelections[\"yMeasure\"]] > yMeasureFilter.range[0] &\nr[axisSelections[\"zMeasure\"]] < zMeasureFilter.range[1] &\nr[axisSelections[\"zMeasure\"]] > zMeasureFilter.range[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"nutrition2 = nutrition.filter((d,i)=> nutritionalDensity[i]>nutriFilter.range[0] &&\n nutritionalDensity[i] ({d, i}))\n .filter(({d, i}) => {\n if (voronoi2) {\n const p = voronoi2.cellPolygon(i);\n return p && Math.abs(d3.polygonArea(p)) > 20000;\n }\n return false;\n }).slice(0, 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"md`# Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"voronoi2 = {\n try {\n return d3.Delaunay\n .from(renderableData2, d => x2(d[axisSelections.xMeasure]), d => y2(d[axisSelections.yMeasure]))\n .voronoi([margin.left, margin.top, width - margin.right, height - margin.bottom])\n } catch (e) {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"// this fn expects there to be a data object bound to g: {d, c}\n// where d is a datum to label\n// and c is a 2-element array [x, y] to center the label at\nupdateLabel2 = g => {\n g.select('path').attr('d', ({d, c}) => {\n if (c) return `M${c}L${x2(d[axisSelections.xMeasure])},${y2(d[axisSelections.yMeasure])}`;\n return ``;\n });\n g.select('.text')\n .attr('transform', ({d, c}) => {\n if (c) {\n let yOffset = labelSize;\n if (y2(d[axisSelections.yMeasure]) > c[1]) {\n let matches = d.Name.match(/ /g);\n const lineCount = matches ? matches.length + 1 : 1;\n yOffset = -(lineCount - 0.4) * labelSize;\n }\n return `translate(${c[0]}, ${c[1] + yOffset})`\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"// this fn expects there to be a data object bound to g: {d, c}\n// where d is a datum to label\n// and c is a 2-element array [x, y] to center the label at\ninitLabel2 = g => {\n g.append('path').attr('stroke', 'rgba(0,0,0,0.2)');\n const textWrapper = g.append('g')\n .classed('text', true)\n .attr('text-anchor', 'middle')\n .style('font', `${labelSize}px sans-serif`);\n const t = textWrapper.append('text')\n .attr('stroke', 'white')\n .attr('stroke-width', '3px');\n t.selectAll('tspan')\n .data(({d}) => d.Name.split(' '))\n .join('tspan')\n .text(d => d)\n .attr('x', 0)\n .attr('y', (d, i) => i * 1.1 + 'em')\n t.clone(true)\n .attr('stroke', null)\n g.call(updateLabel2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"x2 = d3.scaleLinear()\n .domain(safeZeroExtent2(renderableData2, d => d[axisSelections.xMeasure]))\n .range([margin.left, width - margin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"y2 = d3.scaleLinear()\n .domain(safeZeroExtent2(renderableData2, d => d[axisSelections.yMeasure]))\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"safeZeroExtent2 = (data, key) => {\n let max = d3.max(data, key);\n if (max === 0) {\n max = 1;\n }\n return [0, max];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"xAxisCall = d3.axisBottom()","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"yAxisCall = d3.axisLeft()","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"md`# Plot Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = width * 9 / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"labelSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"margin = ({\n top: 10,\n right: 20,\n bottom: 32,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"color = scale","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-delaunay@4\",\"d3-array@>=2.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { radio, select, slider,text,checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"import {style, scale, categoricalWidget} from \"@zzzev/categorical-legend-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"import { groupedSelect } from \"@zzzev/grouped-dropdown-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"import {inputsGroup,group,rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1246,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1273,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}