31:T43d,md`# Food.com Physics Based T-SNE Nutritional Clustering This simulation is based on the intuition that the gradient of [t-SNE](https://lvdmaaten.github.io/tsne/) is equivalent to the attractive forces exerted by springs in a physical system. Initially the system gets stuck in a local minimum but if one clicks and holds on one of the graph nodes we can see how the algorithm auto-magically brings the clusters together. Once the system is equilibrated you can see that the simulated t-sne clustering is able to separate recipes manually labeled as "Vegetable","Meat","Breads". In this case the labels are mostly independent food groups and a natural clustering is expected. It is interesting to see that the "Vegetable" class has a pure sub-cluster. A detailed exploration of the recipes in this sub-group confirms that these dishes are fully vegeterian. However, outside from this subcluster, recipes labeled "vegetable" seem to intermingle with the Meat and Bread classes. This is consistent with the common use of vegetables as flavoring ingredients of many dishses. `32:T5ce,chart = { const zoom = valuesObjOnly2.zoomSlide/100 const viewX = valuesObjOnly2.xPan const viewY = valuesObjOnly2.yPan const simulation = d3.forceSimulation(recipes_point_data) .force("link", d3.forceLink(pairwise_distances).id(d => d.id).distance(d => d.value*1000)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width/2, width/2)) .on("tick", ticked); const svg = d3.select(DOM.svg(width, width)) .attr("viewBox", [-width*(1/2-viewX), -width*(1/2-viewY), width/zoom, width/zoom]) .style("font", 15+valuesObjOnly2.fontSize+"px sans-serif"); const link = svg.append("g") .selectAll("line") .data(pairwise_distances) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(recipes_point_data) .enter().append("circle") .attr("r", d=> 5+10*d.calories) .attr("fill", d=> color(d.type)) .call(drag(simulation)); node.append("title") .text(d => d.label); function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } //simulation.stop() //for (var i = 0; i < 15; ++i) simulation.tick(); //simulation.stop(); ticked(); invalidation.then(() => simulation.stop()); return svg.node(); }33:T51b,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: ["Meat", "Breads","Vegetable"], //value: ["Meat", "Breads","Vegetable","Dessert","Lunch/Snacks","One Dish Meal"], //value: ["Meat", "Breads","Vegetable","Asian","Mexican","European"], //value: ["< 15 Mins", "< 30 Mins","< 60 Mins"], //value: ["Breakfast", "Lunch/Snacks","One Dish Meal"], //value: ["Sauces"], showAll: true, showNone: true })34:[] 2f:{"title":"Food.com Physics Based T-SNE Nutritional Clustering","cells":[{"id":1,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof valuesObjOnly2 = inputsGroup(\n [\n [\n slider({ title: 'Zoom', max:100, value:35, description: 'Adjust Graph Zoom',submit:true }),\n ],\n [\n slider({ title: 'Pan X', min:-1,max:1, value:0,step:0.1, description: 'Adjust X Location'}),\n slider({ title: 'Pan Y', min:-1,max:1, value:0,step:0.1, description: 'Adjust Y Location'}),\n ]\n ],\n\n [\n ['zoomSlide'],\n ['xPan','yPan'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"swatches({color})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"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:'healthy|hearty|sweet|delicious',\n submit:true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"import {cleanedRecipes} from '@dotorres/food-com-data-exploration'","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"cleanedRecipes","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"recipesGroupedByCategory = group(cleanedRecipes).by(d=>d.RecipeCategory).run()","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"catID = new Map(recipesGroupedByCategory.map((cat,i)=>[cat.key,i]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"topCategories = recipesGroupedByCategory.filter(d=>d.values.length>250)","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`# Filter Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"renderableData2 = cleanedRecipes.filter((d,i) => d.Name.match(new RegExp(filter2, 'i')) &&\n foodGroupFilter2.includes(d.RecipeCategory)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`# Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"fatExtent = d3.extent(renderableData2.map(r=>r.FatContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"proteinExtent = d3.extent(renderableData2.map(r=>r.ProteinContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"carbExtent = d3.extent(renderableData2.map(r=>r.CarbohydrateContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"fiberExtent = d3.extent(renderableData2.map(r=>r.FiberContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"sodiumExtent = d3.extent(renderableData2.map(r=>r.SodiumContent))","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"nutritionalDensity = renderableData2.map((r,i)=>(r.FatContent+r.ProteinContent+r.CarbohydrateContent)/r.RecipeServings)","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"nutrition=renderableData2.map((r,i)=>({\nlabel:r.Name,\nRecipeCategory:r.RecipeCategory,\nFatContent:(r.FatContent-fatExtent[0])/(fatExtent[1]-fatExtent[0])/r.RecipeServings,\nSodiumContent:(r.SodiumContent-sodiumExtent[0])/(sodiumExtent[1]-sodiumExtent[0])/r.RecipeServings,\nCarbohydrateContent:(r.CarbohydrateContent-carbExtent[0])/(carbExtent[1]-carbExtent[0])/r.RecipeServings,\nFiberContent:(r.FiberContent-fiberExtent[0])/(fiberExtent[1]-fiberExtent[0])/r.RecipeServings,\nProteinContent:(r.ProteinContent-proteinExtent[0])/(proteinExtent[1]-proteinExtent[0])/r.RecipeServings,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`# Gather Data for Plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"recipes_point_data=nutrition.map((r,i)=>({label:r.label, type:r.RecipeCategory,\nid:i,index:i,\ngroup:catID.get(r.RecipeCategory),\nx:0,y:0,vx:0,vy:0,\nlocation:[r.FatContent,\nr.SodiumContent,\nr.CarbohydrateContent,\nr.FiberContent,\nr.ProteinContent],\ncalories:d3.sum([r.FatContent,r.SodiumContent,r.CarbohydrateContent,r.FiberContent,r.ProteinContent])\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md` # Distances Calculation\n\nNext, we calculate the pairwise distances between all the points in their original dimensional space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"pairwise_distances = pairDistance(recipes_point_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"function pairDistance(point_data) {\n const distances = [];\n for(let i = 0; i < point_data.length; i++){\n \tfor(let j = i; j < point_data.length; j++){\n \tconst p1_loc = point_data[i].location;\n const p2_loc = point_data[j].location;\n \tconst sum_of_square_diffs = p1_loc\n \t.map((d, ind) => Math.pow(d - p2_loc[ind], 2))\n \t.reduce((summed, d) => summed + d, 0);\n \n \tdistances.push({source: i, target: j, value: Math.sqrt(sum_of_square_diffs)})\n }\n }\n// filter out the self links as they are not needed.\nreturn distances.filter(({value}) => value > 0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"color = d3.scaleOrdinal(foodGroupFilter2, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"import {inputsGroup,group,rangeSlider} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"import {select,text,slider,button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"import {style, scale, categoricalWidget} from \"@zzzev/categorical-legend-picker\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}