31:T10bf,function stratColumn() { if (strat.success.data.length == 0) { return "No stratigraphy info available at this location"; } const svg = d3 .create("svg") .attr("width", 800) .attr("height", 1010 + 10); var displayedSections = numSections; var h, lithw, environw, posTop, lithPosLeft, environPosLeft, sectionAgeRange, lithId, lithFill, lithPattern, environId, environFill, patternId; var totalAgeRange = strat_clipped[displayedSections - 1].b_age - strat.success.data[0].t_age; var pixelsPerMilYrs = 1010 / totalAgeRange; for (var j = 0; j < displayedSections; j++) { //This loops through age sections lithPosLeft = 250; // First box of each section is aligned left //environPosLeft=520; sectionAgeRange = strat.success.data[j].b_age - strat.success.data[j].t_age; h = sectionAgeRange * pixelsPerMilYrs; //height of section posTop = (strat.success.data[j].t_age - strat.success.data[0].t_age) * pixelsPerMilYrs; for (var k = 0; k < lithsPerSection[j]; k++) { //This loops through all the rock types in each section lithId = strat.success.data[j].lith[k].lith_id; lithFill = lith.success.data.find(({ lith_id }) => lith_id === lithId) .color; // d3.image( // "https://cors-anywhere.herokuapp.com/https://davenquinn.com/projects/geologic-patterns/assets/png/" + // lith.success.data.find(({ lith_id }) => lith_id === lithId).fill + // ".png", // { crossOrigin: "anonymous" } //); //lithPattern = "https://cors-anywhere.herokuapp.com/https://davenquinn.com/projects/geologic-patterns/assets/png/"+lith.success.data.find( ({ lith_id }) => lith_id === lithId ).fill+".png"; lithPattern = "https://raw.githubusercontent.com/davenquinn/geologic-patterns/master/assets/png/" + lith.success.data.find(({ lith_id }) => lith_id === lithId).fill + ".png"; if ( lith.success.data.find(({ lith_id }) => lith_id === lithId).fill == 0 ) { lithPattern = ""; } //lithPattern = lithWithPatterns.success.data.find( // ({ lith_id }) => lith_id === lithId //).pattern; patternId = "dQPattern_" + j + "_" + k; lithw = 200 * strat.success.data[j].lith[k].prop; svg.append("g"); svg .append("rect") //Add rectangles with a solid color fill .attr("x", lithPosLeft) .attr("y", posTop) .attr("width", lithw) .attr("height", h) .style("fill", lithFill); svg .append("defs") //Define a pattern to add to each retangle .append("pattern") .attr('id', patternId) .attr("patternUnits", "userSpaceOnUse") .attr("width", 100) .attr("height", 100) .append("image") .attr("x", 0) .attr("y", 0) .attr("width", 100) .attr("height", 100) .attr("xlink:href", lithPattern); svg .append("rect") //Add rectangles with the pattern fill .attr("x", lithPosLeft) .attr("y", posTop) .attr("width", lithw) .attr("height", h) .style("fill", "url(#" + patternId + ")") .append("title") .text(strat.success.data[j].lith[k].name); //Show rock type on mouseover lithPosLeft = lithPosLeft + lithw; } svg.node().append(verticalAxis); /*This is commented out for now because depositional environment is not defined for all sections for (var l=0; l environ_id === environId ).color; environw=200*strat.success.data[j].environ[l].prop; svg.append("g") .style("stroke", "black") .append("rect") .attr("x", environPosLeft) .attr("y", posTop) .attr("width", environw) .attr("height", h) .style("fill", environFill) .append("title") .text(strat.success.data[j].environ[l].name); environPosLeft=environPosLeft+environw; }*/ } return svg.node(); }32:[] 2f:{"title":"Stratigraphy Visualizer","cells":[{"id":0,"value":"md`# Stratigraphy Visualizer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md` Ever wondered what kinds of rocks you might find if you went digging in your backyard? Curious about the lithostratigraphy of an oil producing basin?

\nLuckily, [Macrostrat](https://macrostrat.org/) has collected this sub-surface information and made it accessible through an [API](https://macrostrat.org/api/). This notebook will help you visulalize the information by simply entering a location. The timescale on the left is a vertical version of the [Geological Timescale by julesblm](https://observablehq.com/@julesblm/geological-timescale), without the interactive features. \nMany thanks to [Jed Fox](https://observablehq.com/@j-f1) for adding the option to use your current location.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"viewof loc = {\n const form = html`