31:T12f5,mapboxMap = { const container = html`

`; //let container2 = DOM.element('div', { style: `width:830px;height:1010px` }); yield container; mapboxgl.accessToken = "pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw"; var map = new mapboxgl.Map({ container: container, style: "mapbox://styles/mapbox/streets-v11", center: [-104.64653403664994, 40.287727985257746], //init_marker, //[0,50], projection: "globe", minZoom: 1, zoom: 2 }); //const zoomThreshold = 3; map.addControl(new mapboxgl.FullscreenControl()); map.addControl(new mapboxgl.NavigationControl()); // Add geolocate control to the map. map.addControl( new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }) ); map.on("load", () => { map.resize(); map.addSource("10m-bathymetry-81bsvj", { type: "vector", url: "mapbox://mapbox.9tm8dx88" }); map.addLayer( { id: "10m-bathymetry-81bsvj", type: "fill", source: "10m-bathymetry-81bsvj", "source-layer": "10m-bathymetry-81bsvj", layout: {}, paint: { "fill-outline-color": "hsla(337, 82%, 62%, 0)", // cubic bezier is a four point curve for smooth and precise styling // adjust the points to change the rate and intensity of interpolation "fill-color": [ "interpolate", ["cubic-bezier", 0, 0.5, 1, 0.5], ["get", "DEPTH"], 200, "#78bced", 9000, "#15659f" ] } }, "land-structure-polygon" ); map.addSource("line2", { type: "geojson", // Line metrics is required to use the 'line-progress' property // lineMetrics: false, data: macrostratColumns }); map.addLayer( { type: "line", source: "line2", id: "line2", paint: { "line-color": "grey", "line-width": 1 }, layout: { "line-cap": "round", "line-join": "round" } }, "waterway-label" ); map.addLayer( { id: "fill2", type: "fill", source: "line2", // reference the data source layout: {}, paint: { "fill-color": "grey", "fill-opacity": 0.2 } }, "waterway-label" ); }); const popup3 = new mapboxgl.Popup({ closeButton: false }); map.on("mouseenter", "fill2", function (e) { // Change the cursor to a pointer when the mouse is over the states layer. map.getCanvas().style.cursor = "pointer"; const pinRoute = d3.geoCentroid(e.features[0]); var title = "" + e.features[0].properties.col_name + "" + // '' + e.features[0].properties.description + '

' + "(MB1 click to see strat column)"; popup3.setLngLat(pinRoute).setHTML(title).setMaxWidth("500px").addTo(map); //.setLngLat(e.lngLat) //.setHTML(title).setMaxWidth("500px") //.addTo(map); }); map.on("touchmove", "fill2", function (e) { // Change the cursor to a pointer when the mouse is over the states layer. map.getCanvas().style.cursor = "pointer"; const pinRoute = d3.geoCentroid(e.features[0]); var title = "" + e.features[0].properties.col_name + "" + // '' + e.features[0].properties.description + '
' + "(MB1 click to see strat column)"; popup3.setLngLat(pinRoute).setHTML(title).setMaxWidth("500px").addTo(map); //.setLngLat(e.lngLat) //.setHTML(title).setMaxWidth("500px") //.addTo(map); }); // Change it back to a pointer when it leaves. map.on("mouseleave", "fill2", function () { map.getCanvas().style.cursor = ""; popup3.remove(); }); /*const el = document.createElement("div"); el.id = "marker";*/ const marker = new mapboxgl.Marker({ color: "red", scale: 0.8, draggable: false, pitchAlignment: "auto", rotationAlignment: "auto" }); marker .setLngLat([-104.64653403664994, 40.287727985257746]) // .setPopup(popup) .addTo(map); map.on("click", "fill2", function (e) { // Change the cursor to a pointer when the mouse is over the states layer. mutable nHood = e.features[0].properties.col_id; const pinRoute = d3.geoCentroid(e.features[0]); map.flyTo({ center: pinRoute, //duration: 12000, essential: true //zoom: //pitch: 75, //bearing: 0, }); marker.setLngLat(pinRoute); // .setPopup(popup) //.addTo(map); // .togglePopup(); }); }32:T1166,function stratColumn2() { if (strat.success.data.length == 0) { return "No stratigraphy info available at this location"; } const svg = d3 .select("svgElement") .attr("width", 400) .attr("height", 1010 + 10) .attr("viewBox", [0, 0, 400, 1020]) .attr("preserveAspectRatio", "xMinYMin") .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); 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(); }33:T10bf,function stratColumn() { if (strat.success.data.length == 0) { return "No stratigraphy info available at this location"; } const svg = d3 .create("svg") .attr("width", 400) .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(); }34:T5ec,/*viewof macrostratMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width/1.7}px;height:${width*0.8}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let macrostratColumnLayer = L.geoJson(macrostratColumns, { weight: 1, color: '#432', onEachFeature: onEachFeature }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.col_id; }).addTo(map); //Adds the layer to the map. map.on('click', () => mutable nHood = null ); map.fitBounds(macrostratColumnLayer.getBounds()); }*/35:[] 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":1363,"value":"viewof pagett = md`# STRATIGRAPHIC ATLAS OF THE WORLD`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"dashboard = html` \n \n \n \n \n
\n ${viewof maptt}\n ${mapboxMap}\n \n ${viewof title}\n ${viewof col}\n
`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"viewof h = number({placeholder: \"Polygon ID\", value: 498, submit: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"viewof desc = md` #### Hover your mouse over the color boxes to see more info `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"h","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"viewof loc = {\n const form = html`