2b:null 2c:["$","title",null,{"children":"2020-04-22 Apparent Temperature visualized with H3, Leaflet.js and D3. | Rusty Conover | Observable"}] 31:T895,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":"ef41fb4f57501c8d25b048fa039bcdef4994c28bddbb9f6e3ffad57077fb448ebb02a1eef9b81504dab48b360bc86f93cf6aed1d1faa4c6272cc8dae44d9c18d","href":"https://static.observableusercontent.com/files/ef41fb4f57501c8d25b048fa039bcdef4994c28bddbb9f6e3ffad57077fb448ebb02a1eef9b81504dab48b360bc86f93cf6aed1d1faa4c6272cc8dae44d9c18d","name":"apparent.temp.csv","type":"text/csv","lastModified":1587607076570.409,"size":6417320}] 2f:{"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.","thumbnail":"d80db9a781da37bda0df6035694f0a19620cc3c7c0dea187acd5ba690b33e4ae","access_level":"public","create_time":"$D2020-04-23T01:57:38.557Z","update_time":"$D2020-04-26T15:23:43.448Z","view_time":null,"first_public_time":"$D2020-04-26T15:23:59.465Z","fork":{"id":"459c7e5170984f58","slug":"2020-04-22-thunderstorm-probability-for-the-next-hour-visua","title":"2020-04-22 Thunderstorm Probability for the next hour visualized with H3, Leaflet.js and D3.","owner":{"id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover"}},"stars":3,"starred":false,"owner":{"type":"team","id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":"starter_2024"},"version":243,"publish_version":243,"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":6,"collection":null,"type":"notebook","body":{"title":"2020-04-22 Apparent Temperature visualized with H3, Leaflet.js and D3.","cells":[{"id":0,"value":"md`# 2020-04-22 Apparent 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: 4,\n step: 1,\n value: 2,\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: 43,\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 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 hexGrid.push({\n type: \"Feature\",\n properties: {\n coverage: parseInt(coverage, 10)\n },\n geometry: {\n type: \"Polygon\",\n coordinates: [h3.h3ToGeoBoundary(hex_id, true)]\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(\"apparent.temp.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"