2b:null 2c:["$","title",null,{"children":"Ternary Plot Banner | Jules Blom | Observable"}] 31:Te1c,copiedPlot = `0%50%100%0%50%100%0%50%100%`32:T441,drawBasicTernaryPlot = { const height = 170; const yOffset = 70 / 4; const node = DOM.svg(width, height); const svg = d3.select(node); const radius = miniTernaryPlot.radius(); const chart = svg .append("g") .attr("transform", `translate(${width / 2} ${height / 2 + yOffset})`) .attr("height", 300) .attr("font-family", "sans-serif") .attr("id", "chart"); const gridLinesPaths = miniTernaryPlot .gridLines(5) .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", 8) .selectAll("g") .data(miniTernaryPlot.ticks(3)) .join("g") .attr("class", "axis-ticks"); axisTicksGroups.call(ticks); // initial triangle const trianglePath = chart .append("path") .attr("d", miniTernaryPlot.triangle()) .attr("fill", "transparent") .attr("stroke", "black") .attr("stroke-width", 2); return svg.node(); }33:[] 2f:{"id":"4e8d58b6f7d76abb","slug":"ternary-plot-banner","title":"Ternary Plot Banner","thumbnail":"1dfffe8b1997d91804b6d19a71eded7eb63f4f4e77b485937ca0b9cf505e6704","access_level":"public","create_time":"$D2021-01-29T14:30:02.694Z","update_time":"$D2021-04-06T19:32:28.344Z","view_time":null,"first_public_time":"$D2021-01-29T14:38:21.183Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":70,"publish_version":70,"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Ternary Plot Banner","cells":[{"id":0,"value":"md`# Ternary Plot Banner\n\nInspired by the banner in [Density Plots](https://observablehq.com/collection/@twitter/density) by Yuri Vishnevsky`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"banner(\"Ternary Plot Banner\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"banner = text => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"drawBasicTernaryPlot.cloneNode()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"miniTernaryPlot = {\n const normalTernary = barycentric();\n\n return ternaryPlot(normalTernary).radius(70);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {\n ternaryPlot,\n barycentric,\n ticks,\n axisLabels,\n grid\n} from \"@julesblm/d3-ternary\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require('d3@v6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"