2c:null 2d:["$","title",null,{"children":"d3-ternary: Ternary Plots with D3.js | Jules Blom | Observable"}] 32:T435, This is the version of the d3-ternary module you can use on Observable. It's on [GitHub](https://github.com/davenquinn/d3-ternary) and [npm](https://www.npmjs.com/package/d3-ternary) too. To import d3-ternary on Observable: ~~~javascript import { ternaryPlot, barycentric } from "@julesblm/d3-ternary" ~~~ To use and import the D3 render functions on Observable ~~~javascript import { grid, ticks, axisLabels } from "@julesblm/d3-ternary" ~~~ ## Acknowledgments Several projects have served as a starting point for this module. * The previous [d3-ternary](https://github.com/davenquinn/d3-ternary/releases/tag/v1.0) module by Daven Quinn * [Ternary slider](https://observablehq.com/@yurivish/ternary-slider) notebook by Yuri Vishnevsky * [D3 Ternary Plot](https://observablehq.com/@toja/d3-ternary-plot) notebook by Torben Jansen * [Zoomable Ternary Plot](https://observablehq.com/@dixonj13/zoomable-ternary-plot) notebook by dixonj13 All authors are thanked. Special thanks to [Torben Jansen](https://observablehq.com/@toja/) for his feedback and the demo data set.33:Tdcc,drawTernaryPlot = (someTernaryPlot, data) => { const node = DOM.svg(width, height); const svg = d3.select(node); const radius = someTernaryPlot.radius(); const chart = svg .append("g") .attr("transform", `translate(${width / 2} ${height / 2 + yOffset})`) .attr("font-family", "sans-serif") .attr("id", "chart") .on("mousemove", handleMouseMove); const defs = chart.append("defs"); const clipPath = defs .append("clipPath") .attr("id", "trianglePath") .append("path") .attr("d", someTernaryPlot.triangle()); const axisLabelsGroups = chart .append("g") .attr("class", "axis-labels") .append("g") .attr("class", "labels") .attr("font-size", 16); axisLabelsGroups.call(axisLabels, someTernaryPlot.axisLabels()); const gridLinesPaths = someTernaryPlot .gridLines() .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(someTernaryPlot.ticks()) .join("g") .attr("class", "axis-ticks") .call(ticks); const ternaryData = data.map((d) => { const [x, y] = someTernaryPlot(d); return { x, y, ...d }; }); // data const dots = chart .append("g") .attr("class", "data") .attr("clip-path", "url(#trianglePath)") .selectAll("circle") .data(ternaryData) .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.country} Agriculture: ${d.agriculture} Industry: ${d.industry} Service: ${d.service}` ); // initial triangle const trianglePath = chart .append("path") .attr("d", someTernaryPlot.triangle()) .attr("fill", "transparent") .attr("stroke", "black") .attr("title", "Initial untransformed triangle"); // .attr("stroke-width", 2); // const zoom = d3.zoom().scaleExtent([1, 100]).on("zoom", zoomed); // const [tx, ty] = someTernaryPlot.translate(); // const k = someTernaryPlot.scale(); // // We need to sync d3-zoom with the tranform of the partial domains // const initialTransform = d3.zoomIdentity // .translate(tx * radius, ty * radius) // .scale(k); // chart.call(zoom).call(zoom.transform, initialTransform); // function zoomed({ transform }) { // const { x, y, k } = transform; // const tx = x / radius, // ty = y / radius; // // apply transform // someTernaryPlot.translate([tx, ty]); // someTernaryPlot.scale(k); // const zoomedDomains = someTernaryPlot.domainsFromVertices(); // someTernaryPlot.setDomains(zoomedDomains); // // update data // dots // .attr("cx", (d) => someTernaryPlot(d)[0]) // .attr("cy", (d) => someTernaryPlot(d)[1]); // // update gridlines and ticks // const gridLinesPaths = someTernaryPlot // .gridLines() // .map((axisGrid) => axisGrid.map(d3.line()).join(" ")); // gridGroup.call(grid, gridLinesPaths); // axisTicksGroups.data(someTernaryPlot.ticks()).call(ticks, (d) => d); // } function handleMouseMove(d) { const xy = d3.pointer(d); const inverse = someTernaryPlot.invert(xy); node.dispatchEvent(new CustomEvent("input"), { bubbles: true }); node.value = inverse; } node.value = 0; return svg.node(); }34:T415,ticks = g => g .selectAll("g") .data(d => d, d => d.tick) .join( enter => { const tickGroups = enter .append("g") .attr("class", "tick") .attr("transform", tick => `translate(${tick.position})`); tickGroups .append("text") .attr("text-anchor", tick => tick.textAnchor) .attr("transform", tick => `rotate(${tick.angle})`) .attr( "dx", tick => (-tick.size - 5) * (tick.textAnchor === "start" ? -1 : 1) ) .attr("dy", ".5em") .text(tick => tick.tick); tickGroups .append("line") .attr("transform", d => `rotate(${d.angle + 90})`) .attr( "y2", tick => tick.size * (tick.textAnchor === "start" ? -1 : 1) ) .attr("stroke", "grey"); return tickGroups; }, update => update.attr("transform", tick => `translate(${tick.position})`), exit => exit.attr("opacity", epsilon).remove() )35:[] 30:{"id":"10484e7a82af53ba","slug":"d3-ternary","title":"d3-ternary: Ternary Plots with D3.js","thumbnail":"a517746044e0c24580594b3784182ccc985af01a91d6169fe0e475a61db33b6d","access_level":"public","create_time":"$D2021-02-08T16:38:49.692Z","update_time":"$D2025-04-09T19:44:18.227Z","view_time":null,"first_public_time":"$D2021-02-09T11:36:02.220Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":3505,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"5012e93fc63bbc61","slug":"ternary-plots","title":"Ternary Plots with d3-ternary","owner":{"id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom"}},"type":"notebook","body":{"titling":"auto","title":"d3-ternary: Ternary Plots with D3.js","cells":[{"id":0,"value":"# d3-ternary: Ternary Plots with D3.js\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3501,"value":"freelanceBanner","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3499,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2351,"value":"## Basic Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"demoTernaryPlot = {\n const normalBarycentric = barycentric()\n .a(d => d.agriculture)\n .b(d => d.industry)\n .c(d => d.service);\n\n return ternaryPlot(normalBarycentric)\n .radius(radius)\n .labels(labels);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2420,"value":"valuesTable(labels, regularDomainPlot)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"viewof regularDomainPlot = drawTernaryPlot(demoTernaryPlot, data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"grid = (g, gridLines) => g.selectAll(\"path\")\n .data(gridLines)\n .join(\n enter => enter.append(\"path\")\n .attr(\"d\", d => d)\n .attr(\"stroke\", \"#e3e3e3\")\n .attr(\"stroke-width\", (d, i) => i & 1 ? 1 : 2),\n update => update.attr('d', d => d)\n // theres no exit, lines are only drawn upto 'initial' triangle bounds\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2369,"value":"labels = [\"Agriculture (A)\", \"Industry (B)\", \"Service (C)\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3354,"value":"axisLabels = (g, labels) =>\n g\n .selectAll(\"text\")\n .data(labels, (d) => d.label)\n .join(\n (enter) =>\n enter\n .append(\"text\")\n .attr(\"dominant-baselines\", \"middle\")\n .attr(\n \"transform\",\n (label, i) => `translate(${label.position})rotate(${label.angle})`\n )\n .attr(\"alignment-baseline\", \"middle\")\n .attr(\"text-anchor\", \"middle\")\n .text((label) => label.label),\n (update) =>\n update.attr(\n \"transform\",\n (label, i) => `translate(${label.position})rotate(${label.angle})`\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = [\n ...demoData,\n { country: \"Serviceland\", agriculture: \"0\", industry: \"1\", service: \"99\" },\n { country: \"Industryland\", agriculture: \"1\", industry: \"99\", service: \"0\" },\n { country: \"Agricultureland\", agriculture: \"99\", industry: \"1\", service: \"0\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2151,"value":"demoData = d3.csv(\n await require.resolve(\n \"https://gist.githubusercontent.com/toja/811f0ddc765c59c26de544fd0e0ba46f/raw/eef11e930f6c05700faca47711b173f795a84181/sectors.csv\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"epsilon = 1e-4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"valuesTable = (labels, plot) => html`\n\n \n ${labels.map((label) => ``)}\n \n \n ${\n plot === 0\n ? ``\n : plot.map((value) => ``)\n } \n \n

${label}
\n Hover your mouse over the plot to view the ternary values at that point\n	${formatPercentage(value)}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2607,"value":"md`### Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3390,"value":"getDomainLengths = domains =>\n new Set(\n domains.map(domain => {\n // round differences\n // https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary\n const d0 = Math.round((domain[0] + Number.EPSILON) * 100) / 100;\n const d1 = Math.round((domain[1] + Number.EPSILON) * 100) / 100;\n\n return Math.abs(d1 - d0);\n })\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"insideDomain = n => (n > 0.999999 ? 1 : n < 0.000001 ? 0 : n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3242,"value":"formatPercentage = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2602,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3482,"value":"d3Ternary = import(\"d3-ternary\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3484,"value":"ternaryPlot = d3Ternary.ternaryPlot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3486,"value":"barycentric = d3Ternary.barycentric","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"radius = Math.min(width, height) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// to keep the triangle centered\nyOffset = radius/4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"height = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3503,"value":"import { freelanceBanner } from \"@julesblm/freelance-banner\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"