31:T1201,viewof texturalTrianglePlot = { const node = DOM.svg(width, height); const svg = d3.select(node); const chart = svg .attr("id", "chart") .append("g") .attr("font-family", "sans-serif") .attr("transform", `translate(${width / 2} ${yOffset})`); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", "trianglePath") .append("path") .attr("d", textureTernaryPlot.triangle()); defs .append("marker") .attr("id", "arrow") .attr("markerWidth", "10") .attr("markerHeight", "10") .attr("refX", "0") .attr("refY", "3") .attr("orient", "auto") .attr("markerUnits", "strokeWidth") .append("path") .attr("d", "M 9 0 L 9 6 L 0 3 z"); chart .append("g") .attr("class", "grid") .selectAll("g") .data(gridLines) .join("path") .attr("d", (d) => d) .attr("stroke", "black") .attr("stroke-width", 0.5); const tickGroup = chart .append("g") .attr("class", "ternary-ticks") .attr("font-size", 10) .selectAll("g") .data(textureTernaryPlot.ticks()) .join("g") .attr("class", "axis-ticks") .selectAll("g") .data((d) => d) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(${d.position})`) .call((g) => g .append("text") .attr("text-anchor", (d) => d.textAnchor) .attr("transform", (d) => `rotate(${d.angle})`) .attr("dx", (d) => (-d.size - 5) * (d.textAnchor === "start" ? -1 : 1)) .attr("dy", ".5em") .text((d) => d.tick) ) .call((g) => g .append("line") .attr("transform", (d) => `rotate(${d.angle + 90})`) .attr("y2", (d) => d.size * (d.textAnchor === "start" ? -1 : 1)) .attr("stroke", "grey") ); const axisLabelsGroup = chart .append("g") .attr("class", "axis-labels") .append("g") .attr("class", "labels") .attr("font-size", 16); const axisLabelsGroups = axisLabelsGroup .selectAll("text") .data(textureTernaryPlot.axisLabels({ center: true }), (d) => d.label) .join( (enter) => { const labelGroup = enter .append("g") .attr( "transform", (d, i) => `translate(${d.position})rotate(${d.angle - 60})` ); const axisArrow = labelGroup .append("line") .attr("stroke", "black") .attr("x1", (d, i) => (i === 2 ? 100 : -100)) .attr("x2", (d, i) => (i === 2 ? -100 : 100)) .attr("marker-start", "url(#arrow)"); const axisLabelText = labelGroup .append("text") .attr("text-anchor", "middle") .attr("stroke", "white") .attr("stroke-width", 7) .attr("paint-order", "stroke") .attr("transform", (_, i) => (i === 1 ? "rotate(180)" : undefined)) .attr("alignment-baseline", "middle") .text((d) => d.label); }, (update) => update.attr( "transform", (d, i) => `translate(${d.position})rotate(${d.angle})` ) ); chart .append("path") .attr("d", textureTernaryPlot.triangle()) .attr("fill", "none") .attr("pointer-events", "all") .attr("stroke", "black") .attr("stroke-width", "1.2px") .call( d3 .drag() .on("drag", ({ x, y }) => dragged(x, y)) .on("start", ({ x, y }) => dragged(x, y)) ); chart .append("g") .attr("class", "data") .attr("clip-path", "url(#trianglePath)") .selectAll("path") .data(ternaryDivisions.map((d) => d.coords)) .join("path") .attr("d", closedLine) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); chart .append("g") .selectAll("text") .data(ternaryDivisions) .join("text") .attr("x", (d) => d.centroid[0]) .attr("y", (d) => d.centroid[1]) .attr("text-anchor", "middle") .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke") .attr("alignment-baseline", "middle") .attr("font-size", 11) .text((d) => d.texture); const handle = chart .append("circle") .attr("id", "drag-handle") .attr("fill", "cornflowerblue") .attr("cx", 0) .attr("cy", 0) .attr("r", 4); handle.append("title").text((d) => d); function dragged(x, y) { handle.attr("cx", x).attr("cy", y); node.dispatchEvent(new CustomEvent("input"), { bubbles: true }); node.value = textureTernaryPlot.invert([x, y]); } node.value = textureTernaryPlot.invert([0, 0]); return node; }32:Tda9,divisions = [ { texture: "Silt", values: [ { clay: 0, sand: 20, silt: 80 }, { clay: 12, sand: 8, silt: 80 }, { clay: 12, sand: 0, silt: 88 }, { clay: 0, sand: 0, silt: 100 }, { clay: 0, sand: 20, silt: 80 }, ], }, { texture: "Silt loam", values: [ { clay: 0, sand: 20, silt: 80 }, { clay: 0, sand: 50, silt: 50 }, { clay: 27, sand: 23, silt: 50 }, { clay: 27, sand: 0, silt: 73 }, { clay: 12, sand: 0, silt: 88 }, { clay: 12, sand: 8, silt: 80 }, { clay: 0, sand: 20, silt: 80 }, ], }, { texture: "Loam", values: [ { clay: 7, sand: 43, silt: 50 }, { clay: 7, sand: 52, silt: 41 }, { clay: 20, sand: 52, silt: 28 }, { clay: 27, sand: 45, silt: 28 }, { clay: 27, sand: 23, silt: 50 }, { clay: 7, sand: 43, silt: 50 }, ], }, { texture: "Sand", values: [ { clay: 0, sand: 100, silt: 0 }, { clay: 10, sand: 90, silt: 0 }, { clay: 0, sand: 85, silt: 15 }, { clay: 0, sand: 100, silt: 0 }, ], }, { texture: "Loamy sand", values: [ { clay: 10, sand: 90, silt: 0 }, { clay: 15, sand: 85, silt: 0 }, { clay: 0, sand: 70, silt: 30 }, { clay: 0, sand: 85, silt: 15 }, { clay: 10, sand: 90, silt: 0 }, ], }, { texture: "Sandy loam", values: [ { clay: 20, sand: 80, silt: 0 }, { clay: 20, sand: 52, silt: 28 }, { clay: 7, sand: 52, silt: 41 }, { clay: 7, sand: 43, silt: 50 }, { clay: 0, sand: 50, silt: 50 }, { clay: 0, sand: 70, silt: 30 }, { clay: 15, sand: 85, silt: 0 }, { clay: 20, sand: 80, silt: 0 }, ], }, { texture: "Clay loam", values: [ { clay: 40, sand: 45, silt: 15 }, { clay: 40, sand: 20, silt: 40 }, { clay: 27, sand: 20, silt: 53 }, { clay: 27, sand: 45, silt: 28 }, { clay: 40, sand: 45, silt: 15 } ] }, { texture: "Sandy clay loam", values: [ { clay: 35, sand: 65, silt: 0 }, { clay: 35, sand: 45, silt: 20 }, { clay: 27, sand: 45, silt: 28 }, { clay: 20, sand: 52, silt: 28 }, { clay: 20, sand: 80, silt: 0 }, { clay: 35, sand: 65, silt: 0 }, ], }, { texture: "Sandy clay", values: [ { clay: 55, sand: 45, silt: 0 }, { clay: 35, sand: 45, silt: 20 }, { clay: 35, sand: 65, silt: 0 }, { clay: 55, sand: 45, silt: 0 }, ], }, { texture: "Clay", values: [ { clay: 100, sand: 0, silt: 0 }, { clay: 55, sand: 45, silt: 0 }, { clay: 40, sand: 45, silt: 15 }, { clay: 40, sand: 20, silt: 40 }, { clay: 60, sand: 0, silt: 40 }, { clay: 100, sand: 0, silt: 0 }, ], }, { texture: "Silty clay", values: [ { clay: 60, sand: 0, silt: 40 }, { clay: 40, sand: 20, silt: 40 }, { clay: 40, sand: 0, silt: 60 }, { clay: 60, sand: 0, silt: 40 }, ], }, { texture: "Silty clay loam", values: [ { clay: 40, sand: 0, silt: 60 }, { clay: 40, sand: 20, silt: 40 }, { clay: 27, sand: 20, silt: 53 }, { clay: 27, sand: 0, silt: 73 }, { clay: 40, sand: 0, silt: 60 }, ], }, ]; 33:[{"id":"468f488dca19682a34403438d7ba4179d6d4593eb91a43dd79e4a1e205274a34d8ae3731d973ca3e8ca1cd2e5fe45a7db7a71c9175644485307d1453f372c9a7","href":"https://static.observableusercontent.com/files/468f488dca19682a34403438d7ba4179d6d4593eb91a43dd79e4a1e205274a34d8ae3731d973ca3e8ca1cd2e5fe45a7db7a71c9175644485307d1453f372c9a7","name":"SoilTextureTriangle.jpg","type":"image/jpeg","lastModified":1783507603770.299,"size":72166}] 2f:{"title":"USDA Soil Textural Triangle","cells":[{"id":0,"value":"# USDA Soil Textural Triangle\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":865,"value":"A small demo of the [`d3-ternary`](https://observablehq.com/@julesblm/introducing-d3-ternary?collection=@julesblm/ternary-plots) module: a recreation of the USDA soil textural triangle, a ternary plot used to classify soils based on their physical texture; the ratios of sand, silt, and clay in the soil.\n\n## Make Your Own\n\nMake your own USDA soil triangle on [TernaryPlot.com](https://www.ternaryplot.com), click the \"Templates\" button above the table and select the USDA soil triangle.\n\n## Sources\n\n* [The Historical Development of the USDA textural triangle](https://umnsoilsteam.blogspot.com/2014/09/the-historical-development-of-usda.html) by University of Minnesota Soil Judging Team\n* [Wikipedia: Soil texture](https://en.wikipedia.org/wiki/Soil_texture)\n* [USDA Soil Texture Calculator](https://www.nrcs.usda.gov/wps/portal/nrcs/detail/soils/survey/?cid=nrcs142p2_054167) \n","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"html`\n

\n\n \n ${cleanLabels.map(\n (label) => ``\n )}\n \n \n ${\n texturalTrianglePlot\n ? texturalTrianglePlot.map((value) => ``)\n : `Drag the slider on the plot`\n } \n \n

${label}
${format(value)}

\nClick your pointer on the plot the see values at that point\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"formatPercentage = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"textureTernaryPlot = {\n const ternarySoil = barycentric()\n .a((d) => d.silt)\n .b((d) => d.clay)\n .c((d) => d.sand)\n .rotation(240);\n\n return ternaryPlot(ternarySoil)\n .radius(radius)\n .labels([\"Sand Separate, %\", \"Silt Separate, %\", \"Clay Separate, %\"])\n .labelAngles([60, -60, 0])\n .labelOffsets([100, 100, 100])\n .tickAngles([60, -60, 0])\n .tickFormat((t) => formatPercentage(1 - t))\n .tickTextAnchors([\"start\", \"start\", \"end\"]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"## Original","pinned":false,"hidden":false,"mode":"md"},{"id":900,"value":"htl.html`

Source: USDA Natural Resources Conservation Service

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"img = FileAttachment(\"SoilTextureTriangle.jpg\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"cleanLabels = textureTernaryPlot.labels().map(label => label.split(\", \")[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"gridLines = textureTernaryPlot\n .gridLines()\n .map(axisGrid => axisGrid.map(line).join(\" \"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"format = d3.format(\".2%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"ternaryDivisions = divisions.map((d) => {\n // add centroid for label position to each division\n const centroid = d3.polygonCentroid(d.values.map(textureTernaryPlot));\n const coords = d.values.map(textureTernaryPlot);\n const center = textureTernaryPlot.invert(centroid);\n\n return {\n ...d,\n coords,\n centroid,\n center: { clay: center[0], sand: center[1], silt: center[2] }\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"line = d3.line();","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"closedLine = d3.line().curve(d3.curveLinearClosed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require('d3@v6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"radius = height / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"yOffset = height / 2 + textureTernaryPlot.radius() / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"barycentric = d3Ternary.barycentric","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"ternaryPlot = d3Ternary.ternaryPlot","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3Ternary = import(\"d3-ternary\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}