Interested in data visualisation, maps, JavasScript, and geology
qfrBarycentric = barycentric()
.a(d => d.quartz)
.b(d => d.feldspar)
.c(d => d.lithic)
qfrTernaryPlot = ternaryPlot(qfrBarycentric)
.radius(radius)
.labels(["Quartz", "Feldspar", "Lithic fragments"])
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("fill-opacity", "0.6")
.attr("stroke", "black")
.attr("stroke-width", 2)
.append("title")
.text((d) => d.texture);
chart
.append("g")
.selectAll("text")
.data(ternaryDivisions)
.join("text")
.attr(
"transform",
(d) => `translate(${someTernaryPlot(d.center)})rotate(${d.rotation})`
)
.attr("text-anchor", "middle")
.attr("stroke", "ghostwhite")
.attr("stroke-width", 4)
.attr("paint-order", "stroke")
.attr("alignment-baseline", "middle")
.attr("font-size", 13)
.text((d) => d.texture);
function handleMouseMove(d) {
const xy = d3.pointer(d);
const inverse = qfrTernaryPlot.invert(xy);
node.dispatchEvent(new CustomEvent("input"), { bubbles: true });
node.value = inverse;
}
return svg.node();
}
format = d3.format(".2%")
height = 640
radius = Math.min(width, height) / 2
// to keep the triangle centered
yOffset = radius / 4
import { valuesTable, grid, axisLabels, ticks } from "@julesblm/d3-ternary"
ternaryPlot = d3Ternary.ternaryPlot
barycentric = d3Ternary.barycentric
d3Ternary = import("d3-ternary")
d3 = require('d3@v6')
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.
