2c:null 2d:["$","title",null,{"children":"Ternary Plot with Density Contours | Jules Blom | Observable"}] 32:Ta82,viewof contourTernaryPlot = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const chart = svg .append("g") .attr("transform", `translate(${width / 2} ${height / 2 + yOffset})`) .attr("height", 300) .attr("font-family", "sans-serif") .attr("id", "chart"); chart.append("circle").attr("r", 4).attr("fill", "gold"); chart .append("circle") .attr("r", 4) .attr("cx", 90) .attr("cy", -3 * bandwidth) .attr("fill", "coral"); chart .append("circle") .attr("r", 4) .attr("cx", -3 * bandwidth) .attr("cy", 120) .attr("fill", "coral"); const defs = chart.append("defs"); const clipPath = defs .append("clipPath") .attr("id", "trianglePath") .append("path") .attr("d", densityContourTernaryPlot.triangle()); // initial triangle const trianglePath = chart .append("path") .attr("d", densityContourTernaryPlot.triangle()) .attr("fill", "none") .attr("stroke-width", "none"); const axisLabelsGroup = chart .append("g") .attr("class", "axis-labels") .call(axisLabels, densityContourTernaryPlot.axisLabels()); const gridLinesPaths = densityContourTernaryPlot .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(densityContourTernaryPlot.ticks()) .join("g") .attr("class", "axis-ticks"); axisTicksGroups.call(ticks); const triangleBounds = chart .append("path") .attr("d", densityContourTernaryPlot.triangle()) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 2); // data const dots = chart .append("g") .attr("stroke", "white") .attr("class", "data") .attr("clip-path", "url(#trianglePath)") .selectAll("circle") .data(ternaryData) .join("circle") .attr("r", 2) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); dots.append("title").text( (d) => `${d.country} Agriculture: ${d.agriculture} Industry: ${d.industry} Service: ${d.service}` ); chart .append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("clip-path", "url(#trianglePath)") .selectAll("path") .data(contours) .join("path") .attr("stroke-width", (d, i) => (i % 5 ? 0.25 : 1)) .attr("d", d3.geoPath()); // a geoJSON multiPolygon is passed to d3.geoPath to display, using null or d3.geoIdentity return svg.node(); }33:[] 30:{"id":"9246815758fc4083","slug":"ternary-plot-with-density-contours","title":"Ternary Plot with Density Contours","thumbnail":"fe9bf86fef55cbfa7cf3f3c2e1ddea80931c502ab700567fb18dba0b5b3503da","access_level":"public","create_time":"$D2021-02-10T18:03:19.618Z","update_time":"$D2022-08-18T12:53:50.191Z","view_time":null,"first_public_time":"$D2021-02-10T18:23:53.940Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":228,"publish_version":228,"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":2,"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":"Ternary Plot with Density Contours","cells":[{"id":0,"value":"md`# Ternary Plot with Density Contours\n\nUsing [d3-contour](https://github.com/d3/d3-contour#contourDensity)'s *d3*.[contourDensity()](https://github.com/d3/d3-contour#contourDensity) to construct a new density estimator.\n\nSee also [Density Contours](https://observablehq.com/@d3/density-contours?collection=@d3/d3-contour) notebook by Mike Bostock.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`

To do:\n

Contours appear to be clipped at [-3 × bandwidth, -3 × bandwidth], likely something to do with .size() of contourDensity()?
A dataset where the points have a z-value, say a physical chemistry dataset would be a better example

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"contours = d3\n .contourDensity()\n .x((d) => d.x)\n .y((d) => d.y)\n .size([width * 2, height * 2])\n .bandwidth(bandwidth)\n .thresholds(thresholds)(ternaryData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof bandwidth = Range([10, 200], {\n value: 50,\n step: 5,\n label: \"Bandwidth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof thresholds = Range([10, 70], {\n value: 30,\n step: 5,\n label: \"Thresholds\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"contourBarycentric = barycentric()\n .a(d => d.agriculture)\n .b(d => d.industry)\n .c(d => d.service)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"ternaryData = data.map(d => {\n const [x, y] = densityContourTernaryPlot(d);\n return { x, y, ...d };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"densityContourTernaryPlot = ternaryPlot(contourBarycentric)\n .radius(radius)\n .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":25,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":20,"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":11,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {\n data,\n ternaryPlot,\n barycentric,\n grid,\n ticks,\n axisLabels\n} from \"@julesblm/d3-ternary\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"import { Range } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@7\", \"d3-contour@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"