2a:T5ca,md`# Assignments Due in class on 3 March ### Assignment #1 (Leaflet with interactive filters) * Add UI element(s) that report: 1. geographic bounds of the viewport, 2. the \# of visible earthquakes in the viewport 3. the total \# of earthquakes in the viewport 4. the nature of the filter that's being used. * The reported values should update when the user pans or zooms the map, and when the user adjusts the filters/sliders. * Clean up and document the code and the notebook so that you'll remember how it works (next year). Remove all unnecessary cells and code. Indent correctly, use space wisely. * Make sure the visualization has attractive and informative styling. * Make sure the notebook is organized well and easy to read (for you and your colleagues in the class). * Provide appropriate attribution -- you can use this notebook, but if you use code from somewhere else then reference it. ### Assignment #2 (project) * Find a web-accessible open data source with geospatial content * Get the data into an observable notebook * Provide attribution to the authoritative data source * Make sure the dataset in your notebook is reproducible ### References * [Introduction to views](https://observablehq.com/@observablehq/introduction-to-views) -- observable * [Using GeoJSON with Leaflet](https://leafletjs.com/examples/geojson/) -- leafletjs.com * [Leaflet events](https://leafletjs.com/reference-1.7.1.html#map-event) (API reference docs) -- leafletjs.com`2b:[] 29:{"title":"Assignments","cells":[{"id":0,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"mutable z = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"map.on(\"zoom, move\", () => mutable z = map.getBounds())","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"map = {\n var map = L.map(container).setView([38.9072, -77.0369], 1);\n \n\tL.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg', {\n\t\tmaxZoom: 20,\n\t\tattribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA',\n\t\ttileSize: 512,\n\t\tzoomOffset: -1\n\t}).addTo(map);\n \n invalidation.then(() => map.remove());\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"quakes = { \n function onEachFeature(feature, layer) {\n\t\tvar popupContent = \"

Earthquake Location: \" +\n\t\t\t\tfeature.properties.place +\".

Magnitude: \" + feature.properties.mag + \"

Coordinates: \" + feature.geometry.coordinates;\n\n\t\tif (feature.properties && feature.properties.popupContent) {\n\t\t\tpopupContent += feature.properties.popupContent;\n\t\t}\n\n\t\tlayer.bindPopup(popupContent);\n\t}\n\n const quakes = L.geoJSON([earthquakes], {\n\n\t\tstyle: function (feature) {\n\t\t\treturn feature.properties && feature.properties.style;\n\t\t},\n\n \tonEachFeature: onEachFeature,\n \n\t\tpointToLayer: function (feature, latlng) {\n\t\t\treturn L.circleMarker(latlng, {\n\t\t\t\tradius: 8,\n\t\t\t\tfillColor: \"#ff7800\",\n\t\t\t\tcolor: \"#000\",\n\t\t\t\tweight: 1,\n\t\t\t\topacity: 1,\n\t\t\t\tfillOpacity: 0.8\n\t\t\t});\n\t\t}\n\t}).addTo(map);\n\n return quakes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof eqs = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Earthquake Magnitude`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"eqs","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"quakes.eachLayer(quakeLayer => {\n const opacity = (quakeLayer.feature.properties.mag >= eqs) ? 1 : 0;\n quakeLayer.setStyle({fillOpacity: opacity})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"count = {\n var total = 0;\n var visible = 0;\n quakes.eachLayer(function(quakelayer){\n var opacity = (quakelayer.feature.properties.mag > eqs) ? 1 : 0;\n visible += opacity;\n total += 1;\n });\n \n return [total, visible];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"hollow_pts = {\n var hollow_pts = count[0] - count[1];\n \n return hollow_pts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":" earthquakes = d3.json(\"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson\") ","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}