2e:null 2f:["$","title",null,{"children":"Top Dataviz of April 2022 - Visualizing Air Raid Sirens in Ukraine | Tom Larkworthy | Observable"}] 34:T437,The notebook went viral on Twitter from Volodymyr's own [tweet](https://twitter.com/mourner/status/1512061703227248651). This went viral because it's provides a unique angle to a story people are interested in. Volodymyr collected the data with a bot scraping for regional Telegram air raid alerts. The dataviz makes an emotional connection to the viewer - seeing those alerts visualized gives makes the reader anxious and empathetic to the suffering of those who a receiving those alerts for real. In a sense, the data provides insights into the anxiety level of Ukrainian citizens as this terrible war unfolds. As with everything on [Observable](https://observablehq.com/), you have permission to remix the visualization, the data is embedded in the notebook and you can [fork it](https://observablehq.com/@observablehq/fork-suggest-merge). Perhaps you think the data could be visualized in another way, maybe you could create the next viral hit? See you next month! Here are all the [trending](https://twitter.com/trendingnotebo2) notebooks of ${month} in their own words. 35:[{"id":"c2414a68bc72321a1205f2cafbf4a2ad12f4c7f74db7d437bdd0cd110fe976315079b187506208bf93aa2ccc5a4d805cc4ab3fae7db5a5ec5bf39e02cc2a4c2a","href":"https://static.observableusercontent.com/files/c2414a68bc72321a1205f2cafbf4a2ad12f4c7f74db7d437bdd0cd110fe976315079b187506208bf93aa2ccc5a4d805cc4ab3fae7db5a5ec5bf39e02cc2a4c2a","name":"fetchedMeta (3).json","type":"application/json","lastModified":1651567985904.101,"size":14475},{"id":"2b7240690137cf0433fe476fd33e220b5ef2dc161ff588f6cde15eddc74619f5c14bba5e255753bbef6b3c0b68fb9e311ec9502900f40cd2c52672e6c5d79ce6","href":"https://static.observableusercontent.com/files/2b7240690137cf0433fe476fd33e220b5ef2dc161ff588f6cde15eddc74619f5c14bba5e255753bbef6b3c0b68fb9e311ec9502900f40cd2c52672e6c5d79ce6","name":"fetchedMetadata (4).json","type":"application/json","lastModified":1651567985904.101,"size":3845},{"id":"09b0520d3c4f54fc2a10d901614bd13b917fd5955f01bfdb6f2ef9695fa26fbb52681a824c08f7c1a2600156fd9f7feb76bbd3a85f3656a687ddc39978a022a1","href":"https://static.observableusercontent.com/files/09b0520d3c4f54fc2a10d901614bd13b917fd5955f01bfdb6f2ef9695fa26fbb52681a824c08f7c1a2600156fd9f7feb76bbd3a85f3656a687ddc39978a022a1","name":"fetchedNotebookURL (3).json","type":"application/json","lastModified":1651567985904.101,"size":1143},{"id":"dd85837124355570a3d0298b4afb91a3492f35e4d08a48822383eca49586df36c4f1edd6ee571e31e5abd7e0949e1b7070c1a02509f1ebcc6d4449a6fa4c43dc","href":"https://static.observableusercontent.com/files/dd85837124355570a3d0298b4afb91a3492f35e4d08a48822383eca49586df36c4f1edd6ee571e31e5abd7e0949e1b7070c1a02509f1ebcc6d4449a6fa4c43dc","name":"fetchedTags (4).json","type":"application/json","lastModified":1651567985904.101,"size":8265},{"id":"ccc5c059a84d4ec78aa48d96cf471267387b6775d28461d80c618702f07e08c65f0abad34c50a5992fd3a80cf4266e15dfff2af388b9415950d3c4ea0f6a73fa","href":"https://static.observableusercontent.com/files/ccc5c059a84d4ec78aa48d96cf471267387b6775d28461d80c618702f07e08c65f0abad34c50a5992fd3a80cf4266e15dfff2af388b9415950d3c4ea0f6a73fa","name":"tweet_activity_metrics_trendingnotebo2_20220401_20220501_en.csv","type":"text/csv","lastModified":1651568009701.835,"size":8978},{"id":"714430375447298827b972a04e009133237fca6cdd304d7f86bc41e05b9b4f9dae077c7b755faa058e14d0175fd4600fad1c5ce942069d22f96fd06b8a919e56","href":"https://static.observableusercontent.com/files/714430375447298827b972a04e009133237fca6cdd304d7f86bc41e05b9b4f9dae077c7b755faa058e14d0175fd4600fad1c5ce942069d22f96fd06b8a919e56","name":"fetchedMeta (5).json","type":"application/json","lastModified":1651568300415.182,"size":14490},{"id":"416a69c7401d990f4d70b56351a2ae8ce1062f5338a330b1bcebbe2db1f6937358271c03ab1149b18aa18e0d7a0710920b3129c2248e59ba527181c799cd5f66","href":"https://static.observableusercontent.com/files/416a69c7401d990f4d70b56351a2ae8ce1062f5338a330b1bcebbe2db1f6937358271c03ab1149b18aa18e0d7a0710920b3129c2248e59ba527181c799cd5f66","name":"fetchedMetadata (5).json","type":"application/json","lastModified":1651568918409.935,"size":4277},{"id":"3b7ad2b2de12ecb7e88102f16809b14f5017fc037ae181515c9393da3d7902d4dbb8df1acd9e0fbef1c803e38b95180044bf0e0bbfc076182f11f41ffa19f1ee","href":"https://static.observableusercontent.com/files/3b7ad2b2de12ecb7e88102f16809b14f5017fc037ae181515c9393da3d7902d4dbb8df1acd9e0fbef1c803e38b95180044bf0e0bbfc076182f11f41ffa19f1ee","name":"fetchedNotebookURL (4).json","type":"application/json","lastModified":1651568180477.689,"size":1234},{"id":"af5f74e1ca9ba8747fbdca0cf2ee6703cb9b4eaa42805ab396375d278fd8e7d916987fbefefbb360ca9a0235c87539ecccd9ebdb8d5d009b43bddfafb62b2ac1","href":"https://static.observableusercontent.com/files/af5f74e1ca9ba8747fbdca0cf2ee6703cb9b4eaa42805ab396375d278fd8e7d916987fbefefbb360ca9a0235c87539ecccd9ebdb8d5d009b43bddfafb62b2ac1","name":"fetchedTags (5).json","type":"application/json","lastModified":1651568244465.797,"size":8352},{"id":"b68dbcadff6e6df996308934176ea45dc79f002be908c86d2606b95f1c67bd615288ee760e1b608b2091939bec4e4efaf3cb4652c2a52b537c7bbce7ea29d022","href":"https://static.observableusercontent.com/files/b68dbcadff6e6df996308934176ea45dc79f002be908c86d2606b95f1c67bd615288ee760e1b608b2091939bec4e4efaf3cb4652c2a52b537c7bbce7ea29d022","name":"fetchedMeta (6).json","type":"application/json","lastModified":1651569846647.369,"size":54986},{"id":"d997d66094f59482957c0b42180ea7668d0cb1b38b76c1e67fa6c653c5cfb88c0176ba478d04e8c40668f11bbdc100cc809ddad281cd1662cf90917e71b9c8a7","href":"https://static.observableusercontent.com/files/d997d66094f59482957c0b42180ea7668d0cb1b38b76c1e67fa6c653c5cfb88c0176ba478d04e8c40668f11bbdc100cc809ddad281cd1662cf90917e71b9c8a7","name":"fetchedTags (6).json","type":"application/json","lastModified":1651569725206.109,"size":9724}] 32:{"id":"8ceea2cb7d7a8a20","slug":"notebooks-2022-04","title":"Top Dataviz of April 2022 - Visualizing Air Raid Sirens in Ukraine","thumbnail":"5dad7ff99d965a35bd964f482f01455d67f7ee6591fdc0ad3801086213230b9c","access_level":"public","create_time":"$D2022-05-03T08:53:05.904Z","update_time":"$D2022-05-03T09:50:43.442Z","view_time":null,"first_public_time":"$D2022-05-03T09:45:35.863Z","has_unpublished_edits":null,"fork":{"id":"ae4483daa1dab42a","slug":"notebooks-2022-03","title":"Inspiring Notebooks of March 2022","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":11,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":542,"publish_version":542,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"2c7d376b5f177684","slug":"curation","title":"curation","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Top Dataviz of April 2022 - Visualizing Air Raid Sirens in Ukraine","cells":[{"id":367,"value":"# Top Dataviz of ${month} 2022 - Visualizing Air Raid Sirens in Ukraine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"{\n const notebooks = data\n .map((value) => ({ value, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(({ value }) => value);\n return htl.html`${Array.from({\n length: 5\n }).map(\n (__, j) =>\n htl.html.fragment`${Array.from({\n length: 4\n }).map((__, i) => {\n const notebook = data[i + j * 4];\n if (notebook === undefined) return;\n return htl.html.fragment``\n )}

\n \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"This month, our [Trending Notebook Bot](https://twitter.com/trendingnotebo2) saw huge engagement with [Volodymyr Agafonkin\n's](https://observablehq.com/@mourner) notebook [Visualizing Air Raid Sirens in Ukraine](https://observablehq.com/@mourner/sirens). It's the biggest hit of the year so far.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### Engagement, Impressions, Likes and Retweets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"Plot.plot({\n x: {\n domain: [0, d3.max(data, (d) => d.impressions * 1.2)]\n },\n y: {\n domain: [0, d3.max(data, (d) => d.engagements * 1.3)]\n },\n marks: [\n Plot.image(\n [...data].sort((x) => x.impressions),\n {\n x: \"impressions\",\n y: \"engagements\",\n width: \"importance\",\n title: \"title\",\n src: \"thumbnail\"\n }\n ),\n Plot.text(data, {\n text: (d) =>\n Array.from({ length: d.likes })\n .map((_) => \"❤️\")\n .join(\"\") +\n Array.from({ length: d.retweets })\n .map((_) => \"🔁\")\n .join(\"\"),\n x: \"impressions\",\n y: \"engagements\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof scaling = Inputs.range([0, 1], { value: 0.21 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof offset = Inputs.range([0, 100], { value: 39 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"viewof cutoff = Inputs.range([0, data.length], {\n value: 2,\n step: 1,\n label: \"cutoff\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"md`${content}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"content = {\n debugger;\n let markdown = \"\";\n for (let i = 0; i < cutoff; i++) {\n const notebook = data[i];\n const author = /(@[^)]+)/.exec(notebook.author)[1];\n markdown += `### [${notebook.title}](${notebook.url}) by [${author}](https://observablehq.com/${author}) \\n`;\n markdown += `\\n`;\n markdown += `\\n[![](${notebook.thumbnail})](${notebook.url})\\n`;\n markdown += `\\n${notebook?.description || \"No description provided\"}\\n`;\n markdown += `\\n`;\n markdown += \"\\n---\\n\";\n }\n\n markdown += `\\n`;\n\n markdown += `These other notebooks also trended in ${month}\\n`;\n for (let i = cutoff; i < data.length; i++) {\n const notebook = data[i];\n const author_match = /(@[^)]+)/.exec(notebook.author);\n if (!author_match) {\n debugger;\n throw new Error(JSON.stringify(notebook));\n }\n const author = author_match[1];\n markdown += `#### [${notebook.title}](${notebook.url}) by [${author}](https://observablehq.com/${author}) \\n`;\n }\n\n return markdown;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"month = \"April\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"data = tweets\n .map((tweet, i) => ({\n ...tweet,\n ...meta[i],\n ...metadata[i],\n ...tags[i],\n thumbnail: thumbnailURL(i),\n importance: tweet.impressions * scaling + offset\n }))\n .sort((a, b) => b.impressions - a.impressions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"tweets = (\n await FileAttachment(\n \"tweet_activity_metrics_trendingnotebo2_20220401_20220501_en.csv\"\n ).csv()\n).map((x) => ({\n ...x,\n engagements: parseFloat(x.engagements),\n impressions: parseFloat(x.impressions),\n likes: parseFloat(x.likes),\n retweets: parseFloat(x.retweets)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof fetchNotebookURL = Inputs.toggle({\n label: \"fetch notebook URL? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"expandTwitterURL = async (shortURL) => {\n const response = await fetch(shortURL);\n if (response.status !== 200)\n throw new Error(`fetch to ${shortURL} resulted in ${response.status}`);\n const body = await response.text();\n return /URL=([^\"]*)\"/.exec(body)[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"fetchedNotebookURL = {\n if (!fetchNotebookURL) return invalidation;\n const notebooks = new Array(tweets.length);\n for (let i = 0; i < tweets.length; i++) {\n const shortcode = /(https:\\/\\/t.co\\/[0-9a-zA-Z]*) https:\\/\\/t.co\\/[0-9a-zA-Z]*$/.exec(\n tweets[i][\"Tweet text\"]\n );\n if (!shortcode) {\n console.error(tweets[i]);\n throw Error(JSON.stringify(tweets[i]));\n }\n notebooks[i] = expandTwitterURL(shortcode[1]);\n }\n return Promise.all(notebooks);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"notebookURL = FileAttachment(\"fetchedNotebookURL (4).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof fetchMetdata = Inputs.toggle({\n label: \"fetch metadata? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"fetchedMetadata = {\n if (!fetchMetdata) return invalidation;\n\n const metadata = new Array(tweets.length);\n for (let i = 0; i < tweets.length; i++) {\n metadata[i] = await getMetadata(\n notebookURL[i].replace(\"https://observablehq.com/\", \"\")\n );\n }\n return metadata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"metadata = FileAttachment(\"fetchedMetadata (5).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"tags[14]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof fetchMeta = Inputs.toggle({\n label: \"fetch doc meta? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"fetchedMeta = {\n if (!fetchMeta) return invalidation;\n const meta = new Array(tweets.length);\n for (let i = 0; i < tweets.length; i++) {\n if (metadata[i]) {\n meta[i] = (\n await fetchp(\n `https://api.observablehq.com/document/${metadata[i].id}/meta`\n )\n ).json();\n }\n }\n return Promise.all(meta);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"meta = FileAttachment(\"fetchedMeta (6).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"thumbnailURL = (index) =>\n meta[index]\n ? `https://static.observableusercontent.com/thumbnail/${\n meta[index].custom_thumbnail || meta[index].thumbnail\n }.jpg`\n : undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof fetchTags = Inputs.toggle({\n label: \"fetch page meta tags? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"fetchedTags = {\n if (!fetchTags) return invalidation;\n var el = document.createElement(\"tmp\");\n const tags = new Array(tweets.length);\n for (let i = 0; i < tweets.length; i++) {\n if (metadata[i]) {\n el.innerHTML = await (await fetchp(metadata[i].url)).text();\n\n try {\n tags[i] = {\n title: el.querySelector(\"meta[property='og:title']\").content,\n description: el.querySelector(\"meta[name=description]\").content\n };\n } catch (err) {\n console.error(\"Problem with tags for \" + i);\n }\n }\n }\n return tags;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"tags[14]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"tags = (await FileAttachment(\"fetchedTags (6).json\").json()).map((t) => {\n let description = undefined;\n if (t?.description) {\n description = t.description;\n\n if (description.lastIndexOf(\".\") !== -1)\n description = description.substring(0, description.lastIndexOf(\".\") + 1);\n }\n\n return {\n ...t,\n description\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import { getMetadata } from \"@mootari/notebook-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"