31:T45a,compareTwoMetricsScatter = { let minX = _.min(compareTwoMetricsData.columnArray(compareTwoMetrics.X)); let minY = _.min(compareTwoMetricsData.columnArray(compareTwoMetrics.Y)); const plot = Plot.plot({ marks: [ Plot.dot(compareTwoMetricsData, { x: compareTwoMetrics.X, y: compareTwoMetrics.Y, fill: "gray", r: 5, channels: { Flavour: "Flavour" }, tip: { format: { Flavour: true, x: (d) => `${d}`, y: (d) => `${d}`, stroke: false } } }), Plot.crosshair(compareTwoMetricsData, { x: compareTwoMetrics.X, y: compareTwoMetrics.Y }), Plot.ruleX([minX - minX * 0.1]), Plot.ruleY([minY - minY * 0.1]) ], x: { label: `${compareTwoMetrics.X} (${metricToUnit[compareTwoMetrics.X]})` }, y: { label: `${compareTwoMetrics.Y} (${metricToUnit[compareTwoMetrics.Y]})` }, title: "Nutrition Per 150g can", subtitle: "Hover over points for more info", style: { fontSize: "12px" } }); return plot; }32:T55f,ternaryPlot = { const myDiv = html`

`; const data = bigThree.objects(); plotly.newPlot( myDiv, [ { type: "scatterternary", mode: "markers", a: data.map((n) => n.Protein), b: data.map((n) => n.Fat), c: data.map((n) => n.Carbohydrate), // text: data.map((n) => n.Flavour), text: data.map((n) => `${n.Flavour} (${n.Energy} kcal)`), marker: { color: data.map((n) => flavourColour(n.Flavour)), line: { color: "rgb(0,0,0)", width: 1 }, size: data.map((n) => n.Energy / 10), opacity: 0.5 } } ], { showlegend: false, width: width, height: width, ternary: { sum: 30, aaxis: makeAxis("A:Protein", 0), baxis: makeAxis("
B:Fat", 45), caxis: makeAxis("
C:Carbs", -45), bgcolor: "white" }, paper_bgcolor: "white" } ); function makeAxis(title, tickangle) { return { // tickmode: "auto", // nticks: 5, title: title, titlefont: { size: 15 }, tickangle: tickangle, tickfont: { size: 15 }, tickcolor: "rgba(0,0,0,0)", ticks: "outside", ticklen: 8, ticksuffix: " g", showline: true, showgrid: true }; } return myDiv; }33:[{"id":"a18e44ed4b35390b8edd2f12d6ac30dea5b5bf41f9c1be2bd7153c54a02b25746185dc24a5c1d76b216a287e4eb185675a49297a255644c0af5a0452062386c4","href":"https://static.observableusercontent.com/files/a18e44ed4b35390b8edd2f12d6ac30dea5b5bf41f9c1be2bd7153c54a02b25746185dc24a5c1d76b216a287e4eb185675a49297a255644c0af5a0452062386c4","name":"Ayam Brand Ayam - Per can (150g).csv","type":"text/csv","lastModified":1742016476586.418,"size":272}] 2f:{"title":"Ayam Brand Pulled Chicken Nutrition Information","cells":[{"id":0,"value":"# Ayam Brand Pulled Chicken Nutrition Information\n
","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"## Compare single metric across flavours","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"viewof yourMetric = Inputs.select(\n [...new Set(nutritionalInfo.columnArray(\"metric\"))],\n { label: \"Metric\", width: \"150px\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"yourBarChart = {\n const plot = Plot.plot({\n marks: [\n Plot.barX(yourMetricData, {\n x: \"value\",\n y: \"Flavour\",\n sort: { y: \"-x\" },\n channels: {\n Flavour: \"flavour\",\n metric: \"metric\"\n }\n }),\n Plot.text(yourMetricData, {\n x: \"value\",\n y: \"Flavour\",\n text: (d) => `${d.value} ${metricToUnit[yourMetric]}`,\n fill: \"white\",\n dx: -30,\n lineAnchor: \"middle\"\n }),\n Plot.ruleX([0])\n // // doesn't quite work\n // Plot.tip(\n // yourMetricData,\n // Plot.pointer({\n // x: \"value\",\n // y: \"Flavour\",\n // title: (d) => `${d.metric}`\n // })\n // )\n ],\n\n marginLeft: 120,\n marginBottom: 40,\n subtitle: \"Per 150g can\",\n x: {\n axis: null,\n label: `${yourMetric}(${metricToUnit[yourMetric]}) →`\n },\n style: { fontSize: \"12px\" }\n });\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"## Compare any two metrics across flavours","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"viewof compareTwoMetrics = Inputs.form({\n X: Inputs.select([...new Set(nutritionalInfo.columnArray(\"metric\"))], {\n label: \"X-axis\",\n width: \"150px\",\n value: \"Energy\"\n }),\n Y: Inputs.select([...new Set(nutritionalInfo.columnArray(\"metric\"))], {\n label: \"Y-axis\",\n width: \"150px\",\n value: \"Protein\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":365,"value":"## Ternary plot of macronutrient values","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"## Munged","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"compareTwoMetricsData = nutritionalInfo\n .filter(\n aq.escape((d) =>\n [compareTwoMetrics.X, compareTwoMetrics.Y].includes(d.metric)\n )\n )\n .reify()\n .groupby(\"Flavour\")\n .pivot(\"metric\", \"value\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"yourMetricData = nutritionalInfo.filter(\n aq.escape((d) => d.metric == yourMetric)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"flavourColour = d3.scaleOrdinal(\n bigThree.columnArray(\"Flavour\"),\n d3.schemeCategory10\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"metricToUnit = Object({\n Energy: \"kcal\",\n Protein: \"g\",\n Fat: \"g\",\n Carbohydrate: \"g\",\n Fibre: \"g\",\n Sodium: \"mg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"## Load Data","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"bigThree = nutritionalInfo\n .filter(\n aq.escape((d) =>\n [\"Protein\", \"Fat\", \"Carbohydrate\", \"Energy\"].includes(d.metric)\n )\n )\n .reify()\n .groupby(\"Flavour\")\n .pivot(\"metric\", \"value\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"nutritionalInfo = {\n let raw = aq.from(\n await FileAttachment(\"Ayam Brand Ayam - Per can (150g).csv\").csv()\n );\n\n // See https://observablehq.com/@uwdata/arquero-cookbook#fold\n let folded = raw.fold(aq.not(\"Flavour\"), { as: [\"metric\", \"value\"] });\n\n // Convert 'value' column to numeric.\n return folded.derive({ value: (d) => +d.value });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}