2b:null 2c:["$","title",null,{"children":"Interactive map Earthquakes in USA | Toufeeq Ockards | Observable"}] 31:[] 2f:{"id":"a040753103477386","slug":null,"title":"Interactive map Earthquakes in USA","thumbnail":"63e127ba594cdc45618c0e27167d4051e7c952e06d1ce7705b58a1689ef3b4f6","access_level":"public","create_time":"$D2023-08-10T11:22:49.661Z","update_time":"$D2023-08-10T11:24:13.585Z","view_time":null,"first_public_time":"$D2023-08-10T11:22:49.661Z","has_unpublished_edits":null,"fork":{"id":"a638d7f9146087ed","slug":"untitled","title":"Interactive map Earthquakes in USA","owner":{"id":"8c986ec7a78b7076","login":"msdakot","name":"Dhruvi Kothari"}},"stars":0,"starred":false,"owner":{"type":"team","id":"85a3d96432d7ca01","login":"tockards","name":"Toufeeq Ockards","avatar_url":"https://avatars-next.observableusercontent.com/41bc75254839a62c956d48c5d90bd8c77b027ad491121462e6a5a1cd73735be8","tier":"starter_2024"},"version":364,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"765d5a0b4d08c666","login":"tockards","name":"Toufeeq Ockards","avatar_url":"https://avatars-next.observableusercontent.com/41bc75254839a62c956d48c5d90bd8c77b027ad491121462e6a5a1cd73735be8","tier":null}],"members":[{"type":"individual","id":"765d5a0b4d08c666","login":"tockards","name":"Toufeeq Ockards","avatar_url":"https://avatars-next.observableusercontent.com/41bc75254839a62c956d48c5d90bd8c77b027ad491121462e6a5a1cd73735be8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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.\n\nforked from [@msdakot](https://observablehq.com/@msdakot/untitled) as an example for an interactive map with a slider. \n`","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":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"