2d:null 2e:["$","title",null,{"children":"Gridded Hail Days in the Contiguous US | jpicca | Observable"}] 33:T4c1,md`# Gridded Hail Days in the Contiguous US ### 2009-18 Hail Report Days on a Variable Grid
Hail report days (for hail of any size) were gridded on 80-, 40-, and 20-km scales in Python and are displayed here for your discerning eye. The display is created by converting a csv of the gridded data into a geojson collection (with each object representing a grid box center point) and utilizing d3.voronoi to draw a voronoi diagram covering our grid points. Each subsequent grid box (i.e., a square created in the voronoi process) is then filled according to its geojson data representing the number of hail days observed. Breakpoints are set to change the grid spacing at appropriate zoom levels (i.e., greater zooms will switch to finer grid spacing). The 20-km spacing may take a second or two longer to load, but should be reasonably quick. Unsurprisingly, the Plains show the highest number of hail days, with population centers in the High Plains being the most notable (head to the Black Hills and Rapid City). Additionally, southern portions of the Piedmont display a regional maximum. Hail report maxima will bias towards population centers, since humans are the ones making these reports (hopefully).`34:T19c9,HailMap = { const width = 950 const height = 650 let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([39.56, -96.31], 4); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); /*let voronoiGenerator = d3.voronoi() .x(d => d.x) .y(d => d.y) .extent([[0,0],[map.getPixelBounds().max.x,map.getPixelBounds().max.y]]); let voronoiGenerator = d3.geoVoronoi({ type: "FeatureCollection", features: geojson }) //.x(d => d.x) //.y(d => d.y)*/ //initialize svg to add to map L.svg().addTo(map) //Create selection using D3 const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') // create a group that is hidden during zooming const g = svg.append('g').attr('class', 'leaflet-zoom-hide') // Use Leaflets projection API for drawing svg path (creates a stream of projected points) // const projectPoint = function(x, y) { // const point = map.latLngToLayerPoint(new L.LatLng(y, x)) // this.stream.point(point.x, point.y) // } // Use d3's custom geo transform method to implement the above // const proj = d3.geoTransform({point: projectPoint}) // creates geopath from projected points (SVG) //const pathCreator = d3.geoPath().projection(proj).pointRadius(2); const lines = g.selectAll(".voronoi") /*.data(voronoiGenerator(geojson).polygons()) .enter().append("path") .attr("class", "voronoi") .attr("stroke-width",0.5) .attr("stroke",'black')*/ let curGran = 'nada' let newGran; let geojson; let color; let limits; let legend = L.control({ position: "bottomleft" }); let secondLegend = L.control({ position: "bottomleft" }); let div = L.DomUtil.create("div", "info legend"); let divTwo = L.DomUtil.create("div", "info legend"); let labels; let legendInfo = "

" let secondLegendInfo = "

" // Generate voronoi const onPan = async () => { let zoom = map.getZoom() /*squares.on('mouseover', () => { console.log('yo!') })*/ let bounds = map.getBounds() let upL = [bounds['_northEast'].lat + 2,bounds['_southWest'].lng - 2] let loR = [bounds['_southWest'].lat - 2,bounds['_northEast'].lng + 2] let gridName; if (zoom < 6) { newGran = 'coarse' gridName = '80km' } else if (zoom < 9) { newGran = 'fine' gridName = '40km' } else { newGran = 'soFine' gridName = '20km' } // Wait for the geojson to resolve before continuing with code if (newGran != curGran) { map.removeControl(legend); // * Need code to update legend & color map geojson = await geojsonMaker(newGran) //checkZoom() color = d3.scaleSequential(d3.extent(geojson.map(entry => entry.properties.days)), interpolator) limits = [] let step = 10 //for (let i=0; i < d3.extent(geojson.map(entry => entry.properties.days))[1]/step; i++) { for (let i=0; i < d3.max(geojson.map(entry => entry.properties.days))/step; i++) { limits.push(i*step); } labels = [] secondLegend.onAdd = function () { divTwo.innerHTML = secondLegendInfo; divTwo.innerHTML += `

${gridName} Grid

` return divTwo; } legend.onAdd = function() { div.innerHTML = legendInfo; limits.forEach(function(limit, index) { labels.push(`

${index*step}

`); }); div.innerHTML += labels.join(""); return div; }; // Adding legend to the map legend.addTo(map); secondLegend.addTo(map); } curGran = newGran; geojson.forEach(d => { //const p = proj(d.geometry.coordinates); d.x = map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x d.y = map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y return d; }) // testing //let testPtUL = map.latLngToLayerPoint([75,-160]) //let testPtLR = map.latLngToLayerPoint([10,-50]) // Get points to set extent of where the voronoi operates (saves time) let testPtUL = map.latLngToLayerPoint(upL) let testPtLR = map.latLngToLayerPoint(loR) let newVoronoi = d3.voronoi() .extent([[testPtUL.x,testPtUL.y],[testPtLR.x,testPtLR.y]]) .x(d => d.x) .y(d => d.y) /* let newVoronoi = d3.geoVoronoi({ type: "FeatureCollection", features: geojson }) .x(d => d.properties.site.properties.x) .y(d => d.properties.site.properties.y)*/ d3.selectAll('.voronoi').remove() lines.attr('opacity', 0.4) .data(newVoronoi(geojson).polygons().filter(item => item)) .enter().append('path') .classed('voronoi leaflet-interactive',true) //.attr('fill', d => color(d.properties.site.properties.days)) .attr('fill', d => color(d.data.properties.days)) .attr("d", d => d ? `M${d.join("L")}Z` : null) .attr('opacity', d => { if (d.data.properties.days == 0) { //if (d.properties.site.properties.days == 0) { return 0 } else { return 0.3 } }); let squares = d3.select(map.getContainer()).selectAll('.voronoi'); squares.on('mouseover', function(d) { let legend = d3.select(map.getContainer()).select('.count') legend.text(`${d.data.properties.days} days`); d3.select(this).attr('stroke-width',3).attr('stroke','black') }).on('mouseout', function() { d3.select(this).attr('stroke-width',0) }) //console.log(map.getZoom()) /*g.selectAll('.voronoi').remove() g.selectAll(".voronoi") .data(voronoiGenerator(geojson).polygons()) .enter().append("path") .attr("class", "voronoi") .style("stroke", "steelblue") .style("stroke-width", .5) .attr("d", d => d ? `M${d.join("L")}Z` : null);*/ } // initialize positioning onPan() // reset whenever map is moved //map.on('zoomend', onZoom) map.on('moveend', onPan) invalidation.then(() => map.remove()); }35:[{"id":"846f1b2b5f50f9a31f1a1e9fe19a5de6fe252475166235c037de3dd6dc06388bc2fed70483e0aa8d8c753b5263c7cb6bd1765588bc43564ad150ee09eee283b1","href":"https://static.observableusercontent.com/files/846f1b2b5f50f9a31f1a1e9fe19a5de6fe252475166235c037de3dd6dc06388bc2fed70483e0aa8d8c753b5263c7cb6bd1765588bc43564ad150ee09eee283b1","name":"lons_new.csv","type":"text/csv","lastModified":1587747135473.726,"size":181116},{"id":"27ad64aa26310417cacbb92dfd861928a49f4ac5e8cf2f533dbbd928ebf2fd680b23ce0e677ec8ac5f1a6732c00c34d07ca3a52a4b64e3c38811f95041731e73","href":"https://static.observableusercontent.com/files/27ad64aa26310417cacbb92dfd861928a49f4ac5e8cf2f533dbbd928ebf2fd680b23ce0e677ec8ac5f1a6732c00c34d07ca3a52a4b64e3c38811f95041731e73","name":"lats_new.csv","type":"text/csv","lastModified":1587747135518.102,"size":174150},{"id":"9d387aaee20d89369439943038576f28d6dc734b5b10f4dccc5e4fa147c0fb89356b08ccce7d8122f6a4acad6bc53f77eed7b2c27c5fc5197a36a402bb5af7c0","href":"https://static.observableusercontent.com/files/9d387aaee20d89369439943038576f28d6dc734b5b10f4dccc5e4fa147c0fb89356b08ccce7d8122f6a4acad6bc53f77eed7b2c27c5fc5197a36a402bb5af7c0","name":"data_new.csv","type":"text/csv","lastModified":1587747135543.194,"size":174150},{"id":"bee3593115596155dbc9b9a461fca5a39eb9209e592ee45114023e20892c5914ca2e6fa5787b0381524f1b4c2f919158552e4ec59b1f062e459f1f0af7b0dc76","href":"https://static.observableusercontent.com/files/bee3593115596155dbc9b9a461fca5a39eb9209e592ee45114023e20892c5914ca2e6fa5787b0381524f1b4c2f919158552e4ec59b1f062e459f1f0af7b0dc76","name":"lons_40.csv","type":"text/csv","lastModified":1587754517350.426,"size":719992},{"id":"6aeb28bbe69be9a5b98f42c1f7355722ecc5b439790a29e2b1974eefdcdf4078980d14a62f1d0329bf3c1a074d51a12f50e8b086aefb809183ac1c9d8cbc46a9","href":"https://static.observableusercontent.com/files/6aeb28bbe69be9a5b98f42c1f7355722ecc5b439790a29e2b1974eefdcdf4078980d14a62f1d0329bf3c1a074d51a12f50e8b086aefb809183ac1c9d8cbc46a9","name":"data_40.csv","type":"text/csv","lastModified":1587754517279.347,"size":692300},{"id":"d5cd767be20463237db37758562e030007766277e37bc2c5f400e4d49f64a2be41693e5e6955181d5b2ea83c4e230d50606c74c79634c3c86c7834389830f4fe","href":"https://static.observableusercontent.com/files/d5cd767be20463237db37758562e030007766277e37bc2c5f400e4d49f64a2be41693e5e6955181d5b2ea83c4e230d50606c74c79634c3c86c7834389830f4fe","name":"lats_40.csv","type":"text/csv","lastModified":1587754517420.786,"size":692300},{"id":"9e39c5ab9ccc14e508d349afff42f6085a93db9e2cfe55ae1967c6bcfce2ade612d6a71a22a342966ca7eebbdd7878734f053d6622952e1849374cf7a4824a65","href":"https://static.observableusercontent.com/files/9e39c5ab9ccc14e508d349afff42f6085a93db9e2cfe55ae1967c6bcfce2ade612d6a71a22a342966ca7eebbdd7878734f053d6622952e1849374cf7a4824a65","name":"lats_sofine.csv","type":"text/csv","lastModified":1587856359095.354,"size":2769200},{"id":"6602f99a6407a104779bfff06f2c085e5b8476603662d84c26c9332794cffa26ad6b2753a3afc6d38d7f2139ff17e4caa909f6063ffe4df017ae2c09b3c31bf4","href":"https://static.observableusercontent.com/files/6602f99a6407a104779bfff06f2c085e5b8476603662d84c26c9332794cffa26ad6b2753a3afc6d38d7f2139ff17e4caa909f6063ffe4df017ae2c09b3c31bf4","name":"data_sofine.csv","type":"text/csv","lastModified":1587856359097.441,"size":2769200},{"id":"dcf347e568e6778474c6fb4f6c76b15b1546bebf85084b6b87729529b858acf8042bbc94740fdd709c168f58af333e0c68c095e7752b23b07e5891fa8a64ebe5","href":"https://static.observableusercontent.com/files/dcf347e568e6778474c6fb4f6c76b15b1546bebf85084b6b87729529b858acf8042bbc94740fdd709c168f58af333e0c68c095e7752b23b07e5891fa8a64ebe5","name":"lons_sofine.csv","type":"text/csv","lastModified":1587856359112.472,"size":2879968}] 31:{"id":"c062dc65ebe33afd","slug":"hail-map","title":"Gridded Hail Days in the Contiguous US","thumbnail":"82da91c0c8da4489b53682e64da5ef3bd69dbf97dc7ac43b5ea89325e32ae6e3","access_level":"public","create_time":"$D2020-04-23T19:47:57.975Z","update_time":"$D2022-12-06T20:40:30.156Z","view_time":null,"first_public_time":"$D2020-04-24T17:09:09.520Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2cbab9f9f1a94cdb","login":"jpicca","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5c71dc5df44d86d6938b5986bed986e6b59004853f57c244a636dc58daee6be2","tier":"starter_2024"},"version":525,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4c08256f0e65a84","login":"jpicca","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5c71dc5df44d86d6938b5986bed986e6b59004853f57c244a636dc58daee6be2","tier":null}],"members":[{"type":"individual","id":"d4c08256f0e65a84","login":"jpicca","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5c71dc5df44d86d6938b5986bed986e6b59004853f57c244a636dc58daee6be2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Gridded Hail Days in the Contiguous US","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"geojsonMaker = function(gran) {\n let rawdata;\n if (gran == 'fine') {\n rawdata = ({\n lats: parse(lats), lons: parse(lons), hail: parse(data)\n });\n } else if (gran == 'coarse') {\n rawdata = ({\n lats: parse(lats_coarse), lons: parse(lons_coarse), hail: parse(data_coarse)\n });\n } else if (gran == 'soFine') {\n rawdata = ({\n lats: parse(lats_sofine), lons: parse(lons_sofine), hail: parse(data_sofine)\n });\n }\n \n return rawdata.lons.map((lon, i) => {\n return {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [+lon, +rawdata.lats[i]]\n },\n \"properties\": {\n \"days\": +rawdata.hail[i],\n \"index\": i\n }\n } \n })\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"mutable gran = 'coarse'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"parse = text => text.split(\" \").map(d => d.trim())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"lons = FileAttachment('lons_40.csv').text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"lats = FileAttachment('lats_40.csv').text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = FileAttachment('data_40.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"lons_coarse = FileAttachment('lons_new.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"lats_coarse = FileAttachment('lats_new.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"data_coarse = FileAttachment('data_new.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"lons_sofine = FileAttachment('lons_sofine.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"lats_sofine = FileAttachment('lats_sofine.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"data_sofine = FileAttachment('data_sofine.csv').text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"//color = d3.scaleSequential(d3.extent(geojson.map(entry => entry.properties.days)), interpolator)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"interpolator = d3.interpolateTurbo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3@5',\"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"