31:[{"id":"0d52fd8049a6aee269497747be7d3971bb49000caab5dd229f3fdcc639e526960ef9a19473efeea32169288816195e664d0a7e162e689dc3b289535b46978a34","href":"https://static.observableusercontent.com/files/0d52fd8049a6aee269497747be7d3971bb49000caab5dd229f3fdcc639e526960ef9a19473efeea32169288816195e664d0a7e162e689dc3b289535b46978a34","name":"fires.csv","type":"text/csv","lastModified":1578640859702.778,"size":5027479}] 2f:{"title":"Australia wildfires","cells":[{"id":0,"value":"md`# Australia wildfires\nForest fires are spreading in Australia. Using data from [FIRMS / NASA](https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms) we will attempt to show how the fires has been spreading since November last year until the day of writing (9th Jauary 2020).\n\nWe have preparsed the files to minimise load time, and iterate the date once every day (second) and redraw the heatmap with the new data.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// width should be responsive\nwidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"map = {\n container;\n const map = L.map('map', { zoomSnap: 0.3 });\n \n L.tileLayer(\"https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png\", {\n attribution: \"Wikimedia maps beta | © OpenStreetMap contributors\"\n }).addTo(map);\n \n map.fitBounds([[-41.6, 113.5],[-10, 155.9]]);\n \n invalidation.then(() => map.remove());\n return map;\n //}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"legend = {\n const legend = L.control({position: 'topright'});\n yield legend;\n legend.onAdd = function (map) {\n invalidation.then(() => this.remove());\n const container = L.DomUtil.create('div', 'mainContainer');\n const date = L.DomUtil.create('div', 'dateContainer', container);\n date.innerHTML = `

Dato: ${currentDate}

Antall Branner: ${currentData.data.length}

`;\n // add a replay button that will instruct the currentDate generator to restart\n const replay = L.DomUtil.create('div', 'replayContainer', container);\n replay.innerHTML = `

Spill av på nytt

`;\n L.DomEvent.on(replay, 'click', function (ev) {\n mutable reset = true;\n });\n return container;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"legend.addTo(map);","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"heatmap = new HeatmapOverlay(cfg).addTo(map);","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"// we have to set data for the heatmap outside of the map closure as reactivity causes redrawing of the map on data change\nheatmap.setData(currentData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"startDate = '2019-11-07'","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"endDate = '2020-01-09'","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"mutable reset = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"// iterates all dates, one day per second\nmutable currentDate = {\n reset;\n let dateToUse = startDate;\n let _date = moment(dateToUse);\n dateToUse = _date.add(1, 'days').format('YYYY-MM-DD')\n yield dateToUse;\n while (dateToUse !== endDate) {\n // loop Forever\n // dateToUse = dateToUse === endDate ? dateToUse = startDate: dateToUse;\n let _date = moment(dateToUse)\n dateToUse = _date.add(1, 'days').format('YYYY-MM-DD')\n yield Promises.delay(1000, dateToUse);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"// load data\ndata = {\n const rows = parse(await FileAttachment(\"fires.csv\").text());\n yield rows;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"// currentdata is the data for the specific day\ncurrentData = {\n let dates = data.filter((b) => {\n return b.date === currentDate;\n })\n return {\n max: 1,\n data: dates\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"// parsing and sorting the data\nparse = (fileData) => {\n return d3.csvParseRows(fileData, (d) => {\n return {lat: +d[0], lng: +d[1], date: d[2], intensity: +d[3]};\n }).sort(function(a, b) {\n return new Date(a.date) - new Date(b.date); \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"// style for the legend\nhtml `\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"cfg = {\n return {\n // radius should be small ONLY if scaleRadius is true (or small radius is intended)\n // if scaleRadius is false it will be the constant radius used in pixels\n \"radius\": .2,\n \"maxOpacity\": .7,\n // scales the radius based on map zoom\n \"scaleRadius\": true,\n // if set to false the heatmap uses the global maximum for colorization\n // if activated: uses the data maximum within the current map boundaries\n // (there will always be a red spot with useLocalExtremas true)\n \"useLocalExtrema\": true,\n // which field name in your data represents the latitude - default \"lat\"\n latField: 'lat',\n // which field name in your data represents the longitude - default \"lng\"\n lngField: 'lng',\n // which field name in your data represents the data value - default \"value\"\n valueField: 'intensity'\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"HeatmapOverlay = require(\"leaflet-heatmap\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3-dsv\", \"d3-fetch\", \"d3-scale\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}