31:T51b,md`# Food.com Nutritional Ternary Plot with d3-ternary

This is a fork of Denis Torres' notebook [Food.com Nutritional Ternary Plot ](https://observablehq.com/@dotorres/food-com-nutritional-ternary-plot) that uses [d3-ternary](https://observablehq.com/@julesblm/introducing-d3-ternary?collection=@julesblm/ternary-plots) instead of Plotly to draw the ternary plot

The 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. It allows quick search of **balanced** and **highly nutritious** recipes given a text query such as 'chicken', 'healthy', 'raw','liver', etc. - 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. - Marker size indicates nutritional density which is proportional to calories per serving. *This visualization was inspired by Self magazine's caloric ratio pyramid (https://nutritiondata.self.com/help/analysis-help#cp-pyramid)* `32:T7e5,viewof drawTernaryPlot = { const node = DOM.svg(width, height); const svg = d3.select(node); const radius = t.radius(); const chart = svg .append("g") .attr("transform", `translate(${width / 2} ${height / 2 + yOffset})`) .attr("height", height) .attr("font-family", "sans-serif") .attr("id", "chart"); const defs = chart.append("defs"); const clipPath = defs .append("clipPath") .attr("id", "trianglePath") .append("path") .attr("d", t.triangle()); const axisLabelsGroup = chart .append("g") .attr("class", "axis-labels") .call(axisLabels, t.axisLabels()); const gridLinesPaths = t .gridLines(5) .map((axisGrid) => axisGrid.map(d3.line()).join(" ")); const gridGroup = chart .append("g") .attr("class", "grid") .call(grid, gridLinesPaths); const axisTicksGroups = chart .append("g") .attr("class", "ternary-ticks") .attr("font-size", 10) .selectAll("g") .data(t.ticks(5)) .join("g") .attr("class", "axis-ticks"); axisTicksGroups.call(ticks); const trianglePath = chart .append("path") .attr("d", t.triangle()) .attr("fill", "transparent") .attr("stroke", "black") .attr("stroke-width", 1); const pointLegend = svg.append("g"); pointLegend.call((g) => radiusLegend(g, nutriDensityScale, "Nutritional density") ); // data const dots = chart .append("g") .attr("class", "data") .attr("clip-path", "url(#trianglePath)") .selectAll("circle") .data(ternaryData) .join("circle") .attr("r", (d) => nutriDensityScale(d.nutritionalDensity)) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("opacity", 0.5) .attr("fill", (d) => color(d.RecipeCategory)) .attr("stroke", "#ddd"); dots.append("title").text( (d) => `${d.label} ${labels[0]}: ${formatPercentage(aAccessor(d))} ${labels[1]}: ${formatPercentage(bAccessor(d))} ${labels[2]}: ${formatPercentage(cAccessor(d))}` ); return svg.node(); }33:T49e,viewof foodGroupFilter2 = categoricalWidget({ options: topCategories.map(d=>d.key), //value: ["Dessert","Lunch/Snacks","One Dish Meal","Vegetable","Breakfast","Chicken Breast","Chicken","Meat","Pork","Potato","Breads","Quick Breads","Cheese","Pie","< 30 Mins","Stew","Poultry","Sauces","< 60 Mins","Low Protein","Beverages","Cheesecake","Savory Pies","Steak","European","Yeast Breads","< 15 Mins","Bar Cookie","Frozen Desserts","Low Cholesterol","Chowders","Smoothies","Spreads","Very Low Carbs","Rice","Onions","Corn","Salad Dressings","Curries","Crab","Chicken Thigh & Leg","Spinach","Beans","Healthy","Tuna","Spaghetti","Yam/Sweet Potato","Asian","Scones","Mexican","Grains","Cauliflower","Lamb/Sheep","High Protein","Fruit","< 4 Hours","Tarts","Clear Soup","Greens","Ham","Weeknight","Drop Cookies","Roast Beef","Shakes","Whole Chicken","White Rice","Long Grain Rice","Peppers","Apple","Candy","Kid Friendly","Gelatin","High In..."], value: ["Asian","Mexican","European"], //value: ["< 15 Mins", "< 30 Mins","< 60 Mins"], //value: ["Meat", "Breads"], //value: ["Breakfast", "Lunch/Snacks","One Dish Meal"], //value: ["Sauces"], showAll: true, showNone: true })34:T511,radiusLegend = (g, scale, title) => { const fontSize = 10; const margin = { top: 30, bottom: 30, left: 30, right: 30 }; const numCircles = Math.min(4, Math.ceil((scale.range()[1] * 2) / fontSize)); const r = d3.range(numCircles); const s = d3 .scaleLinear() .domain([r[0], r[r.length - 1]]) .range(scale.domain()); g.attr('font-size', `${fontSize}px`); g.selectAll('g') .data(r) .join(enter => { const g = enter.append('g'); g.append('circle') .attr('cx', margin.left + 50) .attr('cy', d => margin.top + scale(s(d))) .attr('r', d => scale(s(d))) .attr('stroke', 'black') .attr('fill', 'none'); g.append('line') .attr('x1', margin.left + 50) .attr('x2', margin.left + 80) .attr('y1', d => margin.top + 2 * scale(s(d))) .attr('y2', d => margin.top + 2 * scale(s(d))) .attr('stroke', 'gray'); g.append('text') .attr('x', margin.left + 84) .attr('y', d => margin.top + 5 + 2 * scale(s(d))) .text(d => Math.round(s(d))); return g; }); g.append('text') .text(title) .attr('y', margin.top + 2 * scale(s(numCircles - 1)) + 18) .attr('x', margin.left + 60) .attr('text-anchor', 'middle'); }35:[] 2f:{"title":"Food.com Nutritional Ternary Plot with d3-ternary","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"swatches({color})","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`**Interactive filter by caloric density.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof nutriFilter = rangeSlider(nutritionalDensity,n=>n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof filter2 = text({\n placeholder: 'Try \"brain\" or \"raw\"',\n title: 'Filter by Text in Recipe Name',\n description: 'Supports Regular Expressions',\n value:'',\n submit:true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"ternaryData = selectedNutrition?.map((d) => {\n const [x, y] = t(d);\n return { x, y, ...d };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"b = barycentric()\n .a(aAccessor)\n .b(bAccessor)\n .c(cAccessor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"aAccessor = d => +d.FatContent","pinned":true,"hidden":false,"mode":"ojs"},{"id":587,"value":"bAccessor = d => +d.ProteinContent","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"cAccessor = d => +d.CarbohydrateContent","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"labels = [\"A: Fat\", \"B: Protein\", \"C: Carbs\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"t = ternaryPlot(b)\n .radius(radius)\n .labels(labels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"height = (2 / 3) * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"// to keep the triangle centered at [0,0] of the svg\nyOffset = radius / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"radius = Math.min(width, height) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"recipes = d3.csv(\"https://raw.githubusercontent.com/DoTorr/UCF/main/recipes.csv\",d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"recipesGroupedByCategory = group(recipes).by(d=>d.RecipeCategory).run()","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"topCategories = recipesGroupedByCategory.filter(d=>d.values.length>250)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`# Pre-Filter Data by Text in Title`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"renderableData2 = recipes.filter((d,i) => d.Name.match(new RegExp(filter2, 'i')) &&\n foodGroupFilter2.includes(d.RecipeCategory)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`# Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"formatPercentage = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"nutriDensityScale = d3\n .scaleSqrt()\n .domain(nutritionalDensityExtent)\n .range([0, 15])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"fatExtent = d3.extent(renderableData2.map(r=>r.FatContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"nutritionalDensityExtent = d3.extent(\n selectedNutrition,\n (d) => d.nutritionalDensity\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"proteinExtent = d3.extent(renderableData2.map(r=>r.ProteinContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"carbExtent = d3.extent(renderableData2.map(r=>r.CarbohydrateContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"nutritionSum = renderableData2.map(\n r =>\n r.FatContent / fatExtent[1] +\n r.ProteinContent / proteinExtent[1] +\n r.CarbohydrateContent / carbExtent[1]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"nutritionalDensity = renderableData2.map(\n (r, i) =>\n (r.FatContent + r.ProteinContent + r.CarbohydrateContent) / r.RecipeServings\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"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 RecipeCategory: renderableData2[i].RecipeCategory,\n nutritionalDensity: nutritionalDensity[i]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"selectedNutrition = nutrition.filter(\n (d, i) =>\n nutritionalDensity[i] > nutriFilter.range[0] &&\n nutritionalDensity[i] < nutriFilter.range[1]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"color = d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"import {\n grid,\n ticks,\n axisLabels\n} from \"@julesblm/d3-ternary\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"d3Ternary = import(\"d3-ternary\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"barycentric = d3Ternary.barycentric","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"ternaryPlot = d3Ternary.ternaryPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"import {inputsGroup,group,rangeSlider} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"import {style, scale, categoricalWidget} from \"@zzzev/categorical-legend-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"import {select,text,slider,button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}