2f:Ta16,mymap = { const container = yield html`

`; const map = (container.value = new maplibregl.Map({ //interactive: false, boxZoom: true, pitch: 0, bearing: 0, maplibreLogo: true, container, center: [-68.7712, 44.8016], zoom: 1, style: 'https://api.maptiler.com/maps/positron/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', scrollZoom: true, })); var canvas = map.getCanvasContainer(); map.addControl(new maplibregl.NavigationControl()); map.on('load', function () { // Add a single point to the map map.addSource('points', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': disasterDataPoints } }); map.addLayer({ 'id': 'dataPoints', 'type': 'circle', 'source': 'points', 'paint': { 'circle-radius': 5, "circle-color": [ "match", ["get", "type"], "drought", "orange", "earthquake", "green", "flood", "blue", "extreme temperature ", "red", "landslide", "brown", "mass movement (dry)", "purple", "volcanic activity", "black", "storm", "yellow", "white" ] } }); // Create a popup, but don't add it to the map yet. var popup = new maplibregl.Popup({ offset: 20, closeButton: false, closeOnClick: false }); map.on('mouseenter', 'dataPoints', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; // var features = map.queryRenderedFeatures(e.point, { layers: ['Metros'] }); var coordinates = e.features[0].geometry.coordinates.slice(); var name = e.features[0].properties.description; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup .setLngLat(coordinates) // .setHTML(description) .setHTML(name) .addTo(map); }); document .getElementById('rangeInput') .addEventListener('input', function (e) { let value = parseInt(e.target.value, 10); map.setFilter('dataPoints', ['==', 'year', value])}); map.on('mouseleave', 'dataPoints', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.setFilter('dataPoints', ['==', 'year', 1960]); }); return map; }30:[{"id":"0ea75df6228dce4ba296b0d8754346b55d29a5f57e30814c0c45343e07d9b66d14dfc28548c463edc19ca200accc082ac24d533a5e5ceabac75792be7ccd7161","href":"https://static.observableusercontent.com/files/0ea75df6228dce4ba296b0d8754346b55d29a5f57e30814c0c45343e07d9b66d14dfc28548c463edc19ca200accc082ac24d533a5e5ceabac75792be7ccd7161","name":"pend-gdis-1960-2018-disasterlocations.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1670174230585.428,"size":4039585}] 2d:{"title":"Natural Disaster Time Series (Individual Project)","cells":[{"id":0,"value":"# Natural Disaster Time Series (Individual Project)","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"slider = html`\nYear 1960`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof playing1 = {\n let playing = true;\n\n const node = html`

`;\n const button = node.querySelector(\"button\");\n\n button.addEventListener(\"click\", function (e) {\n node.value = playing = !playing;\n node.dispatchEvent(new CustomEvent(\"input\"));\n\n if (playing) {\n button.textContent = \"Pause\";\n } else {\n button.textContent = \"Play\";\n }\n });\n\n node.value = playing;\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"liveplay = {\n while (playing1) {\n yield Promises.delay(1000, myLoop());\n }\n function myLoop() { // create a loop function\n // if the counter < 10, call the loop function\n var input = document.getElementById('rangeInput');\n if(input != null)\n {\n if(input.value<2018)\n input.value++;\n else \n input.value = 1960;\n document.getElementById('amount').value = document.getElementById('rangeInput').value;\n // Create a new 'change' event\n var event = new Event('input');\n // Dispatch it.\n document.getElementById('rangeInput').dispatchEvent(event);\n } // .. setTimeout()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"graph = Plot.rectY(disasterData, Plot.binX({y: \"count\"}, {x: \"year\", fill: \"disastertype\"})).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"workbook = FileAttachment(\"pend-gdis-1960-2018-disasterlocations.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"disasterData = workbook.sheet(0, {headers: true, range: \"A1:R\" }) // from cell C1 to column J, last row","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"disasterDataPoints = disasterData.map(d => ({\n geometry: {'type': 'Point', 'coordinates': [d.longitude,d.latitude], 'name' : d.disastertype + \" \" + d.admin3 + \", \" + d.admin2 + \", \"+d.admin1 + \", \"+d.country},\n type: 'Feature',\n datum: d,\n properties : {'description':d.disastertype + \" \" + d.location + \", \" +d.country,\n 'year': d.year,\n 'type': d.disastertype\n}}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"//filteredDisasterDataPoints= {var points = []; points=disasterDataPoints.filter(point=>point.properties.year===year); return points;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"Filter_Year = mymap.setFilter('dataPoints',['==', ['get', 'year'], 2014]);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}