30:T4b4,projection = ({ width, height, angle = 0 }) => { const sqrt3_2 = Math.sqrt(3) / 2; let scale = 1; let tx = 0; let ty = 0; const ca = Math.cos((angle * Math.PI) / 180); const sa = Math.sin((angle * Math.PI) / 180); const q = (x, y) => [x + y * 0.5, -y * sqrt3_2]; const p = (x, y) => { [x, y] = q(x, y); return [scale * (x * ca + y * sa) + tx, scale * (y * ca - x * sa) + ty]; }; const projection = d3.geoTransform({ point: function (x, y) { this.stream.point(...p(x, y)); }, sphere: function () { this.stream.polygonStart(); this.stream.lineStart(); this.stream.point(...p(0, 0)); this.stream.point(...p(0, 1)); this.stream.point(...p(1, 0)); this.stream.point(...p(0, 0)); this.stream.lineEnd(); this.stream.polygonEnd(); } }); // Fit bounds (with angle!) const [[x1, y1], [x2, y2]] = d3 .geoPath(projection) .bounds({ type: "Sphere" }); const w = width / (x2 - x1); const h = height / (y2 - y1); scale = Math.min(w, h); tx = w > scale ? width / 2 - (scale * (x2 + x1)) / 2 : -x1 * scale; ty = w < scale ? height / 2 - (scale * (y2 + y1)) / 2 : -y1 * scale; return projection; }31:T936,function slider({ r = 5, fill = "red", constrain = true, value = [1 / 3, 1 / 3, 1 / 3], ...options } = {}) { const n = d3.sum(value); for (let i = 0; i < 3; i++) value[i] = (value[i] ?? 0) / n; return Plot.dot([value, [1, 0], [0, 1], [0, 0]], { r, fill, pointerEvents: "all", ...options, // options to be passed filter: [true], x: "0", y: "1", render(index, scales, values, dimensions, context, next) { const plot = context.ownerSVGElement; const g = next(index, scales, values, dimensions, context); d3.select(g).style("cursor", "grab"); const dot = g.querySelector("circle"); const path = g.querySelector("path"); const X = values.x; const Y = values.y; // barycentric coordinates & denominator const D = (X[2] - X[1]) * (Y[3] - Y[1]) - (Y[2] - Y[1]) * (X[3] - X[1]); let a = values.channels.x.value[0], b = values.channels.y.value[0], c = 1 - a - b; const z = { a, b, c }; // value accessors function set({ a, b, c }) { if (constrain) { while (a < 0 || b < 0 || c < 0) { if (a < 0) (b += a / 2), (c += a / 2), (a = 0); if (b < 0) (a += b / 2), (c += b / 2), (b = 0); if (c < 0) (b += c / 2), (a += c / 2), (c = 0); } } const x = a * X[1] + b * X[2] + c * X[3]; const y = a * Y[1] + b * Y[2] + c * Y[3]; if (dot) { dot.setAttribute("cx", x); dot.setAttribute("cy", y); } else path.setAttribute("transform", `translate(${x},${y})`); Object.assign(z, { a, b, c }); } function get() { return z; } Object.defineProperty(plot, "value", { set, get }); plot.dispatchEvent(new Event("input")); const drag = d3 .drag() .on("start", () => d3.select(g).style("cursor", "grabbing")) .on("end", () => d3.select(g).style("cursor", "grab")) .on("drag", ({ x, y }) => { // project c = ((X[2] - X[1]) * (y - Y[1]) - (Y[2] - Y[1]) * (x - X[1])) / D; b = ((x - X[1]) * (Y[3] - Y[1]) - (y - Y[1]) * (X[3] - X[1])) / D; a = 1 - b - c; set({ a, b, c }); plot.dispatchEvent(new Event("input")); }); d3.select(g).call(drag); return g; } }); }32:[] 2e:{"title":"Ternary plot","cells":[{"id":0,"value":"# Ternary plot\n\n> A _ternary plot_, _ternary graph_, _triangle plot_, _simplex plot_, or _Gibbs triangle_ is a barycentric plot on three variables which sum to a constant. It graphically depicts the ratios of the three variables as positions in an equilateral triangle. It is used in [population genetics](/@fil/ternary-quiver-plot) and game theory, and in physical sciences such as [geology](/@fil/ternary-contours) to show the compositions of systems composed of three species.\n\n*>> more on [Wikipedia](https://en.wikipedia.org/wiki/Ternary_plot).*\n","pinned":false,"hidden":false,"mode":"md"},{"id":982,"value":"For example, consider these (fictitious) workers in a news website, whose 100 hours of monthly work are spent on three roles:","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"Plot.plot({\n width: 500,\n height: 420,\n inset: 45,\n color: { legend: true },\n projection: ternary.projection,\n marks: [\n Plot.sphere(),\n ternary.graticule({ strokeDasharray: \"5 1.5\" }),\n\n // A blob for each group\n Plot.density(\n profiles,\n ternary.normalize({\n a: \"designer\",\n b: \"journalist\",\n c: \"developer\",\n stroke: group,\n bandwidth: 35,\n thresholds: 2\n })\n ),\n Plot.dot(\n profiles,\n ternary.normalize({\n a: \"designer\",\n b: \"journalist\",\n c: \"developer\",\n fill: group,\n stroke: \"white\",\n r: 8,\n channels: {\n label: \"name\",\n journalist: \"journalist\",\n developer: \"developer\",\n designer: \"designer\"\n },\n tip: true\n })\n ),\n\n ternary.tickLabels(d3.range(0.5, 1, 0.1), {\n fill: \"currentColor\",\n stroke: \"white\"\n }),\n ternary.labels(axes, { fontWeight: \"bold\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":988,"value":"For a great use case, see Jo Wood’s notebook on the [2024 UK general election](https://observablehq.com/@jwolondon/uk-election-2024-results).","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"---\nTo make ternary plots with [Observable Plot](https://observablehq.com/plot/), import this notebook:\n\n~~~js\nimport {ternary} from \"@fil/ternary-plot\"\n~~~\n\nThe ternary._projection_ helper maps the proportions to the screen coordinates. Using a [projection](https://observablehq.com/plot/features/projections) ensures that all the usual marks respect the barycentric coordinate system, as you can see in the example above which has both a dot mark and a contour mark.\n\nThere is also a ternary.*sphere* helper to draw the outline (and clip marks to the triangle, if needed), and a ternary.*graticule* helper that draws grid lines every 10%.","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"If the proportions are already normalized (with a sum equal to 1), you pass them directly as **x** and **y** — the third coordinate, being equal to 1 − (**x** + **y**), does not need to be specified:","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"Plot.plot({\n width: 300,\n projection: { type: ternary.projection, inset: 1 },\n marks: [\n Plot.sphere(),\n ternary.graticule(),\n Plot.dot(profiles, {\n x: (d) => d.designer / 100,\n y: (d) => d.journalist / 100,\n symbol: \"triangle\",\n fill: group,\n r: 5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"Otherwise, you can use the ternary.*normalize* helper with the channels **a**, **b** and **c** to be normalized to **x** := **a** / (**a** + **b** + **c**) and **y** := **b** / (**a** + **b** + **c**).\n\nThe **x** channel points to the bottom-right vertex of the triangle (A); the **y** channel points to the top vertex (B); the complement channel 1 − (**x** + **y**) points to the bottom-left (C).\n\nUse the ternary.*tickLabels* and ternary.*labels* helpers to create axes:","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"Plot.plot({\n width: 350,\n projection: { type: ternary.projection, inset: 25 },\n marks: [\n Plot.sphere(),\n ternary.graticule(),\n ternary.tickLabels(),\n ternary.labels([\"A\", \"B\", \"C\"])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"You can rotate the triangle with the **angle** projection option:","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"

\n${[-30, 0, 30, 60].map(angle => Plot.plot({\n width: 220,\n height: 200,\n projection: { type: ternary.projection, inset: 20, angle },\n marks: [\n Plot.sphere(),\n Plot.text([[1/3, 1/3]], {text: [`Angle: ${angle}`]}),\n ternary.labels([\"A\", \"B\", \"C\"], { fontWeight: \"bold\" })\n ],\n}))}","pinned":false,"hidden":false,"mode":"md"},{"id":1009,"value":"---\n\n## Ternary inputs\n\nTwo types of ternary inputs are available: **slider**, a dot that you can drag around the triangle, and **combo**, showing the three coordinates as linked range inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":1012,"value":"viewof z = Plot.plot({\n width: 250,\n projection: { type: ternary.projection, inset: 25 },\n marks: [Plot.sphere(), ternary.slider(), ternary.labels([\"a\", \"b\", \"c\"])]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"z","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"Both inputs support the **value** option, to set the initial value. The combo input supports a **labels** option, which defaults to `[\"a\", \"b\", \"c\"]`:","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"viewof k = ternary.combo({ value: [0.3, 0.2, 0.5], labels: [\"α\", \"β\", \"γ\"] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"k","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"The ternary slider input additionally supports a **constrain** option, that defaults to true and that you can set to false if you don’t want to constrain the value to the interior of the triangle. Any other option is passed to the underlying [dot mark](https://observablehq.com/plot/marks/dot).","pinned":false,"hidden":false,"mode":"md"},{"id":1024,"value":"viewof hex = Plot.plot({\n width: 200,\n projection: { type: ternary.projection, inset: 7, angle: 15 },\n style: \"overflow: visible\",\n marks: [\n Plot.sphere(),\n ternary.slider({\n constrain: false,\n value: [0.2, 0.3, 0.5],\n fill: \"none\",\n fill: \"lightgreen\",\n stroke: \"green\",\n r: 6,\n symbol: \"hexagon\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"hex","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"You can [link](https://observablehq.com/@fil/linked-ternary-inputs) both types of ternary inputs for easier access.","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"---\n*code*","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"normalize = ({ a, b, c, ...options } = {}) => {\n if (a == null) throw new Error(\"missing channel a\");\n if (b == null) throw new Error(\"missing channel b\");\n if (c == null) throw new Error(\"missing channel c\");\n const [X, setX] = Plot.column(a); // Using a hides x from the tip!\n const [Y, setY] = Plot.column(b);\n return Plot.transform({ x: X, y: Y, ...options }, (data, facets) => {\n const A = Plot.valueof(data, a);\n const B = Plot.valueof(data, b);\n const C = Plot.valueof(data, c);\n setX(A.map((d, i) => d / (A[i] + B[i] + C[i])));\n setY(B.map((d, i) => d / (A[i] + B[i] + C[i])));\n return { data, facets };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"graticule = (options) =>\n Plot.link(\n d3.range(0.1, 1, 0.1).flatMap((d) => [\n [d, 0, 0, d],\n [d, 0, d, 1 - d],\n [0, d, 1 - d, d]\n ]),\n {\n x1: \"0\",\n y1: \"1\",\n x2: \"2\",\n y2: \"3\",\n stroke: \"#aaa\",\n strokeWidth: 0.5,\n ...options\n }\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"tickLabels = (\n data = d3.range(0.1, 1, 0.1),\n { tickFormat = \".0%\", ...options } = {}\n) => {\n const text = d3.format(tickFormat);\n return Plot.marks(\n Plot.text(data, {\n x: (d) => 1 - d,\n y: 0,\n text,\n rotate: 60,\n textAnchor: \"start\",\n dx: 2,\n dy: 5,\n ...options\n }),\n Plot.text(data, {\n x: 0,\n y: (d) => d,\n text,\n rotate: 0,\n textAnchor: \"end\",\n dx: -5,\n dy: 0,\n ...options\n }),\n Plot.text(data, {\n x: (d) => d,\n y: (d) => 1 - d,\n text,\n textAnchor: \"start\",\n rotate: -60,\n dx: 2,\n dy: -5,\n ...options\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"labels = (data, options) =>\n Plot.text(data, {\n x: [1.075, -0.025, -0.025],\n y: [-0.05, 1.05, -0.05],\n text: Plot.identity,\n ...options\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":994,"value":"function combo({\n labels = [\"a\", \"b\", \"c\"],\n value = [1 / 3, 1 / 3],\n step = 0.001\n} = {}) {\n const n = d3.sum(value);\n for (let i = 0; i < 3; i++) value[i] = (value[i] ?? 0) / n;\n const a = Inputs.range([0, 1], { label: labels[0], value: value[0], step });\n const b = Inputs.range([0, 1], { label: labels[1], value: value[1], step });\n const c = Inputs.range([0, 1], { label: labels[2], value: value[2], step });\n ternarySync(a, b, c);\n ternarySync(b, a, c);\n ternarySync(c, a, b);\n return Inputs.form({ a, b, c });\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":996,"value":"function ternarySync(a, b, c) {\n a.addEventListener(\"input\", (event) => {\n if (!event.isTrusted) return;\n const bc1 = 1 - a.value;\n const bc2 = b.value + c.value;\n if (bc2) {\n b.value = (b.value / bc2) * bc1;\n c.value = (c.value / bc2) * bc1;\n } else {\n b.value = c.value = bc1 / 2;\n }\n b.dispatchEvent(new InputEvent(\"input\"));\n c.dispatchEvent(new InputEvent(\"input\"));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"ternary = ({\n projection,\n graticule,\n normalize,\n sphere: Plot.sphere,\n tickLabels,\n labels,\n slider,\n combo\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"---\n*Data for the demo*\n\nHat tip to [Tom Pearson](https://blocks.roadtolarissa.com/tomgp/7674234).","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"axes = [\"designer\", \"journalist\", \"developer\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"profiles = [\n { journalist: 75, developer: 25, designer: 0, name: \"Alissa Combs\" },\n { journalist: 70, developer: 10, designer: 20, name: \"Sidney Gibson\" },\n { journalist: 75, developer: 20, designer: 5, name: \"Evan Guerrero\" },\n { journalist: 5, developer: 60, designer: 35, name: \"Marquise Walsh\" },\n { journalist: 10, developer: 80, designer: 10, name: \"Terry Mason\" },\n { journalist: 10, developer: 90, designer: 0, name: \"Megan Boyle\" },\n { journalist: 20, developer: 70, designer: 10, name: \"Aliana Cline\" },\n { journalist: 10, developer: 20, designer: 70, name: \"Esther Coffey\" },\n { journalist: 15, developer: 5, designer: 80, name: \"Giuliana Booker\" },\n { journalist: 10, developer: 10, designer: 80, name: \"Deandre Roy\" },\n { journalist: 20, developer: 10, designer: 70, name: \"Cruz Day\" }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"group = Object.assign((d) => d3.greatest(axes, (k) => d[k]), { label: \"group\" })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}