2d:null 2e:["$","title",null,{"children":"Interactive map Earthquakes in USA | Dhruvi Kothari | Observable"}] 33:[] 31:{"id":"a638d7f9146087ed","slug":"untitled","title":"Interactive map Earthquakes in USA","thumbnail":"2679f1dd362e7afa32d46744416fe801e9ec70710ac0ec3b65e19710bd035d73","access_level":"public","create_time":"$D2019-04-26T19:55:39.048Z","update_time":"$D2019-04-27T03:48:48.301Z","view_time":null,"first_public_time":"$D2019-04-27T03:42:14.372Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"8c986ec7a78b7076","login":"msdakot","name":"Dhruvi Kothari","avatar_url":"https://avatars-next.observableusercontent.com/0a21566f3248dcaae5fa843e218b7b87d142785a0e72041cc406a3e6cabcd228","tier":"starter_2024"},"version":362,"publish_version":362,"role":null,"authored":false,"authors":[{"type":"individual","id":"edc3ee665b264a0d","login":"msdakot","name":"Dhruvi Kothari","avatar_url":"https://avatars-next.observableusercontent.com/0a21566f3248dcaae5fa843e218b7b87d142785a0e72041cc406a3e6cabcd228","tier":null}],"members":[{"type":"individual","id":"edc3ee665b264a0d","login":"msdakot","name":"Dhruvi Kothari","avatar_url":"https://avatars-next.observableusercontent.com/0a21566f3248dcaae5fa843e218b7b87d142785a0e72041cc406a3e6cabcd228","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Interactive map Earthquakes in USA","cells":[{"id":0,"value":"md`# Interactive map Earthquakes in USA `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`There are two goals to this assignment. One is to familarize myself with Leaflet in Observable; and second one is to develope some custom interactive capabilities for visualizing month worth of earthquakes data from USGS EQ feed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`### Loading in the URL `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"url = (\"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"quakes = data.features.filter(function (value) {\n return value.properties.mag <= 2.5;});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"container = { \nlet container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"html`

Days of the Month<\\div>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"viewof sld2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`${date} of ${quakes.length} earthquakes exceed${count == 1 ? \"s\" : \"\"} magnitude ${sld2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"html`

Scale the Magnitude<\\div>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"viewof slider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`${count} of ${quakes.length} earthquakes exceed${count == 1 ? \"s\" : \"\"} magnitude ${slider}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`### Backhand calculations for displaying the filtered EQs.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"map = {\n \n // Now we create a map object and add a layer to it.\n let map = L.map(container).setView([41.401,-93.151], 4);\n let mapLayer = L.tileLayer('https://api.mapbox.com/styles/v1/dhruvs04/cjtehgcvh31ym1fleyjaq7cu3/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZGhydXZzMDQiLCJhIjoiY2psZWkxem45MDZuNjNrcWhkZDMxdXo5byJ9.O_pXu61MgF8AfZiWLaR5pA',{\n attribution: 'Wikimedia maps beta | © Mapbox contributors'\n }).addTo(map);\n \n \n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"layer = {\n var geojsonMarkerOptions = {\n radius: 5,\n fillColor: \"#C70039\",\n color: \"#C70039\",\n weight: 1.2,\n opacity: 1,\n fillOpacity: 0.2\n };\n // See: https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer\n var pointToLayer = function (feature, latlng) {\n return L.circleMarker(latlng, geojsonMarkerOptions);\n }\n \n let quakesLayer = L.geoJson(data.features, { pointToLayer: pointToLayer }).addTo(map);\n \n return quakesLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"count = {\n var count = 0;\n \n layer.eachLayer(function(quakeLayer){\n\n var opacity = (quakeLayer.feature.properties.mag > slider) ? 1 : 0;\n count += opacity; \n quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});\n });\n\n return count;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"date = {\n var count = 0;\n\n layer.eachLayer(function(quakeLayer){\n var opacity = ((new Date(quakeLayer.feature.properties.time).getUTCDate())> sld2) ? 1 : 0;\n count += opacity; // count the visible earthquakes (i.e. those with opacity = 1)\n quakeLayer.setStyle({opacity: opacity, fillOpacity: opacity});\n });\n\n return count;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"