Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Feb 20
2 stars
qmflBarycentric = barycentric()
.a(d => d.quartz)
.b(d => d.feldspar)
.c(d => d.lithic)
qmflTernaryPlot = ternaryPlot(qmflBarycentric)
.radius(radius)
.labels(["Qm", "F", "L"])
drawTernaryPlot = (someTernaryPlot) => {
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("height", 300)
.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 axisLabelsGroup = chart
.append("g")
.attr("class", "axis-labels")
.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");
axisTicksGroups.call(ticks);
const trianglePath = chart
.append("path")
.attr("d", someTernaryPlot.triangle())
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2);
chart
.append("g")
.attr("class", "divisions")
.selectAll("path")
.data(ternaryDivisions.map((d) => d.coords))
.join("path")
.attr("d", closedLine)
.attr("fill", "none")
.attr("stroke", "black")
// .attr("stroke-opacity", 0.4)
.attr("stroke-width", 1)
.append("title")
.text((d) => d.texture);
chart
.append("g")
.attr("class", "lines")
.selectAll("path")
.data(ternaryLines.map((d) => d.coords))
.join("path")
.attr("d", openLine)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-dasharray", "4 1")
.attr("stroke-width", 1);
if (toggle) {
chart
.append("g")
.selectAll("text")
.data(ternaryDivisions)
.join("text")
.attr("transform", (d) => `translate(${d.centroid})rotate(${d.rotation})`)
.attr("text-anchor", "middle")
.attr("stroke", "ghostwhite")
.attr("stroke-width", 2)
.attr("paint-order", "stroke")
.attr("alignment-baseline", "middle")
.attr("font-size", 16)
.text((d) => d.source);
}
const labels = chart
.append("g")
.selectAll("text")
.data(ternaryLabels)
.join("text")
.attr("transform", (d) => `translate(${d.coords})rotate(${d.rotation})`)
.attr("text-anchor", "middle")
.attr("stroke", "ghostwhite")
.attr("fill", "dimgray")
.attr("stroke-width", 2)
.attr("paint-order", "stroke")
.attr("alignment-baseline", "middle")
.attr("font-size", 12)
.text((d) => d.name);
function handleMouseMove(d) {
const xy = d3.pointer(d);
const inverse = someTernaryPlot.invert(xy);
node.dispatchEvent(new CustomEvent("input"), { bubbles: true });
node.value = inverse;
}
return svg.node();
}
ternaryPlot = d3Ternary.ternaryPlot
barycentric = d3Ternary.barycentric
d3Ternary = import("d3-ternary")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
