30:Ta25,viewof circles = { let xAccessor = function(d) { return new Date(d.properties.time) }; let xScale = d3.scaleTime() .domain(d3.extent(quakes.features, xAccessor)) .range([margin.left, brushWidth - margin.right]); let x = function(d) { return xScale(xAccessor(d)); }; let y = function(d) { return yScale(yAccessor(d)) }; let xAxis = g => g .attr("transform", `translate(0,${brushHeight - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(5)) // .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", brushWidth - margin.right - margin.left) .attr("y", +28) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Time")); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).ticks(5)) // .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 8) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Magnitude")) const svg = d3.select(DOM.svg(brushWidth, brushHeight)); let start = JSON.parse( JSON.stringify(brush.extent()()) ); start[1][0] = start[0][0] + 1; let circles = svg.append("g") .attr("fill", "crimson") .selectAll("g") .data(quakes.features) .join("circle") .attr("transform", d => ("translate(" + [x(d), y(d)] + ")") ) .attr("r", 4); svg.append("g") .attr('id', 'mybrush') .call(brush.on("start brush end", brushed)) .call(brush.move, start); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); function brushed() { let [[x0, y0], [x1, y1]] = brush.extent()(); if (d3.event.selection) [[x0, y0], [x1, y1]] = d3.event.selection; svg.selectAll('circle') .classed('brushed', (d => (x0 <= x(d) && x(d) < x1 && y0 <= y(d) && y(d) < y1)) ) .each(function(d) { let circle = d3.select(d.properties.circle); let visible = d3.select(this).classed('brushed'); circle.attr('visibility', visible ? 'visible' : 'hidden') }); // svg.property("value", svg.selectAll('circle.brushed').data()).dispatch("input"); d3.select(map).select('#label').text(svg.selectAll('circle.brushed').nodes().length + " quakes"); } viewof datasource.onclick = () => { viewof datasource.dispatchEvent(new CustomEvent("input")) }; viewof datasource.dispatchEvent(new CustomEvent("input")); return svg.node(); }31:T704,overlay = { let svg = d3.select(map).select('svg'); let scale = d3.scaleLinear().domain([0, 10]).range([0,30]) const tooltip = d3.select(map).select('#tooltip'); svg.selectAll(".basin") .data(basins.features) .enter() .append("path") .attr("class","basin") .attr("d", path) .on("mouseover", basinTooltip) .on("mousemove", moveTooltip) .on("mouseout", hideTooltip); svg.selectAll(".play") .data(plays.features) .enter() .append("path") .attr("class","play") .attr("d", path) .on("mouseover", playTooltip) .on("mousemove", moveTooltip) .on("mouseout", hideTooltip); svg.append("g") .attr("fill", "crimson") .attr('fill-opacity', 0.5) .selectAll("g") .data(quakes.features) .join("circle") .each(function(d) { d.properties.circle = this}) .attr("transform", d => ("translate(" + projection(d.geometry.coordinates) + ")") ) .attr("r", d => scale(d.properties.mag)); svg.append('text').attr('id', 'label') .attr('font-size', 24) .attr('font-family', 'sans-serif') .attr('x', 0.8 * width) .attr('y', 0.1 * height) function basinTooltip(d) { if (tooltip) tooltip.html(d.properties.NAME + " (basin)"); } function playTooltip(d) { if (!tooltip) return; tooltip.html(d.properties.Shale_play + " (shale play)"); // mutable info = d.properties; } function moveTooltip(d) { if (tooltip) tooltip.style("top", (d3.event.layerY-10)+"px") .style("left",(d3.event.layerX+20)+"px") .style("visibility", "visible"); } function hideTooltip(d) { if (tooltip) tooltip.style("visibility", "hidden"); } return html`Geology data layer` }32:[] 2e:{"title":"Induced seismicity","cells":[{"id":0,"value":"md`# Induced seismicity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"md`This map of the south central U.S. shows all earthquakes exceeding magnitude 3 since \nthe year 2000. The sharp increase starting around 2010 is related to [\"induced seismicity\"](https://earthquake.usgs.gov/research/induced/). These are man-made earthquakes triggered by\ndisposal of the waste fluids associated with oil & gas wells. The [global distribution of earthquakes](https://observablehq.com/@pbogden/earthquakes-in-the-last-month) is relatively stable over time.\n\nThe map also shows sedimentary basins and shale plays from the [Energy Information Administration](https://www.eia.gov/) -- these are the geologic formations that account for [enhanced oil and gas production](https://www.eia.gov/todayinenergy/detail.php?id=38372).\n\nThere's a clear relationship between the geologic formations and the human-induced earquakes, just ask someone who was living in Oklahoma at the time. But the effects vary regionally.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof datasource = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"map = svg`

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"{\n let mybrush = d3.select('#mybrush');\n if (!mybrush.node()) return;\n \n let x0 = brush.extent()()[0][0];\n let x1 = brush.extent()()[1][0];\n let begin = JSON.parse(JSON.stringify(d3.brushSelection( mybrush.node() )));\n let end = [[x0, margin.top], [x1, brushHeight - margin.bottom]];\n \n if (datasource.time == 0) {\n begin[0] = [ x0, end[0][1] ];\n begin[1] = [x0 + 50, end[1][1]]; \n end[0][0] = x1 - 50;\n end[1][0] = x1;\n } \n \n mybrush.call(brush.move, begin)\n .transition()\n .ease(d3.easeLinear)\n .duration(3000)\n .call(brush.move, end);\n \n return md`Brush`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"percent = 67","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"brushWidth = percent * width / 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40});","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"brush = d3.brush().extent([[margin.left, margin.top], [brushWidth - margin.right, brushHeight - margin.bottom]]);\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"brushHeight = Math.max(150, brushWidth / 3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"yAccessor = function(d) { return +d.properties.mag; };","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"yScale = {\n let yExtent = d3.extent(quakes.features, yAccessor);\n return d3.scaleLinear()\n .domain(yExtent)\n .range([brushHeight - margin.bottom, margin.top]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`## Earthquake data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"quakes = {\n let json = await d3.json('https://pbogden.github.io/colorado/quakes/data.json');\n json.features = json.features.filter(d => d.properties.mag > 0);\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`## Geology data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"shale = d3.json('https://pbogden.github.io/colorado/shale/shalegas.json');","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"basins = topojson.feature(shale, shale.objects.SedimentaryBasins_US_May2011_v2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"plays = topojson.feature(shale, shale.objects.TightOil_ShalePlays_US_EIA_May2016)","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`## Background map\n\nThe tiles are copyright [OpenStreetMap contributors](https://www.openstreetmap.org/copyright).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"url = (x, y, z) => `https://stamen-tiles-${\"abc\"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/terrain/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}.png`\n//url = (x, y, z) => `https://${\"abc\"[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/mapbox.light/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}.png?access_token=${Secret('mapbox')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, quakes)).bounds(quakes);\n const height = Math.ceil(y1 - y0);\n const scale = projection.scale() * (2 * Math.PI);\n projection.center(projection.invert([width / 2, height / 2]));\n projection.scale(Math.pow(2, Math.floor(Math.log2(scale))) / (2 * Math.PI));\n projection.translate([width / 2, height / 2]);\n return height;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@0.0.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"html`

Styling

\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}