27:null 28:["$","title",null,{"children":"ruby.social Hashtags | Dan Mayer | Observable"}] 2d:T4ec,2e:T705,plot_trend = (trend) => { const timeparser = d3.timeParse('%s') const timeformat = {month: 'long', day:'numeric', timeZone: 'UTC'} const accounts = trend.history.map(i => Number(i.accounts)).reduce((a, b) => a + b, 0) const uses = trend.history.map(i => Number(i.uses)).reduce((a, b) => a + b, 0) const days = trend.history.length const text = htl.html`

#${trend.name}

${accounts} people mentioned it ${uses} times
in the past ${days} days

` const plot = Plot.plot({ height: 70, width: 200, x: { transform: timeparser, domain: [timeparser(trend.history.slice(-1)[0].day), timeparser(Number(trend.history[0].day) + 86400)], ticks: null, axis: null }, y: { transform: Number, domain: [0, top_value * 1.1], ticks: null, axis: null }, marks: [ Plot.areaY(trend.history, { x: 'day', y: 'uses', fill: colors.mastodon, fillOpacity: .3, curve: 'basis' }), Plot.line(trend.history, { x: 'day', y: 'uses', stroke: colors.mastodon, strokeWidth: 2, curve: 'basis' }), Plot.dot(trend.history, { x: 'day', y: 'uses', r: 2, stroke: null, fill: colors.mastodon, title: d => `${d.uses == 1 ? "1 mention" : d.uses + " mentions"} \non ${timeparser(d.day).toLocaleDateString('en-US', timeformat)}` }) ], tooltip: { fill: colors.highlight, stroke: colors.highlight, "stroke-width": 2 } }) return wrap([text, plot], 'trend horizontal') }2f:[] 2b:{"id":"4463003990c6078e","slug":null,"title":"ruby.social Hashtags","thumbnail":"d9d73706c2ae0ff7aa4be925ca88de16b7763e37af5151b389012098ad05e83f","access_level":"public","create_time":"$D2022-12-21T00:29:54.490Z","update_time":"$D2022-12-22T21:13:21.801Z","view_time":null,"first_public_time":"$D2022-12-21T00:29:54.490Z","has_unpublished_edits":null,"fork":{"id":"894f5248a585a49a","slug":"mastodon-hashtags","title":"Mastodon Hashtags","owner":{"id":"475974948549302f","login":"mauforonda","name":"Mauricio Foronda"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3ed93f9b79f68466","login":"dan-mayer","name":"Dan Mayer","avatar_url":"https://avatars-next.observableusercontent.com/382f8c988fbdd06b261e9c5a735bbebe563a5dff4eb25af9ca697fbf78be6252","tier":"starter_2024"},"version":735,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1ffbbd38ee5d3fa","login":"dan-mayer","name":"Dan Mayer","avatar_url":"https://avatars-next.observableusercontent.com/382f8c988fbdd06b261e9c5a735bbebe563a5dff4eb25af9ca697fbf78be6252","tier":null}],"members":[{"type":"individual","id":"b1ffbbd38ee5d3fa","login":"dan-mayer","name":"Dan Mayer","avatar_url":"https://avatars-next.observableusercontent.com/382f8c988fbdd06b261e9c5a735bbebe563a5dff4eb25af9ca697fbf78be6252","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"ruby.social Hashtags","cells":[{"id":732,"value":"heading = md`

ruby.social Hashtags

ruby.social #hashtags

Visualize popular #hashtags on ruby.social

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"ruby_social_trends = {\n if (trends.length > 0) {\n return wrap([md`### Trends at **${instance.name}**`].concat(trends.map(trend => plot_trend(trend))), 'vertical')\n } else {\n return md`### No trends at **${instance.name}** 😓`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"{\n const instance_selected = {\n name: \"ruby.social\",\n users: 4653\n }\n return instance_selected\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"getUrl = (instance) => {\n return `https://${instance}/api/v1/trends/tags?limit=20`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"trends = {\n if (instance){\n const raw = await d3.json(getUrl(instance.name))\n return raw.sort((a, b) => Number(b.history[0].uses) - Number(a.history[0].uses))\n } else {\n return null\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"colors = ({mastodon: '#5f60e3', dark: '#5d4f84', light: '#c9caf0', highlight: '#f56ead'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"$2d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"text_width = {\n const longest_hashtag = Math.max(...trends.map(t => t.name.length)) * 7.7\n return longest_hashtag > 200 ? longest_hashtag : 200\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"wrap = (elems, classes) => {\n const div = document.createElement(\"div\");\n div.classList = classes\n elems.forEach(el => div.appendChild(el));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"top_value = Math.max(...trends.map(t => Math.max(...t.history.map(i => Number(i.uses)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof instance = {const element = htl.html`

`;\n element.value = ({name: 'ruby.social'});\n return element;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"