31:T96c,viewof d3TernarySlider = { const node = DOM.svg(width / 2, height); const svg = d3.select(node); // Define a transition to use when fading subcomposition marks let t = d3.transition().ease(d3.easeCubicOut).duration(300); // to keep the triangle centered at [0,0] of the svg const yOffset = radius / 4; const chart = svg .append("g") .attr("transform", `translate(${width / 4} ${height / 2 + yOffset})`) .attr("height", 300) .attr("id", "chart"); const projectionLinesGroup = chart .append("g") .attr("class", "projection-lines") .call( projectionLines, subCompositions([1 / 3, 1 / 3, 1 / 3]).map((t) => tSlider(t)) ); const defs = chart.append("defs"); const axisLabelsGroup = chart .append("g") .attr("class", "axis-labels") .call(axisLabels, tSlider.axisLabels()); // data const dots = chart .append("g") .attr("class", "data") .selectAll("circle") .data(whiskeySours) .join("circle") .attr("r", 4) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("fill", "#444") .attr("stroke", "#ddd"); dots.append("title").text( (d) => `${d.Title} ${d.Comments ?? "-"} Whiskey: ${d.Whiskey} Sweet: ${d.Sweet} Sour: ${d.Sour}` ); const handle = chart .append("circle") .attr("id", "drag-handle") .attr("cx", 0) .attr("cy", 0) .attr("r", 4) .attr("fill", "red"); const trianglePath = chart .append("path") .attr("d", tSlider.triangle()) .attr("fill", "none") .attr("pointer-events", "all") .attr("stroke-width", 1) .attr("stroke", "#ccc") .call( d3 .drag() .on("drag", (event) => { const [x, y] = d3.pointer(event, chart.node()); handleDrag(x, y); }) .on("start", (event) => { const [x, y] = d3.pointer(event, chart.node()); handleDrag(x, y); }) ); function handleDrag(x, y) { const inside = isPointInTriangle(x, y); if (!inside) { return; } const inverse = tSlider.invert([x, y]); const hoverMarks = subCompositions(inverse).map(tSlider); handle.attr("cx", x).attr("cy", y); projectionLinesGroup.call(projectionLines, hoverMarks); node.dispatchEvent(new CustomEvent("input"), { bubbles: true }); node.value = inverse; } node.value = tSlider.invert([0, 0]); return svg.node(); }32:T60f,whiskeySours = d3 .csvParse( `Title,URL,Whiskey,Sour,Sweet,Comments Epicurious,https://www.epicurious.com/recipes/food/views/whiskey-sour-cocktail,2,0.75,0.75,Andrew likes this one Food Network,https://www.foodnetwork.com/recipes/ina-garten/fresh-whiskey-sours-recipe-2106527,0.75,1,0.67,implied 2:1 simple syrup; recipe says 0.67 International Bartenders Association,https://iba-world.com/iba-official-cocktails/whiskey-sour/,4.5,3,1.5, Liquor.com,https://www.liquor.com/recipes/whiskey-sour/#gs.74ozsj,2,0.75,0.5,optional 0.5 egg white Bon Appetit,https://www.bonappetit.com/recipe/whiskey-sour,2,0.75,0.75,"1/2 orange wheel, cherry" Punch Drink,https://punchdrink.com/recipes/whiskey-sour/,2,0.75,0.75, The Spruce Eats,https://www.thespruceeats.com/whiskey-sour-recipe-761273,1.5,1.5,0.75, Jamie Oliver,https://www.jamieoliver.com/drinks-tube/recipe/whiskey-sour/,2,1,0.5, All Recipes,https://www.allrecipes.com/recipe/138002/classic-whiskey-sour/,5,2,1, Wine and Glue,https://www.wineandglue.com/whiskey-sour-recipe/,3,2,1.5,2 egg whites Real Housemoms,https://realhousemoms.com/whiskey-sour/,2,1,0.75, Tasting Table,https://www.tastingtable.com/cook/recipes/easy-whiskey-sour-cocktail-recipe,2,0.75,0.75, Powell & Mahoney,https://www.powellandmahoney.com/recipe/whiskey-sour/,2,1,0.5, The Kitchn,https://www.thekitchn.com/how-to-make-a-whiskey-sour-240335,2,1,0.75, Food52,https://food52.com/recipes/76034-classic-whiskey-sour,1.25,0.75,0.5,`, d3.autoType ) .map(d => { const [x, y] = tSlider(d); return { x, y, ...d }; })33:[] 2f:{"title":"Ternary Slider with d3-ternary","cells":[{"id":0,"value":"md`# Ternary Slider with d3-ternary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`\n

This is a fork of [Ternary Slider](https://observablehq.com/@yurivish/ternary-slider) by [Yuri Vishnevsky\n](https://observablehq.com/@yurivish) that uses [d3-ternary](https://observablehq.com/@julesblm/introducing-d3-ternary?collection=@julesblm/ternary-plots) to draw the ternary plot

\n\n\nWhen building user interfaces it is occasionally useful to have the user specify proportions between things.\n\nIf the choice is between _exactly three things_, it can be represented by a [ternary](https://en.wikipedia.org/wiki/Ternary_plot) slider where every point in the triangle corresponds to a unique composition of those three things.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`For example, a [whiskey sour](https://en.wikipedia.org/wiki/Whiskey_sour) is a drink composed of whiskey, lemon juice, and simple syrup.\n\nImagine the space of all possible whiskey sours as delineated by the relative proportions of these three ingredients, with pure ingredients at the corners (and an optional cherry or orange slice, sold separately):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`\nYour chosen concoction contains **${formatPercentage(\n d3TernarySlider[0]\n)}** whiskey, **${formatPercentage(\n d3TernarySlider[2]\n)}** simple syrup, and **${formatPercentage(d3TernarySlider[1])}** lemon juice.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`\nMove the red dot to choose your composition as point in Whiskey Space. \n\nBlack dots illustrate the ingredient proportions from whiskey sour recipes found online; you can find [the full dataset](#whiskeyTable) below.\n` //

","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"// in this case the labels match the keys\nb = barycentric()\n .a(d => d[labels[0]])\n .b(d => d[labels[1]])\n .c(d => d[labels[2]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"tSlider = ternaryPlot(b)\n .labels(labels)\n .labelAngles([0, 0, 0])\n .radius(radius)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"projectionLines = (g, hoverMarks = []) =>\n g\n .selectAll(\"line\")\n .data(hoverMarks)\n .join(\n enter =>\n enter\n .append(\"line\")\n .attr(\"class\", \"projection\")\n .attr(\n \"transform\",\n (d, i) => `translate(${d})rotate(${270 + 120 * i})`\n )\n .attr(\"stroke\", \"crimson\")\n .attr(\"y2\", 10)\n .attr('stroke-width', 1)\n .attr('pointer-events', 'none')\n .attr('stroke-linecap', 'round'),\n\n update =>\n update.attr(\n \"transform\",\n (d, i) => `translate(${d})rotate(${270 + 120 * i})`\n )\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"subCompositions = inverse => {\n const [A, B, C] = inverse;\n const hoverMarks = [\n { Whiskey: A, Sour: 0, Sweet: 1 - A },\n { Whiskey: 0, Sour: 1 - C, Sweet: C },\n { Whiskey: 1 - B, Sour: B, Sweet: 0 }\n ];\n\n return hoverMarks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"labels = ['Whiskey', 'Sour', 'Sweet']","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"whiskeyTable = md`### Appendix: Whiskey sour recipe dataset\nThe recipe data plotted in the top example was collected from the first few pages of Google search results for [whiskey sour recipe](https://www.google.com/search?q=whiskey+sour+recipe).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"{\n let keys = ['Title', 'Whiskey', 'Sweet', 'Sour']\n let names = ['Title', 'Whiskey', 'Simple syrup', 'Lemon or Lime']\n return md`\n ${names.join('|')}\n ${keys.map(d => '---').join('|')}\n ${whiskeySours.map(d => keys.map((k, i) => i > 0 ? d[k] : `[${d[k]}](${d.URL})`).join('|')).join('\\n')}\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"md`\n### Appendix: Greater than three (additional acknowledgements)\n\nThanks to Corey Thompson, Ryan Shackleton, and Carl Manaster for their feedback on a draft of this document.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"function getTriangleVertices() {\n return [\n tSlider({ Whiskey: 1, Sour: 0, Sweet: 0 }),\n tSlider({ Whiskey: 0, Sour: 1, Sweet: 0 }),\n tSlider({ Whiskey: 0, Sour: 0, Sweet: 1 })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"// Robust point-in-triangle test for triangles with horizontal edges\nfunction isPointInTriangle(x, y) {\n const vertices = getTriangleVertices();\n const [top, left, right] = vertices; // Your convention: Top=A, Left=B, Right=C\n\n const point = [x, y];\n\n // Calculate signed areas for each sub-triangle\n const area1 = signedArea(top, left, point); // Top-Left-Point\n const area2 = signedArea(left, right, point); // Left-Right-Point\n const area3 = signedArea(right, top, point); // Right-Top-Point\n\n const allPositive = area1 >= 0 && area2 >= 0 && area3 >= 0;\n const allNegative = area1 <= 0 && area2 <= 0 && area3 <= 0;\n\n const inside = allPositive || allNegative;\n\n return inside;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"function signedArea(p1, p2, p3) {\n return (p2[0] - p1[0]) * (p3[1] - p1[1]) - (p3[0] - p1[0]) * (p2[1] - p1[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"radius = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"height = (2 * width) / 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"d3 = require('d3@v6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"ternaryPlot = d3Ternary.ternaryPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":1356,"value":"barycentric = d3Ternary.barycentric","pinned":true,"hidden":false,"mode":"ojs"},{"id":1358,"value":"d3Ternary = import(\"d3-ternary\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1099,"value":"import { axisLabels } from \"@julesblm/d3-ternary\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}