29:null 2a:["$","title",null,{"children":"Active Atlantic Hurricane Data Dashboard | Ryan Murphy | Observable"}] 2f:[] 2d:{"id":"1cf1720090bf7120","slug":null,"title":"Active Atlantic Hurricane Data Dashboard","thumbnail":"eda90a12b3bfd956891d1755f117d469f8edbcd8cc4412710b2870035884c5de","access_level":"public","create_time":"$D2023-09-06T05:13:46.350Z","update_time":"$D2023-09-06T05:13:46.350Z","view_time":null,"first_public_time":"$D2023-09-06T05:13:46.350Z","fork":{"id":"903b0124d2067c66","slug":"active-atlantic-hurricane-data-dashboard","title":"Active Atlantic Hurricane Data Dashboard","owner":{"id":"384d3f6722cac794","login":"rdmurphy","name":"Ryan Murphy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"384d3f6722cac794","login":"rdmurphy","name":"Ryan Murphy","avatar_url":"https://avatars-next.observableusercontent.com/628845f351c52a323b67c8db22bc0cc4e07befb4c3e91105a9b244d94f98dd39","tier":"starter_2024"},"version":592,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"75ce2b5dcb573641","login":"rdmurphy","name":"Ryan Murphy","avatar_url":"https://avatars-next.observableusercontent.com/628845f351c52a323b67c8db22bc0cc4e07befb4c3e91105a9b244d94f98dd39","tier":null}],"members":[{"type":"individual","id":"75ce2b5dcb573641","login":"rdmurphy","name":"Ryan Murphy","avatar_url":"https://avatars-next.observableusercontent.com/628845f351c52a323b67c8db22bc0cc4e07befb4c3e91105a9b244d94f98dd39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Active Atlantic Hurricane Data Dashboard","cells":[{"id":0,"value":"md`# Active Atlantic Hurricane Data Dashboard`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"md`A collection of automated downloads to help get access to the various pieces of storm data the [National Hurricane Center](https://www.nhc.noaa.gov/) produces for active Atlantic storms. Instead of jumping through hoops to process and clean-up shapefiles or KMZ files, this taps into the public ArcServer instance that is updated with the shapefiles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`## Active storms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"feed.storms.length\n ? Inputs.table(\n feed.storms.map((d) => ({\n name: d.name,\n type: d.type,\n \"wind (mph)\": d.wind,\n pressure: d.pressure,\n \"wallet id\": d.wallet,\n \"storm id\": d.id,\n \"last updated\": d.lastUpdated\n }))\n )\n : md`No active storms.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"md`## Data downloads\nEach download requires **two** clicks - the first one preps the download and the second one delivers it to you.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"viewof exportType = Inputs.radio([\"GeoJSON\", \"TopoJSON\"], {\n label: html`Select your preferred export format`,\n value: \"GeoJSON\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"feed.storms.length\n ? html`${feed.storms.map(\n ({ id, graphic, name, type, wallet }) => html`\n

${type} ${name} (${wallet}/${id})

\n ${graphic ? html`

` : \"\"}\n ${DownloadList({ layers: getLayers(wallet, name), exportType })}\n

`\n )}`\n : md`No active storms.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"md`## Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"md`The only part of this process that requires a CORS proxy - hitting the JSON feed of the current active storms. This gives us our list of storms that currently have an active storm ID assigned. (If you fork the notebook **this will break**. The proxy only works in notebooks of mine.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"feed = {\n const res = await proxyFetch(\"https://www.nhc.noaa.gov/CurrentStorms.json\");\n const data = await res.json();\n\n return parseJsonFeed(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"md`We need to reach in to the ArcServer and sort out which storms are in which layers. Because we have the Wallet IDs (AT1, AT2, etc.) from the feed above we can sort out which layers belong to each storm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"activeStormFeed = {\n const data = await d3.json(\n `https://mapservices.weather.noaa.gov/tropical/rest/services/tropical/${mapServer}/MapServer?f=json`\n );\n\n return data.layers.filter(layer => !layer.subLayerIds);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"md`We'll use this function later to filter \\`activeStormFeed\\` for each storm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"function getLayers(walletId, stormName) {\n const layers = activeStormFeed.filter(layer =>\n layer.name.startsWith(walletId)\n );\n\n return layers.map(layer => ({\n name: layer.name.replace(`${walletId} `, ''),\n id: layer.id,\n stormName,\n url: buildURL(layer.id)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"md`A helper to build our URLs to the GeoJSON source.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"function buildURL(id) {\n return `https://mapservices.weather.noaa.gov/tropical/rest/services/tropical/${mapServer}/MapServer/${id}/query?where=1%3D1&f=geojson&geometryPrecision=6&outFields=*&orderByFields=objectid`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"mapServer = \"NHC_tropical_weather\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`## Templates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"function DownloadList({ exportType, layers }) {\n return html`\n

${name} (${id}): ${DOM.download(\n async () =>\n serializeJSON(\n await d3.json(url),\n exportType === 'TopoJSON',\n name\n ),\n slugify(`${name}_${stormName}.json`, {\n lower: true,\n replacement: '_'\n }),\n `Prepare ${exportType}`\n )}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"md`This uses a demo copy of the JSON feed provided by NHC so I can confirm this works even when there are no storms.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"falseFeed = parseJsonFeed(\n await (\n await proxyFetch(\n \"https://www.nhc.noaa.gov/productexamples/NHC_JSON_Sample.json\"\n )\n ).json()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"function parseJsonFeed(feed) {\n const storms = feed.activeStorms\n .filter((d) => d.binNumber.startsWith(\"AT\")) // only care about Atlantic Basin for now\n .map((storm) => {\n const id = storm.id.toUpperCase();\n const wallet = storm.binNumber;\n const parsedDate = DateTime.fromISO(storm.lastUpdate);\n const lastUpdated = parsedDate.toLocaleString(DateTime.DATETIME_SHORT);\n\n return {\n name: storm.name,\n type: parseClassification(storm.classification),\n wind: knotsToMph(+storm.intensity),\n pressure: +storm.pressure,\n wallet,\n id,\n graphic: buildGraphicUrl(id),\n lastUpdated\n };\n });\n\n return { storms };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"function proxyFetch(urlToProxy) {\n // const url = new URL('https://nhc-data-proxy.glitch.me/proxy');\n const url = new URL(\"https://nhc-data-proxy.deno.dev\");\n url.searchParams.append(\"url\", urlToProxy);\n\n return fetch(url);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"function serializeJSON(obj, asTopoJSON = false, name) {\n const str = JSON.stringify(\n asTopoJSON\n ? topojson.topology({\n [slugify(name, {\n lower: true,\n replacement: '_'\n })]: obj\n })\n : obj\n );\n return new Blob([str], { type: \"application/json\" });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"function serializeAllToTopoJSON(layers) {\n return new Promise(resolve => {\n const worker = new Worker(workerScript);\n\n function messaged({ data }) {\n resolve(new Blob([data], { type: 'application/json' }));\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener('message', messaged);\n worker.postMessage(layers.slice(0, 9));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"async function _serializeAllToTopoJSON(layers) {\n const geojsons = await Promise.all(layers.map(({ url }) => d3.json(url)));\n\n const objects = {};\n\n geojsons.forEach((geojson, idx) => {\n objects[\n slugify(layers[idx].name, {\n lower: true,\n replacement: '_'\n })\n ] = geojson;\n });\n\n const str = JSON.stringify(objects);\n\n return new Blob([str], { type: \"application/json\" });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"function knotsToMph(knots) {\n return knots * 1.15078;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"function parseClassification(code) {\n // Storm Classification abbreviation; one of the following:\n // TD - Tropical Depression\n // STD - Subtropical Depression\n // TS - Tropical Storm\n // HU - Hurricane\n // STS - Subtropical Storm\n // PTC - Post-tropical Cyclone / Remnants\n // TY - Typhoon (we don't use this currently)\n // PC - Potential Tropical Cyclone\n switch (code) {\n case \"TD\":\n return \"Tropical Depression\";\n case \"STD\":\n return \"Subtropical Depression\";\n case \"TS\":\n return \"Tropical Storm\";\n case \"HU\":\n return \"Hurricane\";\n case \"STS\":\n return \"Subtropical Storm\";\n case \"PTC\":\n return \"Post-tropical Cyclone\";\n case \"TY\":\n return \"Typhoon\";\n case \"PC\":\n return \"Potential Tropical Cyclone\";\n default:\n throw new Error(`No match found for code \"${code}\"`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"function buildGraphicUrl(id) {\n const number = id.slice(2, 4);\n return `https://www.nhc.noaa.gov/storm_graphics/AT${number}/${id}_5day_cone_with_line_and_wind_sm2.png`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"workerScript = {\n const blob = new Blob(\n [\n `\nimportScripts(\"${await require.resolve(\"topojson@3\")}\");\nimportScripts(\"${await require.resolve(\"slugify@1\")}\");\n\nonmessage = async (event) => {\n const layers = event.data;\n\n const geojsons = await Promise.all(\n layers.map(({ url }) =>\n fetch(url).then(res => res.json()\n ))\n );\n\n const objects = {};\n\n geojsons.forEach((geojson, idx) => {\n objects[\n slugify(layers[idx].name, {\n lower: true,\n replacement: '_'\n })\n ] = geojson;\n });\n\n const object = topojson.topology(objects);\n const str = JSON.stringify(object);\n\n postMessage(str);\n close();\n};\n`\n ],\n { type: \"text/javascript\" }\n );\n const script = URL.createObjectURL(blob);\n invalidation.then(() => URL.revokeObjectURL(script));\n return script;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"slugify = require('slugify@1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"journalize = require('journalize@2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"DateTime = require(\"luxon@3/build/amd/luxon.js\").then((m) => m.DateTime)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"topojson = require('topojson@3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"