31:T8ff, Top dog by a hair's breadth was *["Example Custom Embed"](https://observablehq.com/@endpointservices/example-custom-embed)* created by none other than me under my team account ([@endpointservices](https://observablehq.com/@endpointservices))! That notebook demonstrates how you can completely control the markup of a custom micro websites yet define logic using an [Observable](https://observablehq.com/) notebook. It's a problem people have and it was motivated by answering a question on the [Observable forum](https://talk.observablehq.com/t/how-can-i-remove-the-observable-logo/6362/6). I highly recommend raiding the forum as a source of inspiration, I also recommend using Observable as a website builder-lite. The next outstanding notebook in March was *[Hello, Ruffle!](https://observablehq.com/@mootari/ruffle-js)* by [@mootari](https://observablehq.com/@mootari). The Observablehq community has a tradition of bringing in new technologies onto the platform via an introductory notebook called *hello X*, so this notebook was about getting [Ruffle](https://ruffle.rs/) running. Ruffle is a *Rust* implementation of Adobe Flash compiled to WASM for use on the WEB, so now you can start playing your favourite Flash experiences on Observable! Our third winner of March was [Shape interpolations with flubber](https://observablehq.com/@neocartocnrs/shape-interpolations-with-flubber) by [@neocartocnrs](https://observablehq.com/@neocartocnrs). Flubber is an animation library that lets you interpolate between arbitrary SVG shapes. I think this notebook did well because it has some great interactive demos that both wow and and reveal the limitations of [Flubber](https://github.com/veltman/flubber). It is tactile, honest and informative which are great ingredients for a successful computational notebook! If you like that one you will probably also like [https://observablehq.com/@tophtucker/recreating-ostlings-regression-visualizations](https://observablehq.com/@tophtucker/recreating-ostlings-regression-visualizations) by [@tophtucker](https://observablehq.com/@tophtucker) which is a very informative set of demonstrations of linear interpolation gotchas. Talk to you next month! Here are all the [trending](https://twitter.com/trendingnotebo2) notebooks of March in their own words. 32:[{"id":"da685df43d0a31ac559a6548d5bdd5c1d92483adad105b449af4b7eca9763cc6e67fc05f266615e15a336555f4120a720a15b5bf444116e3623f7c68a5087d50","href":"https://static.observableusercontent.com/files/da685df43d0a31ac559a6548d5bdd5c1d92483adad105b449af4b7eca9763cc6e67fc05f266615e15a336555f4120a720a15b5bf444116e3623f7c68a5087d50","name":"fetchedMeta (2).json","type":"application/json","lastModified":1648798310320.923,"size":15861},{"id":"067dd226a62449ee708b04976279e6f069d1992769afe671fdf2c5000e59fad8258e08e4fb79fdac762f6b9f56247a6e3d23c8bf0197887089e30234c36d7c5c","href":"https://static.observableusercontent.com/files/067dd226a62449ee708b04976279e6f069d1992769afe671fdf2c5000e59fad8258e08e4fb79fdac762f6b9f56247a6e3d23c8bf0197887089e30234c36d7c5c","name":"fetchedMetadata (3).json","type":"application/json","lastModified":1648798310320.923,"size":4224},{"id":"6d570135e86549226eded356fd7014dd3548a10feaf117afcca2c823861fececc11d95c115400b27242594005e956a374146108999511045ab3b330dc2707bb1","href":"https://static.observableusercontent.com/files/6d570135e86549226eded356fd7014dd3548a10feaf117afcca2c823861fececc11d95c115400b27242594005e956a374146108999511045ab3b330dc2707bb1","name":"fetchedTags (3).json","type":"application/json","lastModified":1648798310320.923,"size":9640},{"id":"09b0520d3c4f54fc2a10d901614bd13b917fd5955f01bfdb6f2ef9695fa26fbb52681a824c08f7c1a2600156fd9f7feb76bbd3a85f3656a687ddc39978a022a1","href":"https://static.observableusercontent.com/files/09b0520d3c4f54fc2a10d901614bd13b917fd5955f01bfdb6f2ef9695fa26fbb52681a824c08f7c1a2600156fd9f7feb76bbd3a85f3656a687ddc39978a022a1","name":"fetchedNotebookURL (3).json","type":"application/json","lastModified":1648798563512.669,"size":1143},{"id":"b9e4df54ac8f577e5331bc36b3f86b23300a8e80e0253d37bae7fdec22abdd7b25a9f50a13932a7eb0ad5c76e46f41506cad7717a1a93e7a23a63057f388f6c4","href":"https://static.observableusercontent.com/files/b9e4df54ac8f577e5331bc36b3f86b23300a8e80e0253d37bae7fdec22abdd7b25a9f50a13932a7eb0ad5c76e46f41506cad7717a1a93e7a23a63057f388f6c4","name":"tweet_activity_metrics_trendingnotebo2_20220301_20220401_en.csv","type":"text/csv","lastModified":1648798476416.528,"size":7898},{"id":"c2414a68bc72321a1205f2cafbf4a2ad12f4c7f74db7d437bdd0cd110fe976315079b187506208bf93aa2ccc5a4d805cc4ab3fae7db5a5ec5bf39e02cc2a4c2a","href":"https://static.observableusercontent.com/files/c2414a68bc72321a1205f2cafbf4a2ad12f4c7f74db7d437bdd0cd110fe976315079b187506208bf93aa2ccc5a4d805cc4ab3fae7db5a5ec5bf39e02cc2a4c2a","name":"fetchedMeta (3).json","type":"application/json","lastModified":1648798668485.304,"size":14475},{"id":"2b7240690137cf0433fe476fd33e220b5ef2dc161ff588f6cde15eddc74619f5c14bba5e255753bbef6b3c0b68fb9e311ec9502900f40cd2c52672e6c5d79ce6","href":"https://static.observableusercontent.com/files/2b7240690137cf0433fe476fd33e220b5ef2dc161ff588f6cde15eddc74619f5c14bba5e255753bbef6b3c0b68fb9e311ec9502900f40cd2c52672e6c5d79ce6","name":"fetchedMetadata (4).json","type":"application/json","lastModified":1648798636092.019,"size":3845},{"id":"dd85837124355570a3d0298b4afb91a3492f35e4d08a48822383eca49586df36c4f1edd6ee571e31e5abd7e0949e1b7070c1a02509f1ebcc6d4449a6fa4c43dc","href":"https://static.observableusercontent.com/files/dd85837124355570a3d0298b4afb91a3492f35e4d08a48822383eca49586df36c4f1edd6ee571e31e5abd7e0949e1b7070c1a02509f1ebcc6d4449a6fa4c43dc","name":"fetchedTags (4).json","type":"application/json","lastModified":1648798700536.445,"size":8265}] 2f:{"title":"Inspiring Notebooks of March 2022","cells":[{"id":367,"value":"# Inspiring Notebooks of ${month} 2022","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":0,"value":"It's my favourite part of the month when I get to review what has happened recently on the [Observable](https://observablehq.com/) Dataviz platform. This month, three notebooks had very similar engagement as measured by the Twitter analytics of the [Trending Notebook Bot](https://twitter.com/trendingnotebo2).\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"### Engagement, Impressions, Likes and Retweets","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"Plot.plot({\n x: {\n domain: [0, 500]\n },\n y: {\n domain: [0, 25]\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"},{"id":168,"value":"viewof scaling = Inputs.range([0, 1], { value: 0.21 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof offset = Inputs.range([0, 100], { value: 39 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":378,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"md`${content}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"content = {\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) throw new Error(JSON.stringify(notebook));\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"},{"id":422,"value":"month = \"March\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":6,"value":"tweets = (\n await FileAttachment(\n \"tweet_activity_metrics_trendingnotebo2_20220301_20220401_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"},{"id":82,"value":"viewof fetchNotebookURL = Inputs.toggle({\n label: \"fetch notebook URL? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":104,"value":"notebookURL = FileAttachment(\"fetchedNotebookURL (3).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof fetchMetdata = Inputs.toggle({\n label: \"fetch metadata? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":123,"value":"metadata = FileAttachment(\"fetchedMetadata (4).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof fetchMeta = Inputs.toggle({\n label: \"fetch doc meta? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":131,"value":"meta = FileAttachment(\"fetchedMeta (3).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":283,"value":"viewof fetchTags = Inputs.toggle({\n label: \"fetch page meta tags? (network, slow)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":289,"value":"tags = (await FileAttachment(\"fetchedTags (4).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"},{"id":27,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import { getMetadata } from \"@mootari/notebook-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}