31:T56f,viewof circles = { const svg = d3.select(DOM.svg(mapWidth, 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", 3); 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"); } viewof datasource.onclick = () => { viewof datasource.dispatchEvent(new CustomEvent("input")) }; viewof datasource.dispatchEvent(new CustomEvent("input")); // initial animation return svg.node(); }32:T404,update = { let mybrush = d3.select('#mybrush'); if (!mybrush.node()) return; const context = d3.select(map).select('canvas').node().getContext('2d'); context.drawImage(datasource.marble ? marble : basemap.canvas, 0, 0, mapWidth, mapHeight); let cutoff = 3.8; let x0 = brush.extent()()[0][0]; let x1 = brush.extent()()[1][0]; let begin = JSON.parse(JSON.stringify(d3.brushSelection( mybrush.node() ))); let end = [[x0, margin.top], [x1, yScale(cutoff)]]; // big if (datasource.size == 1) { end = [[ x0, yScale(cutoff)], [x1, brushHeight - margin.bottom]]; // small } else if (datasource.size == 2) { end = [[ x0, margin.top], [x1, brushHeight - margin.bottom]]; // small } if (datasource.time == 0) { begin[0] = [ x0, end[0][1] ]; begin[1] = [x0 + 50, end[1][1]]; end[0][0] = x1 - 50; end[1][0] = x1; } mybrush.call(brush.move, begin) .transition() .ease(d3.easeLinear) .duration(3000) .call(brush.move, end); return datasource; }33:[] 2f:{"title":"Earthquake animation","cells":[{"id":0,"value":"md`# Earthquake animation\n\nThe charts below show earthquakes across the globe from the last 30 days.\nFamiliar global patterns include tectonically active regions such as\n the [Ring of Fire](https://en.wikipedia.org/wiki/Ring_of_Fire) \nthe [mid-ocean ridges](https://en.wikipedia.org/wiki/Mid-ocean_ridge).\nBut some unexpected patterns emerge when you filter the earthquakes\nby magnitude. You can explore the data with the radio buttons. \nYou can also explore earthquake magnitude versus time interactively by clicking and dragging on the scatterplot below the map, which uses [d3-brush](https://observablehq.com/collection/@d3/d3-brush).\n\nSomething different is going on in the central U.S., namely, human-[induced seismicity](https://observablehq.com/@pbogden/induced-seismicity).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof datasource = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"map = {\n const div = d3.select(DOM.element('div')).style('width', mapWidth + 'px').style('height', mapHeight + 'px');\n const context = DOM.context2d(mapWidth, mapHeight);\n const svg = div.append('svg').style('position', 'absolute').attr('width', '100%').attr('height', '100%'); \n const path = d3.geoPath(projection);\n \n div.node().insertBefore(context.canvas, svg.node());\n d3.select(context.canvas).style('position', 'absolute');\n\n svg.append(\"g\")\n .attr(\"fill\", \"crimson\")\n .selectAll(\"g\")\n .data(quakes.features)\n .join(\"circle\")\n .each(function(d) { d.properties.circle = this})\n .attr(\"transform\", d => (\"translate(\" + projection(d.geometry.coordinates) + \")\") )\n .attr(\"r\", 3);\n \n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"md`Only the U.S. has earthquakes with magnitudes smaller than 4.\nAs you might expect, this is an artifact of the earthquake reporting \nsystem maintained by the U.S. Geological Survey.\n\nA similar display reveals [man-made earthquakes](https://observablehq.com/d/5444296e548f363e) in the central US.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"md`## Data sources\n* [U.S. Geological Survey Hazards Program](https://earthquake.usgs.gov/).\n* [NASA Visible Earth](https://visibleearth.nasa.gov/view.php?id=73909).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"md`### References\n\n* [Brushable scatterplot](https://observablehq.com/@d3/brushable-scatterplot)\n* [A Brief Introduction to Viewof](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof)\n* [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views)\n* [Synchronized Views](https://observablehq.com/@mbostock/synchronized-views)\n* [Views are Mutable Values](https://observablehq.com/@mbostock/views-are-mutable-values)\n* [Mutating Views](https://observablehq.com/@mbostock/mutating-views)\n* [Form Input](https://observablehq.com/@mbostock/form-input)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"md`### Earthquake data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// Fetch the earthquake data from the USGS GeoJSON feed\nquakes = {\n let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson');\n let json = await response.json();\n json.features.forEach(d => d.properties.circle = null)\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"brush = d3.brush()\n .extent([[margin.left, margin.top], [brushWidth - margin.right, brushHeight - margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"projection = d3.geoNaturalEarth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"xScale = d3.scaleTime()\n .domain(xExtent)\n .range([margin.left, brushWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"yScale = d3.scaleLinear()\n .domain(yExtent)\n .range([brushHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"xExtent = d3.extent(quakes.features, xAccessor);","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"yExtent = d3.extent(quakes.features, yAccessor);","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":" x = function(d) { return xScale(xAccessor(d)); };","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"y = function(d) { return yScale(yAccessor(d)) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"xAccessor = function(d) { return new Date(d.properties.time) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"yAccessor = function(d) { return d.properties.mag; };","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"brushHeight = Math.max(150, width / 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"brushWidth = mapWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"mapWidth = (width > 500) ? 0.6 * width : width","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"mapHeight = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(mapWidth, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"world = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json\").then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${brushHeight - margin.bottom})`)\n .call(d3.axisBottom(xScale).ticks(5))\n // .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", brushWidth - margin.right - margin.left)\n .attr(\"y\", +28)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Time (the last 30 days)\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale).ticks(5))\n // .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 8)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Magnitude\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"import {map as marble} from \"@pbogden/raster-reprojection\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"basemap = {\n let h = mapHeight;\n let w = mapWidth;\n const context = DOM.context2d(w, h);\n const path = d3.geoPath(projection, context);\n \n context.beginPath(), path(outline), context.clip(), context.fillStyle = \"#fff\", context.fillRect(0, 0, w, h);\n context.beginPath(), path(graticule), context.strokeStyle = \"#ccc\", context.stroke();\n context.beginPath(), path(land), context.fillStyle = \"#aaa\", context.fill();\n context.beginPath(), path(outline), context.strokeStyle = \"#000\", context.stroke();\n\n yield context;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}