2f:[] 2d:{"title":"Earthquakes","cells":[{"id":0,"value":"md`# Earthquakes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"app = {\n const ctx = DOM.context2d(width, height);\n const quakeDiv = html`

${ctx.canvas}

`;\n const mapDiv = html`

`;\n const app = html`

${mapDiv}${quakeDiv}

`;\n \n const map = new google.maps.Map(mapDiv, {\n gestureHandling: 'greedy',\n streetViewControl: false,\n center: cities.Middle_Atlantic,\n zoom: 3,\n });\n \n app.map = map\n app.ctx = ctx;\n app.mapDiv = mapDiv;\n \n return app;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof period = select(PERIODS)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"// connect event handlers when a new map is created or new data is loaded\n\nappConnect = {\n app.quakeTree = quakeTree;\n\n if (!app.handleMapMove) {\n const EVENTS = [\n 'center_changed',\n 'zoom_changed',\n 'tilesloaded',\n ];\n app.handleMapMove = handleMapMove;\n EVENTS.map(event => app.map.addListener(event, app.handleMapMove));\n }\n\n if (!app.handleMouseMove) {\n app.handleMouseMove = handleMouseMove;\n app.mapDiv.addEventListener('mousemove', app.handleMouseMove);\n }\n\n renderQuakes(app);\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"renderQuakes = ({ quakeTree, map, ctx }) => {\n const latLng2Point = latLng2PointCurry(map);\n const bounds = map.getBounds();\n const { lng: x0, lat: y0 } = bounds.getSouthWest();\n const { lng: x1, lat: y1 } = bounds.getNorthEast();\n \n ctx.clearRect(0, 0, width, height);\n const renderedQuakes = [];\n applyToTree(quakeTree, x0(), y0(), x1(), y1(), quake => renderedQuakes.push(quake));\n \n renderedQuakes\n .sort((a, b) => b.properties.mag - a.properties.mag)\n .map(quake => renderQuake(quake, ctx, latLng2Point));\n \n if (selected.quake) {\n renderQuake(selected.quake, ctx, latLng2Point, true);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"renderQuake = (quake, ctx, latLng2Point, selected = false) => {\n const { x, y } = latLng2Point(quake.latLng);\n ctx.beginPath();\n ctx.arc(x, y, radius(quake.properties.mag), 0, 2 * Math.PI);\n ctx.fillStyle = selected ? 'red' : 'blue';\n ctx.fill();\n ctx.strokeStyle = '#888'\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"applyToTree = (quadTree, x0, y0, x3, y3, apply) => {\n quadTree.visit((node, x1, y1, x2, y2) => {\n if (!node.length) {\n const quake = node.data;\n const { lng: x, lat: y } = quake;\n \n do {\n if ((x >= x0) && (x < x3) && (y >= y0) && (y < y3)) {\n apply(quake);\n }\n } while (node = node.next);\n }\n return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"radius = d3.scalePow().domain([0, 9.5]).range([3, 50]).exponent(2).clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"handleMapMove = () => renderQuakes(app)","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"handleMouseMove = event => {\n event.stopPropagation();\n\n const { offsetX: x, offsetY: y} = event;\n if (event.target.parentElement.parentElement.parentElement.parentElement == app.mapDiv) {\n const ll = point2LatLng(x, y, app.map);\n const quake = app.quakeTree.find(ll.lng(), ll.lat(), 1);\n \n if (!selected.quake || !quake || selected.quake.id != quake.id) {\n selected.quake = quake;\n renderQuakes(app);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"latLng2PointCurry = map => {\n const projection = map.getProjection();\n const bounds = map.getBounds();\n\n const topRightY = projection.fromLatLngToPoint(bounds.getNorthEast()).y;\n const bottomLeftX = projection.fromLatLngToPoint(bounds.getSouthWest()).x;\n const scale = Math.pow(2, map.getZoom());\n \n return latLng => {\n const { x, y } = projection.fromLatLngToPoint(latLng);\n return new google.maps.Point((x - bottomLeftX) * scale, (y - topRightY) * scale);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"point2LatLng = (x, y, map) => {\n const projection = map.getProjection();\n const bounds = map.getBounds();\n\n const topRightY = projection.fromLatLngToPoint(bounds.getNorthEast()).y;\n const bottomLeftX = projection.fromLatLngToPoint(bounds.getSouthWest()).x;\n const scale = Math.pow(2, map.getZoom());\n const point = new google.maps.Point((x / scale + bottomLeftX), (y /scale + topRightY));\n \n return projection.fromPointToLatLng(point);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function performJsonpQuery(timePeriod, callback) {\n const url = `${USGS_URL}${timePeriod}.geojsonp`;\n window.eqfeed_callback = callback;\n var script = document.createElement('script');\n script.src = url;\n document.getElementsByTagName('head')[0].appendChild(script);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"STYLE = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"selected = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"PERIODS = ['hour', 'day', 'week', 'month']","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"USGS_URL = \"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"quakeTree = d3.quadtree()\n .x(d => d.latLng.lng())\n .y(d => d.latLng.lat())\n .addAll(quakes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"quakes = rawQuakeData.features\n.map(feature => {\n const ll = {\n lat: feature.geometry.coordinates[1],\n lng: feature.geometry.coordinates[0],\n };\n\n return {\n ...feature,\n ...ll,\n latLng: new google.maps.LatLng(ll),\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"rawQuakeData = new Promise((resolve) => performJsonpQuery(period, resolve));","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"cities = {\n return {\n 'Markham_Canada':{lat:43.8648129, lng:-79.3319206},\n 'Middle_Atlantic':{lat:43.938043, lng:-36.827159},\n 'Barcelona_Spain':{lat:41.3948976, lng:2.0787283},\n 'Nice_France': {\"lat\" : 43.7101728, \"lng\" : 7.261953200000001}\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `## Dependences`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyA9-OuEIxQw2IXwfkcMRXG6PA1vcnQaAVs')\n .catch(() => window.google)","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}