2e:null 2f:["$","title",null,{"children":"State Soils | Priya | Observable"}] 34:T4ae,Just like states have state birds and state flowers, all 50 states in the USA have an official state soil. Twenty states have legislatively established their state soil (Nebraska being the first state to declare Holdrege as their state soil). While I vaguely remember learning about California's state soil along with state song, bird, flower etc. in the fourth grade I stumbled upon this fact a couple months ago and become a bit obsessed with the concept. I fell down a (very deep) rabbit hole of [Munsell soil colors](https://observablehq.com/@pmisner/soil-colors?collection=@pmisner/soil), soil textures, [archival soil surveys](https://archive.org/details/AtlasOfAmericanAgriculture/page/n133/mode/2up) and an [entire subreddit devoted to memes of the soil texture compass chart](https://www.reddit.com/r/SoilTextureCompass/). After a lot of research and exploring in the world of soil, I swung back to the what got me interested in soil in the first place: state soils. Using the USDA's *Web Site for Official Soil Series Descriptions and Series Classification* I was able to get accurate color and depth data for all 50 states soils, illustrated below in a tile map of the United States. 35:Tfe8,{ const tileDimens = { width: tileSize, height: tileSize }; const tileSpacer = 4; const svg = d3 .create("svg") .attr("width", (tileDimens.width + tileSpacer) * 14) .attr("height", (tileDimens.height + tileSpacer) * 8) .style("background-color", "white"); svg .append("g") .attr("transform", "translate(142,70)") .append("path") .attr( "d", "M10 1H10.5V0.5H10V1ZM9.64645 46.3536C9.84171 46.5488 10.1583 46.5488 10.3536 46.3536L13.5355 43.1716C13.7308 42.9763 13.7308 42.6597 13.5355 42.4645C13.3403 42.2692 13.0237 42.2692 12.8284 42.4645L10 45.2929L7.17157 42.4645C6.97631 42.2692 6.65973 42.2692 6.46447 42.4645C6.2692 42.6597 6.2692 42.9763 6.46447 43.1716L9.64645 46.3536ZM9.5 1V46H10.5V1H9.5ZM10 0.5H0.5V1.5H10V0.5Z" ) .attr("transform", "scale (-1, 1)"); svg .selectAll("rect") .data(filteredStates) .enter() .append("rect") .attr("width", tileDimens.width) .attr("height", tileDimens.height) .attr("x", (d) => (d.col - 1) * (tileDimens.width + tileSpacer)) .attr("y", (d) => (d.row - 1) * (tileDimens.height + tileSpacer)) .attr("fill", "rgba(0,0,0,.1)") .attr("id", (d) => d.code); //append availableStates.map((state) => { let stateSoilArray = soilMetrics.filter((x, i) => x.State === state); console.log(stateSoilArray); const soilMaxDepth = stateSoilArray.reduce((prev, curr) => parseInt(curr["End Depth (cm)"]) > prev ? parseInt(curr["End Depth (cm)"]) : prev["End Depth (cm)"] ); const svgDefs = svg.append("defs"); stateSoilArray.map((x, i) => { const randomIdString = `soilGradient${x.hue}${x.value}${ x.value }${Math.random()}`; let soilGradient = svgDefs .append("linearGradient") .attr("id", randomIdString); soilGradient .attr("y1", "50%") .attr("y2", "90%") .attr("x1", "0%") .attr("x2", "0%"); //Set the color for the start (0%) soilGradient .append("stop") .attr("offset", "0%") .attr( "stop-color", getSoilColor({ hue: x.hue, value: x.value, chroma: x.chroma }) ); //Set the color for the end (100%) soilGradient .append("stop") .attr("offset", "100%") .attr( "stop-color", getSoilColor({ hue: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].hue : x.hue, value: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].value : x.value, chroma: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].chroma : x.chroma }) ); const tileLocation = filteredStates.filter((x) => x.state === state)[0]; const xOffset = (tileLocation.col - 1) * (tileDimens.width + tileSpacer); const yOffset = (tileLocation.row - 1) * (tileDimens.width + tileSpacer); svg.append(function () { return soilSwatch({ currRow: x, nextRow: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1] : x, gradient: randomIdString, depthToScaleAgainst: soilMaxDepth, xOffset: xOffset, yOffset: yOffset }).node(); }); }); }); //state labels svg .selectAll("text") .data(filteredStates) .enter() .append("text") .attr("x", (d) => (d.col - 1) * (tileDimens.width + tileSpacer) + 4) .attr( "y", (d) => (d.row - 1) * (tileDimens.height + tileSpacer) + tileSize - 8 ) .text((d) => d.code) .attr("fill", "white") .style("text-shadow", "0 0 3px rgba(0,0,0,0.5)") .style("font-size", "10px") .style("font-weight", "600"); svg .append("g") .attr("id", "soildepth") .attr("transform", "translate(146,75)") .append("text") .attr("font-size", "14px") .attr("font-style", "italic") .text("Soil Depth"); return svg.node(); }36:Ta66,{ let stateSoilArray = soilMetrics.filter( (x, i) => x.State === stateSoilSelection ); const soilMaxDepth = stateSoilArray.reduce((prev, curr) => parseInt(curr["End Depth (cm)"]) > prev ? parseInt(curr["End Depth (cm)"]) : prev["End Depth (cm)"] ); const width = 100; const height = soilMaxDepth + 10; let svg = d3 .create("svg") .attr("width", width * 2 + 50) .attr("height", height) .attr("id", "generated"); svg .append("g") .attr("transform", "translate(128,4)") .append("path") .attr( "d", "M10 1H10.5V0.5H10V1ZM9.64645 46.3536C9.84171 46.5488 10.1583 46.5488 10.3536 46.3536L13.5355 43.1716C13.7308 42.9763 13.7308 42.6597 13.5355 42.4645C13.3403 42.2692 13.0237 42.2692 12.8284 42.4645L10 45.2929L7.17157 42.4645C6.97631 42.2692 6.65973 42.2692 6.46447 42.4645C6.2692 42.6597 6.2692 42.9763 6.46447 43.1716L9.64645 46.3536ZM9.5 1V46H10.5V1H9.5ZM10 0.5H0.5V1.5H10V0.5Z" ) .attr("transform", "scale (-1.25,1.25)"); svg .append("g") .attr("id", "soildepth") .attr("transform", "translate(132,12)") .append("text") .attr("font-size", "16px") .attr("font-style", "italic") .text("Soil Depth"); const svgDefs = svg.append("defs"); stateSoilArray.map((x, i) => { const randomIdString = `soilGradient${x.hue}${x.value}${ x.value }${Math.random()}`; let soilGradient = svgDefs .append("linearGradient") .attr("id", randomIdString); soilGradient .attr("y1", "50%") .attr("y2", "90%") .attr("x1", "0%") .attr("x2", "0%"); //Set the color for the start (0%) soilGradient .append("stop") .attr("offset", "0%") .attr( "stop-color", getSoilColor({ hue: x.hue, value: x.value, chroma: x.chroma }) ); //Set the color for the end (100%) soilGradient .append("stop") .attr("offset", "100%") .attr( "stop-color", getSoilColor({ hue: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].hue : x.hue, value: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].value : x.value, chroma: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1].chroma : x.chroma }) ); svg.append(function () { return soilSwatch({ currRow: x, nextRow: i < stateSoilArray.length - 1 ? stateSoilArray[i + 1] : x, gradient: randomIdString, width: width }).node(); }); }); return svg.node(); }37:[{"id":"c0de2a0aade5bd3735e5b13539b33ac1aa8bf29c808a055e243c3829c9792e4a72437493b8a3df7193e1bae63cf45ac44118700bac6aab7bc151ee347e2c6795","href":"https://static.observableusercontent.com/files/c0de2a0aade5bd3735e5b13539b33ac1aa8bf29c808a055e243c3829c9792e4a72437493b8a3df7193e1bae63cf45ac44118700bac6aab7bc151ee347e2c6795","name":"tilemap.csv","type":"text/csv","lastModified":1647834355150.807,"size":22833},{"id":"cb9e0d369f040f19922d25fb870d336d30aa4d7f08ac630ac9b4088e4500c5619a536e14877c577946ef503f19d1535e0213fe24b427d2764a180c86a85867d7","href":"https://static.observableusercontent.com/files/cb9e0d369f040f19922d25fb870d336d30aa4d7f08ac630ac9b4088e4500c5619a536e14877c577946ef503f19d1535e0213fe24b427d2764a180c86a85867d7","name":"State Soil - SoilMetrics (10).csv","type":"text/csv","lastModified":1648513914492.893,"size":19410}] 32:{"id":"1a0d67203e698ce4","slug":"state-soils","title":"State Soils","thumbnail":"a1efb8e34b896bcc0377c32e84233682b678e73a4b236eed5e24e37ed9f9ea37","access_level":"public","create_time":"$D2022-01-25T05:49:09.113Z","update_time":"$D2022-04-16T05:12:43.352Z","view_time":null,"first_public_time":"$D2022-04-16T05:12:55.337Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":"starter_2024"},"version":2044,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null}],"members":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"d96ea904d4d96a21","slug":"soil","title":"Soil","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"type":"notebook","body":{"title":"State Soils","cells":[{"id":0,"value":"# State Soils\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2017,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1498,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"To see individual state soils, select from the dropdown below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1606,"value":"viewof stateSoilSelection = Inputs.select(availableStates, {\n label: \"\",\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1937,"value":"Check out the [References + Inspiration](https://observablehq.com/@pmisner/soil-references) page for the full list. Special thanks to RIT's Color Science Laboratory for providing the original Munsell color data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2040,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1910,"value":"tileSize = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"function soilSwatch({\n currRow,\n nextRow,\n gradient,\n depthToScaleAgainst = null,\n xOffset = 0,\n yOffset = 0,\n width = tileSize\n}) {\n const dimensions = {\n width: width,\n height: depthToScaleAgainst\n ? ((parseInt(currRow[\"End Depth (cm)\"]) -\n parseInt(currRow[\"Start Depth (cm)\"])) /\n depthToScaleAgainst) *\n width +\n 0.25\n : parseInt(currRow[\"End Depth (cm)\"]) -\n parseInt(currRow[\"Start Depth (cm)\"]) +\n 0.25\n };\n\n const rect = d3\n .create(\"svg:rect\")\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height)\n .attr(\n \"y\",\n depthToScaleAgainst\n ? (parseInt(currRow[\"Start Depth (cm)\"]) / depthToScaleAgainst) *\n width +\n yOffset\n : parseInt(currRow[\"Start Depth (cm)\"]) + yOffset\n )\n .attr(\"x\", xOffset)\n // .style(\"fill\", `url(#${gradient}`);\n .style(\"fill\", `url(#${gradient}`);\n return rect;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1169,"value":"\nhtml``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"## Data and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1422,"value":"import {getSoilColor} from \"@pmisner/soil-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"tilemapRaw = d3.csvParse(await FileAttachment(\"tilemap.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"soilMetrics = d3.csvParse(\n await FileAttachment(\"State Soil - SoilMetrics (10).csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"filteredStates = tilemapRaw.filter(\n (x) => x.publication === \"Bloomberg 1\" && availableStates.includes(x.state)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"availableStates = [\n ...new Set(soilMetrics.map((x) => x.State).filter((x) => x.length > 1))\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"