2e:null 2f:["$","title",null,{"children":"Earthquakes | Frank Rowe | Observable"}] 34:T62d,loader = html`

`35:[] 32:{"id":"57856b15d900e7f1","slug":"earthquakes","title":"Earthquakes","thumbnail":"7df8bb2b2021b00b0683663a2b0180b8ef898f0a459b36f543aee33d06310ed4","access_level":"public","create_time":"$D2019-01-17T16:54:45.008Z","update_time":"$D2019-01-17T19:50:31.266Z","view_time":null,"first_public_time":"$D2019-01-17T17:34:04.637Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"328b3efb9a5b2a58","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":"starter_2024"},"version":162,"publish_version":162,"role":null,"authored":false,"authors":[{"type":"individual","id":"92dc8186d4f17bf9","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":null}],"members":[{"type":"individual","id":"92dc8186d4f17bf9","login":"frankrowe","name":"Frank Rowe","avatar_url":"https://avatars-next.observableusercontent.com/1026a45b367430f93c73c655275a025b41480c2c614b8645e48982d8be0f378c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Earthquakes","cells":[{"id":0,"value":"md`# Earthquakes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"intro = md`The USGS provides this feed of earthquakes that is updated every five minutes.\n\nhttps://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof magnitude = selectpicker({\n description: \"Select Magnitude\",\n options: [\n {value: 'all', label: 'All Earthquakes'},\n {value: '1.0', label: 'M1.0+ Earthquakes'},\n {value: '2.5', label: 'M2.5+ Earthquakes'},\n {value: '4.5', label: 'M4.5+ Earthquakes'},\n {value: 'significant', label: 'Significant Earthquakes'},\n ],\n value: 'all'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof time = selectpicker({\n description: \"Select Time\",\n options: [\n {value: 'hour', label: 'Past Hour'},\n {value: 'day', label: 'Past Day'},\n {value: 'week', label: 'Past 7 Days'},\n {value: 'month', label: 'Past 30 Days'},\n ],\n value: 'day'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mapCanvas = map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"selected = {\n if (selected_item) {\n const item = items.features.filter(i => i.id === selected_item.id)[0];\n const date = new Date(selected_item.properties.time);\n return md`### ${selected_item.properties.title}\n - Magnitude: ${item.properties.mag}\n - Place: ${item.properties.place}\n - Datetime: ${date.toLocaleString(undefined, {\n \"month\": \"2-digit\",\n \"day\": \"2-digit\",\n \"hour\": \"2-digit\",\n \"minute\": \"2-digit\",\n \"second\": \"2-digit\",\n \"timeZoneName\": \"short\",\n \"year\": \"2-digit\"\n })}\n - URL: ${item.properties.url}\n - Tsunami: ${item.properties.tsunami}\n `;\n }\n return md `Click on an earthquake to get details.`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"map = {\n \n function styleFunction(feature) {\n let image = new ol.style.Circle({\n radius: getRadius(feature.getProperties().mag),\n fill: new ol.style.Fill({color: [255,0,0,0.5]}),\n stroke: new ol.style.Stroke({color: 'red', width: 1})\n });\n let style = new ol.style.Style({\n image: image\n });\n return style;\n }\n \n let quakeLayer = new ol.layer.Vector({\n source: vector_source,\n style: styleFunction\n });\n \n let map = new ol.Map({\n layers: [\n new ol.layer.Tile({\n source: new ol.source.OSM()\n }),\n quakeLayer\n ],\n target: html`

`,\n view: new ol.View({\n center: ol.proj.fromLonLat([-95.41, 40.5]),\n zoom: 4\n })\n });\n setTimeout(() => map.updateSize(), 1);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"items = {\n map.getViewport().appendChild(loader);\n const url = `https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/${magnitude}_${time}.geojson`\n return d3.json(url, {\n headers: {\n 'Content-Type': 'application/json'\n },\n method: 'GET'\n }).then((res) => {\n map.getViewport().removeChild(loader);\n return res;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"addFeatures = {\n mutable selected_item = null;\n const format = new ol.format.GeoJSON();\n selectionInteraction.getFeatures().clear();\n vector_source.clear();\n vector_source.addFeatures((new ol.format.GeoJSON()).readFeatures(items, {\n dataProjection: 'EPSG:4326',\n featureProjection: 'EPSG:3857'\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"selectionInteraction = {\n const format = new ol.format.GeoJSON();\n let select = new ol.interaction.Select({\n style: function(feature) {\n return new ol.style.Style({\n image: new ol.style.Circle({\n radius: getRadius(feature.getProperties().mag),\n fill: new ol.style.Fill({color: [255,255,0,0.5]}),\n stroke: new ol.style.Stroke({color: 'yellow', width: 1})\n })\n });\n }\n });\n \n select.on(\"select\", event => {\n if (event.deselected.length) {\n mutable selected_item = null; \n }\n if (event.selected.length) {\n const feature = event.selected[0];\n const geojson = JSON.parse(format.writeFeature(feature, {\n dataProjection: 'EPSG:4326',\n featureProjection: 'EPSG:3857'\n }));\n mutable selected_item = geojson;\n }\n });\n \n map.addInteraction(select);\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"getRadius = function(mag) {\n return Math.max(0, mag) * 2; \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"vector_source = new ol.source.Vector();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"ol = require('openlayers@4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"mutable selected_item = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {select as selectpicker} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"