2e:null 2f:["$","title",null,{"children":"Top Observablehq Notebooks of May 2022 | Tom Larkworthy | Observable"}] 34:Td42,The very top notebook was [Hello MapLibre](https://observablehq.com/@neocartocnrs/hello-maplibre) which had 18 likes and 6 retweets. [@neocartocnrs](https://observablehq.com/@neocartocnrs) is a familiar name in the Map Dataviz and Observable community. [MapLibre](https://maplibre.org/) is the OSS fork of mapbox-gl-js, and requires a little Observable knowhow to get working properly. Creating a _Hello X_ notebook is an Observablehq community norm when getting a new technology into the ecosystem, and MapLibre is a highly desirable dependency for the mapping community. Thus, getting that library working was a big deal, which was eagerly snapped up by the community. Since publishing, we have seen some other notebooks building on the path cut by [@neocartocnrs](https://observablehq.com/@neocartocnrs), for example, [Terrains with MapLibre](https://observablehq.com/@bert/terrains-with-maplibre) by [@bert](https://observablehq.com/@bert). The next big hit of the month was written by me! I can tell your that [Interactive Sequence Diagrams](https://observablehq.com/@tomlarkworthy/animated-sequence-diagrams) was a shower thought that struck me at 1a.m. at night. It's an extremely simple technique for creating user steppable sequence diagrams on Observable, which solved a problem I was having with technical documentation. It only took about 15 mins to code up. I was surprised by how well the notebook did on the trending page, leading me to submit it to Hackernews where it reached the front page. That notebook received more traffic than I ususally get in a whole month over all my notebooks. Clearly, Observable has great potential as a technical documentation host. Another big notebook of the month was [DarkCideS: Bats in Caves Data](https://observablehq.com/@observablehq/darkcides-bats-in-caves) by the [creators](https://observablehq.com/@observablehq) of Observable. That notebook is simply a stellar example of how to do sophisticated data analysis on the platform. In particular, it makes use of embedded SQL cells to deftly manipulate data and uses Plot to create amazing visualization with very little code. That notebook is my new reference example for canonical Dataviz techniques on Observable. 👏 great work Observble team it is a thing of beauty! The final notebook of the months big four was [A Sine-Cosine Encoder Experiment](https://observablehq.com/@skybrian/a-sine-cosine-encoder-experiment) by [@skybrian](https://observablehq.com/@skybrian). It's a wonderful example of doing real engineering at home using consumer equipement (LEGO!), that is just a great read with amazing charts of real data. These kinds of projects work quite well in Computational notebooks because you can easily embed pictures and do the mathematics in a single artifact. It lets you get everything down in a single place that you can refer back to at any time. I hope we see more like this! It did not make quite a big a splash as the other notebooks, but I find it quite amusing that the #5 in ${month} was last months *"best-of"* summary notebook! It had to happen eventually. I did tweet the notebook last month, so for the first time a summary notebook made it into [trending](https://observablehq.com/trending), and actually did really well! See you next month! Here are the [top trending](https://twitter.com/trendingnotebo2) notebooks of ${month} in their own words. 35:[{"id":"b68dbcadff6e6df996308934176ea45dc79f002be908c86d2606b95f1c67bd615288ee760e1b608b2091939bec4e4efaf3cb4652c2a52b537c7bbce7ea29d022","href":"https://static.observableusercontent.com/files/b68dbcadff6e6df996308934176ea45dc79f002be908c86d2606b95f1c67bd615288ee760e1b608b2091939bec4e4efaf3cb4652c2a52b537c7bbce7ea29d022","name":"fetchedMeta (6).json","type":"application/json","lastModified":1654065345308.815,"size":54986},{"id":"d997d66094f59482957c0b42180ea7668d0cb1b38b76c1e67fa6c653c5cfb88c0176ba478d04e8c40668f11bbdc100cc809ddad281cd1662cf90917e71b9c8a7","href":"https://static.observableusercontent.com/files/d997d66094f59482957c0b42180ea7668d0cb1b38b76c1e67fa6c653c5cfb88c0176ba478d04e8c40668f11bbdc100cc809ddad281cd1662cf90917e71b9c8a7","name":"fetchedTags (6).json","type":"application/json","lastModified":1654065345308.815,"size":9724},{"id":"05977de6e91435e6d3661781bd1ff56daf8b49a9bc7d390ca5715809514846fc3cae45eeccf65d7224b3f3c21fdd21820ecc539f3d086c74fa15db36d50f91fc","href":"https://static.observableusercontent.com/files/05977de6e91435e6d3661781bd1ff56daf8b49a9bc7d390ca5715809514846fc3cae45eeccf65d7224b3f3c21fdd21820ecc539f3d086c74fa15db36d50f91fc","name":"tweet_activity_metrics_trendingnotebo2_20220501_20220601_en.csv","type":"text/csv","lastModified":1654065557791.93,"size":11605},{"id":"2ebea91ab2063de8eab668dd9badb4ab6c16758ced8ac1ba9579553bab00c3569e8ac6a6e1938fc489713020678ede39b83a2ddf4634761a57afd88b4da4e0a9","href":"https://static.observableusercontent.com/files/2ebea91ab2063de8eab668dd9badb4ab6c16758ced8ac1ba9579553bab00c3569e8ac6a6e1938fc489713020678ede39b83a2ddf4634761a57afd88b4da4e0a9","name":"fetchedNotebookURL (5).json","type":"application/json","lastModified":1654066048943.545,"size":1695},{"id":"80bb079de24b599bd1f47b0a94cc1976f2c0a58aaf1aa9abf9a85943c766fc327237eb7381e7b09081be782eef73abb73feac001205cfb940dba57d4fd644f11","href":"https://static.observableusercontent.com/files/80bb079de24b599bd1f47b0a94cc1976f2c0a58aaf1aa9abf9a85943c766fc327237eb7381e7b09081be782eef73abb73feac001205cfb940dba57d4fd644f11","name":"fetchedMetadata (6).json","type":"application/json","lastModified":1654066089912.462,"size":5599},{"id":"b1672860c46f3b0da18f50caac091c0c6fc5033dd8a63a2294090bfe9b8fc95b35e4ef5bafb69614df90f4e3004578d4c167841a3603a334a934bec765cf3106","href":"https://static.observableusercontent.com/files/b1672860c46f3b0da18f50caac091c0c6fc5033dd8a63a2294090bfe9b8fc95b35e4ef5bafb69614df90f4e3004578d4c167841a3603a334a934bec765cf3106","name":"fetchedMeta (7).json","type":"application/json","lastModified":1654066338074.424,"size":38569},{"id":"23c0b5107c0a3141f49e54a9f3280f77f251ceb623149253e9a18db55783119cf657ea6d3d540ab4c1cdebaaefc0f8e6fa1290f41916830d4b352a0d16147634","href":"https://static.observableusercontent.com/files/23c0b5107c0a3141f49e54a9f3280f77f251ceb623149253e9a18db55783119cf657ea6d3d540ab4c1cdebaaefc0f8e6fa1290f41916830d4b352a0d16147634","name":"fetchedTags (7).json","type":"application/json","lastModified":1654066415006.642,"size":12039}] 32:{"id":"3d0f9e2d75202e76","slug":"notebooks-2022-05","title":"Top Observablehq Notebooks of May 2022","thumbnail":"0169770ff9952482d72eead1a3d9a6835c8063a332f2a8abb9c0ce60b75daf2d","access_level":"public","create_time":"$D2022-06-01T06:35:45.308Z","update_time":"$D2022-06-01T14:01:54.817Z","view_time":null,"first_public_time":"$D2022-06-01T13:49:56.818Z","has_unpublished_edits":null,"fork":{"id":"8ceea2cb7d7a8a20","slug":"notebooks-2022-04","title":"Top Dataviz of April 2022 - Visualizing Air Raid Sirens in Ukraine","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":9,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":599,"publish_version":599,"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 Observablehq Notebooks of May 2022","cells":[{"id":367,"value":"# Top Observablehq Notebooks of May 2022 ","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":"$${month} had 4 times more engagement with the [Trending Notebook Bot](https://twitter.com/trendingnotebo2) than April! This is an unprecedented jump in activity! This I think was due to [@waynesutton](https://twitter.com/waynesutton) returning as community manager for Observable (👋 great to have you back Wayne!) and retweeting us a lot. Thanks Wayne, it makes a big impact for us! I had to rescale all my plots to \naccommodate!\n\n${month} had four notebooks in particular broke from the pack this month, each gaining many likes and retweets. I would say we are still waiting for a true viral Tweet authored by the [trending bot](https://twitter.com/trendingnotebo2), but we are getting some close calls!\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.09 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof offset = Inputs.range([0, 100], { value: 71 })","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: 5,\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 = \"May\"","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":547,"value":"SKIP = [\n \"Notebook of the month (maybe of the year?) by a clear margin was 'Visualizing Air Raid Sirens in Ukraine' by @mourner. Amazing work Volodymyr, thank you.\\n\\nhttps://t.co/a95BeD8luT\"\n]","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_20220501_20220601_en.csv\"\n ).csv()\n).filter(tweet => !SKIP.includes(tweet['Tweet text'])).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 (5).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 (6).json\").json()","pinned":false,"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 (7).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":289,"value":"tags = (await FileAttachment(\"fetchedTags (7).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"