QFR Diagram - Folk Classification of Sedimentary Rock / Jules Blom

Jules Blom

Interested in data visualisation, maps, JavasScript, and geology

Workspace

Public

Ternary Plots with d3-ternary

Edited

Feb 20

3 forks

2 stars

Ternary Plots with d3-ternary

Introducing d3-ternary: A module for Ternary Plots d3-ternary: Ternary Plots with D3.js Ternary Plot Documentation USDA Soil Textural Triangle Ternary Plot With Hexagonal Binning

QFR Diagram - Folk Classification of Sedimentary Rock

Reversed Axes Ternary Plot Ternary Plot with Density Contours Ternary Slider with d3-ternary Food.com Nutritional Ternary Plot with d3-ternary QFl Provenance Category Ternary Diagram QmFl Provenance Category Ternary Diagram QAPF Diagram

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.

Learn more