31:T4ec,32: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') }33:[] 2f:{"title":"Mastodon Hashtags","cells":[{"id":375,"value":"

Mastodon Hashtags

Mastodon #hashtags

Explore popular #hashtags on different instances

","pinned":false,"hidden":false,"mode":"html"},{"id":524,"value":"{\n if (globalTrends.length > 0) {\n return wrap([md`### Trends at **Mastodon**\\n\\n_thanks to [Freebird](https://freebird.network/)_`, globalLegend, globalPlot, md`... and at every instance`], 'vertical')\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof instance_search = Inputs.search(instances, {placeholder: 'Search 🔍', format: d => `${d} instances`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof instance_selected = Inputs.table(instance_search, {\n header: {name: 'Instance', users: 'Users'},\n multiple:false, \n maxWidth: 430,\n value: instance_search[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"viewof dummy_peek = Inputs.button(instance_selected ? htl.html`Explore ${instance_selected.name}` : htl.html`😯`, {value: null, reduce: ( ) => set(viewof instance, instance_selected)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"{\n if (trends.length > 0) {\n return wrap([md`### Trends at **${instance.name}**\\n\\n_in the past ${trends[0].history.length} days_`].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"},{"id":424,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"Data","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"freebirdUrl = (hr) => {return `https://freebird-trends.fly.dev/api/v1/trending/${hr}hr`}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"async function getGlobal(hr) {\n const raw = await d3.json(freebirdUrl(hr))\n return raw.trending.map(i => ({hr: hr, tag: i.tag, count: i.count}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"globalTrends = {\n const hr1 = await getGlobal(1)\n const hr12 = await getGlobal(12)\n const hr24 = await getGlobal(24)\n return [hr1, hr12, hr24].flat()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"instances = {\n const raw = await d3.csv(\"https://raw.githubusercontent.com/mauforonda/mastodon_timeline/main/data/instances.csv\", d3.autoType)\n return raw.map(i => ({name: i.name, users: i.users}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"getUrl = (instance) => {\n return `https://${instance}/api/v1/trends/tags`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":322,"value":"Style","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"colors = ({mastodon: '#5f60e3', dark: '#5d4f84', light: '#c9caf0', highlight: '#f56ead'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":370,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":330,"value":"Plots","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":43,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"globalLegend = Swatches(d3.scaleOrdinal(\n ['1 hour', '12 hours', '24 hours'], \n d3.quantize(d3.interpolateHcl(colors.mastodon, colors.light), 3)), {\n marginLeft: globalMarginLeft,\n swatchSize: 12,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"globalPlot = {\n const scaleOptions = {tickSize: 0, tickPadding: 10, label: null}\n return Plot.plot({\n marginLeft: globalMarginLeft,\n marginTop: 10,\n style: {\n color: colors.dark,\n },\n x: {\n ...scaleOptions,\n grid: true,\n axis: 'top'\n },\n y: {\n ...scaleOptions,\n tickFormat: d => `#${d}`\n },\n color: {\n range: [colors.mastodon, colors.light]\n },\n marks: [\n Plot.barX(globalTrends, {\n x: 'count',\n y: 'tag',\n fill: 'hr',\n // fillOpacity: .7,\n title: d => `${d.count} mentions\\nin the past ${d.hr} hours`,\n sort: {\n y: 'x',\n reduce: 'max',\n reverse: true\n }\n }),\n ],\n tooltip: {\n fill: colors.highlight\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"globalMarginLeft = Math.max(...globalTrends.map(t => t.tag.length)) * 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"State","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":265,"value":"viewof instance = {const element = htl.html`

`;\n element.value = ({name: 'mastodon.social'});\n return element;}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}