2b:null 2c:["$","title",null,{"children":"2020-04-22 Global Temperature visualized with H3, Leaflet.js and D3. | Rusty Conover | Observable"}] 31:T894,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); let hexesLayer = L.geoJson(hexes, { weight: 1, style: feature => { // Determine the color of the hexagon from the coverage. const p = ((feature.properties.coverage - 273.15) * 9) / 5 + 32; return { color: d3.interpolateSpectral(1 - p / 120), stroke: 0, opacity: strokeOpacity, fillOpacity }; } }).addTo(map); map.fitBounds(hexesLayer.getBounds()); var legend = L.control({ position: 'bottomright' }); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], labels = []; div.innerHTML += "

Apparent Temperature:

"; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); }32:[{"id":"dea2f38f2cb9c18e6bde375c80aa3b7665b3439d116939041ada80c1b17e7d3ea7286f899a3330056c76d460bc4ec0ca5526ac3f154b9b3565fd5bf368bad20a","href":"https://static.observableusercontent.com/files/dea2f38f2cb9c18e6bde375c80aa3b7665b3439d116939041ada80c1b17e7d3ea7286f899a3330056c76d460bc4ec0ca5526ac3f154b9b3565fd5bf368bad20a","name":"g1.csv","type":"text/csv","lastModified":1587614254201.107,"size":8067120}] 2f:{"id":"fe3c6a77c4163428","slug":"2020-04-22-global-temperature-visualized-with-h3-leaflet-js","title":"2020-04-22 Global Temperature visualized with H3, Leaflet.js and D3.","thumbnail":"63ad814fe3f71f9e4e5d4bb51e4974489fd289d8cc287e8ba578a954cbb0bae5","access_level":"public","create_time":"$D2020-04-23T03:56:52.388Z","update_time":"$D2020-04-23T04:25:03.066Z","view_time":null,"first_public_time":"$D2020-04-23T04:25:34.481Z","fork":{"id":"bf3394bd9a01a328","slug":"2020-04-22-apparent-temperature-visualized-with-h3-leaflet","title":"2020-04-22 Apparent Temperature visualized with H3, Leaflet.js and D3.","owner":{"id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":"starter_2024"},"version":285,"publish_version":285,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf2241b0768bf813","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":null}],"members":[{"type":"individual","id":"cf2241b0768bf813","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"2020-04-22 Global Temperature visualized with H3, Leaflet.js and D3.","cells":[{"id":0,"value":"md`# 2020-04-22 Global Temperature visualized with H3, Leaflet.js and D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof resolution = slider({\n min: 0,\n max: 2,\n step: 1,\n value: 5,\n title: \"H3 Resolution\",\n description: \"H3 Index Resolution smaller is larger area hexagons.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"viewof desired_frame = slider({\n min: 1,\n max: 1,\n value: 1,\n step: 1,\n description: \"Forecast frame interval\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof fillOpacity = slider({\n min: 0.0,\n max: 1,\n value: 0.77,\n description: \"Fill opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"viewof strokeOpacity = slider({\n min: 0.0,\n max: 1,\n description: \"Stroke opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"d3 = require(\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@^1.4.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"hexes = {\n let counter = 0;\n let hexGrid = [];\n let lookup = {};\n for (const [frame, level, hex_id, coverage] of forecast_cells.filter(\n v => v[0] == desired_frame && v[1] == resolution\n )) {\n // get the coordinates of that hex.\n const coords =\n lookup[hex_id] || (lookup[hex_id] = h3.h3ToGeoBoundary(hex_id, true));\n if (\n coords.filter(v => v[1] < -80 || v[1] > 80 || v[0] < -175 || v[0] > 175)\n .length > 0\n ) {\n continue;\n }\n hexGrid.push({\n type: \"Feature\",\n properties: {\n coverage: parseInt(coverage, 10)\n },\n geometry: {\n type: \"Polygon\",\n coordinates: [coords]\n }\n });\n }\n yield {\n type: \"FeatureCollection\",\n features: hexGrid\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"forecast_cells = (await FileAttachment(\"g1.csv\").text())\n .split(/\\n/)\n .filter(v => v != '')\n .map(v => v.split(/,/))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"h3 = require('h3-js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"