2b:null 2c:["$","title",null,{"children":"The High-Resolution Rapid Refresh (HRRR) Weather Forecast Product Visualizer | Rusty Conover | Observable"}] 31:T85e,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; return { color: d3.interpolateSpectral(p), 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, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1], labels = []; div.innerHTML += "

" + output_name + ":

"; // 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":1588210775401.968,"size":6417320},{"id":"7c7c3baa888ee0f974092dfccdcb27c12e5e79a438f02b14c52f53fc9c27a1fe2492f6aee81317434d7ae49a51ba479bbe1769128e674461397488a87f96294e","href":"https://static.observableusercontent.com/files/7c7c3baa888ee0f974092dfccdcb27c12e5e79a438f02b14c52f53fc9c27a1fe2492f6aee81317434d7ae49a51ba479bbe1769128e674461397488a87f96294e","name":"all.data@3.json","type":"application/json","lastModified":1588258815663.737,"size":3759664},{"id":"a52aba94cd5073e121b914cadf261b7eb43b2563947db9e93fc56ffe3596d18b3573c8fd1786398cba5e807881edb7220a2caafb59b72f0845e162c322798d94","href":"https://static.observableusercontent.com/files/a52aba94cd5073e121b914cadf261b7eb43b2563947db9e93fc56ffe3596d18b3573c8fd1786398cba5e807881edb7220a2caafb59b72f0845e162c322798d94","name":"all.data@2.json","type":"application/json","lastModified":1588214692462.506,"size":4712764}] 2f:{"id":"8ffcf90925d0fc2d","slug":"the-high-resolution-rapid-refresh-hrrr-weather-forecast-pr","title":"The High-Resolution Rapid Refresh (HRRR) Weather Forecast Product Visualizer","thumbnail":"383fedfc3f7fce63ab4d8d0bd4db97adc4a500c8a639de99c904d78de36d50d6","access_level":"public","create_time":"$D2020-04-30T01:39:35.401Z","update_time":"$D2020-04-30T23:04:41.975Z","view_time":null,"first_public_time":"$D2020-04-30T03:21:14.279Z","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":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":426,"publish_version":426,"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":0,"collection":null,"type":"notebook","body":{"title":"The High-Resolution Rapid Refresh (HRRR) Weather Forecast Product Visualizer","cells":[{"id":0,"value":"md`# The High-Resolution Rapid Refresh (HRRR) Weather Forecast Product Visualizer\n\nI've taken the HRRR forecast products and combined them with H3 to build hexagonal forecast products.`","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":250,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"viewof output_name = select({\n title: \"Forecast Product\",\n description: \"Please pick the product to visualize.\",\n options: forecast_data.map(d => d.variable)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof resolution = slider({\n min: 0,\n max: 3,\n step: 1,\n value: 3,\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":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":409,"value":"md`## Histogram of forecast product value count per hexagon:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"x\", d => x(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"good_rows = forecast_data\n .filter(d => d.variable === output_name)[0]\n .data.map(r => r.split(/,/))\n .map(r => {\n r[2] = parseFloat(r[2]);\n return r;\n })\n .filter(record => record[0] == resolution)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"average_value = good_rows.reduce((a, c) => a + c[2], 0) / good_rows.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"min_value = good_rows.reduce((a, c) => Math.min(a, c[2]), good_rows[0][2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"max_value = good_rows.reduce((a, c) => Math.max(a, c[2]), good_rows[0][2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"std_dev = Math.sqrt(\n good_rows.reduce((a, c) => a + Math.pow(c[2] - average_value, 2), 0) /\n good_rows.length\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"centered_rows = good_rows.map(r => {\n r[2] = (r[2] - min_value) / (max_value - min_value);\n return r;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"centered_min = Math.min(...centered_rows.map(v => v[2]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"centered_max = Math.max(...centered_rows.map(v => v[2]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"centered_mean = centered_rows.reduce((a, c) => a + c[2], 0) /\n centered_rows.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"hexes = {\n let counter = 0;\n let hexGrid = [];\n for (const [level, hex_id, v] of centered_rows) {\n // get the coordinates of that hex.\n hexGrid.push({\n type: \"Feature\",\n properties: {\n coverage: v\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":246,"value":"forecast_data = await FileAttachment(\"all.data@3.json\").json()","pinned":true,"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"},{"id":338,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"margin = ({ top: 20, right: 20, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"data = centered_rows.map(r => r[2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(data))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"bins = d3\n .histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"