2b:null 2c:["$","title",null,{"children":"2020-04-22 Thunderstorm Probability for the next hour visualized with H3, Leaflet.js and D3. | Rusty Conover | Observable"}] 31:T86b,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 / 100; return { color: d3.interpolateSpectral(1 - p), 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, .1, .2, .5, .8, .9, 1], labels = []; div.innerHTML += "

Probability of a thunderstorm
in next hour:

"; // 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":"548037c0dd40d63dfa814774d2ea418ff5035e237feca22bfc48a7aa00a5b50c239684d01af85cfe906c6bc9c965930134efea116f728dc134c29c4c5cf61408","href":"https://static.observableusercontent.com/files/548037c0dd40d63dfa814774d2ea418ff5035e237feca22bfc48a7aa00a5b50c239684d01af85cfe906c6bc9c965930134efea116f728dc134c29c4c5cf61408","name":"tstorms@2.json","type":"application/json","lastModified":1587599687872.112,"size":2271903}] 2f:{"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.","thumbnail":"6778b3377194e1d9f8008717a6046695167929a15b76b61509d2b9f54b068d5c","access_level":"public","create_time":"$D2020-04-22T23:41:23.066Z","update_time":"$D2020-04-23T00:29:05.966Z","view_time":null,"first_public_time":"$D2020-04-23T00:29:57.024Z","fork":{"id":"e997036d99611695","slug":"2020-04-21-total-cloud-cover-78-hour-forecast-visualized-wit","title":"2020-04-21 Total Cloud Cover 78 hour forecast visualized with H3, Leaflet.js and D3.","owner":{"id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7086dbb1b7698f76","login":"rustyconover","name":"Rusty Conover","avatar_url":"https://avatars-next.observableusercontent.com/019e8b78c476a383690d3ab8df8e09fc99d70a5c22a53b885784dcbcc294535c","tier":"starter_2024"},"version":186,"publish_version":186,"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":1,"collection":null,"type":"notebook","body":{"title":"2020-04-22 Thunderstorm Probability for the next hour visualized with H3, Leaflet.js and D3.","cells":[{"id":0,"value":"md`# 2020-04-22 Thunderstorm Probability for the next hour visualized with H3, Leaflet.js and D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"md`This was produced by taking the grid data from National Blended Forecast then processing to H3 indexes at various resolutions then visualizing via GeoJSON.`","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: 6,\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":165,"value":"viewof probabilityMin = slider({\n min: 0,\n max: 1,\n value: 0.02,\n description:\n \"Probability Lower Limit (adjust this to set a floor on the probability)\"\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 hexGrid = [];\n for (const [level, hex_id, coverage] of forecast_cells.filter(\n v => v[0] == resolution && v[2] > probabilityMin * 100\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 return {\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(\"tstorms@2.json\").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"