Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Feb 20
addLabels = (node, labels, rotate = 0) =>
node
.append("g")
.selectAll("text")
.data(labels)
.join("text")
.attr("transform", (d) => `translate(${d.coords})rotate(${rotate})`)
.attr("text-anchor", "middle")
.attr("stroke", "ghostwhite")
.attr("stroke-width", 4)
.attr("paint-order", "stroke")
.attr("alignment-baseline", "middle")
.attr("font-size", 13)
.selectAll("tspan")
.data((d) => d.label.split(/\n/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, D) => `${(i === D.length - 1) * 0.3 + i * 0.9}em`)
.text((d) => d)
qapTernaryPlot = ternaryPlot(qapBarycentric)
.radius(radius)
.labels(["Quartz"]) //["Alkali", "Plagioclase"
.labelAngles([0, 0, 0])
.labelOffsets([45, 50, 80])
fpaTernaryPlot = ternaryPlot(fpaBarycentric)
.radius(radius)
.labels(["Feldspar", "",""]) // ["Feldspar", "Plagioclase", "Alkali"]
.tickAngles([180, 60, -60])
.tickTextAnchors(["end", "end", "end"])
.labelAngles([180, 60, -60])
qapBarycentric = barycentric()
.a((d) => d.quartz)
.b((d) => d.alkali)
.c((d) => d.plagioclase)
fpaBarycentric = barycentric()
.a((d) => d.feldspar)
.b((d) => d.plagioclase)
.c((d) => d.alkali)
fpaTernaryLines = makeTernaryLines(fpaLines, fpaTernaryPlot)
qapTernaryLines = makeTernaryLines(qapLines, qapTernaryPlot)
makeTernaryLines = (lines, ternaryPlot) =>
lines.map((d) => {
const coords = d.values.map(ternaryPlot);
return { ...d, coords };
})
height = 640
radius = Math.min(width, height) / 2
// to keep the triangle centered
yOffset = radius / 4
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", 0.0001).remove()
)
import { valuesTable, grid, axisLabels } from "@julesblm/d3-ternary"
d3Ternary = import("d3-ternary")
barycentric = d3Ternary.barycentric
ternaryPlot = d3Ternary.ternaryPlot
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.
