2f:T7bc,{ const scaleOptions = {type: 'log',grid: true, tickSize: 0, label: null} const plot = Plot.plot({ style: { color:annotationColor }, caption: md`*users, posts and new users in the last ${hours} hours per instance **(log)***`, marginTop:10, marginLeft: 30, marginBottom:30, width: width, height: 800, y: {...scaleOptions}, x: {...scaleOptions}, color: { legend:true, marginTop: 25, marginBottom: 15, marginLeft: 40, height: 55, type:'diverging-symlog', scheme: 'burd', tickSize: 5, tickRotate: 0, tickFormat: d3.format('~s'), ticks: 3, width:width - 30, label:null, style: { color:annotationColor, strokeWidth: 0 } }, marks: [ Plot.dot(instances, { x: 'users', y: 'statuses', stroke: null, fill: d => d[hours], fillOpacity: .8, stroke: annotationColor, strokeWidth:.5, title: d => `${d.name}\n${d.users} users\n${d[hours]} in the last ${hours} hours\n${d.statuses} posts` }), Plot.text([labels['users']], { frameAnchor: 'top', fontWeight:'bold', fontSize: 15, stroke: "#fff", fill:annotationColor, fillOpacity:.8, dy: 20 }), Plot.text([labels['statuses']], { frameAnchor: 'right', rotate:90, fontWeight:'bold', fontSize: 15, stroke: "#fff", fill:annotationColor, fillOpacity:.8, dx: -20 }), Plot.text([`new users in the last ${hours} hours (log)`], { frameAnchor: 'top', fontWeight:'bold', fontSize: 10, stroke: "#fff", fill:annotationColor, fillOpacity:.8, dy: -60 }), ], tooltip: { "stroke-width": 6, stroke:colors.users, "stroke-opacity": .4 } }) return plot }30:T63f,timeline = (data, y, x_axis, color, reverse=false) => { const axisOptions = {tickSize: 0, grid:true} const markOptions = {x:'updated_at', y:y} const xOptions = {true:{label:null, axis:'top', tickPadding:15}, false:{tickFormat:'', label:null}} const max_y = aq.agg(data, op.max(y)) const plot = Plot.plot({ width:width, height:250, marginBottom:15, marginTop:25, marginLeft:0, marginRight:30, style: { color:annotationColor }, x:{ ...axisOptions, ...xOptions[x_axis], domain:timedomain, type: 'time' }, y: { ...axisOptions, axis:'right', reverse:reverse, label: reverse ? '↓' : '↑', labelAnchor: reverse ? 'top' : 'bottom', labelOffset: 22, tickFormat: d => d == 0 ? '' : d3.format('~s')(d), ticks: max_y > 1 ? 4 : 1 }, marks: [ Plot.areaY(data, { ...markOptions, curve:'basis', fill:color, fillOpacity: .3 }), Plot.lineX(data, { ...markOptions, curve:'basis', stroke:color }), Plot.dotX(data, { ...markOptions, fill:color, r: dot_size, stroke: null, title:d => `${d[y]} ${labels[y]}\n${d['updated_at'].toLocaleString('en-US', {year: 'numeric', month: 'long', day: 'numeric', hour:'numeric', minute: 'numeric'})}` }), Plot.text([(reverse ? '↓' : '↑') + labels[y]], { frameAnchor: reverse ? 'bottom-left' : 'top-left', fontWeight:'bold', fill:'#000' }) ] }) return plot }31:T59f,topbars = (data, figcaption) => { const mid = data.orderby(aq.desc('users')).array('users')[0] * .75 const textOptions = {x: 'users', y: 'name', text: 'name'} const plot = Plot.plot({ marginLeft:0, height:numBars * 30, width:width, style: { color:annotationColor }, x: { axis:'top', grid:true, tickSize:0, label:null, tickFormat: d => d == 0 ? '' : d3.format('~s')(d) }, y: { axis:null }, marks:[ Plot.barX(data, { x: 'users', y:'name', fill:colors['users'], fillOpacity: (6/hours) * .3 , stroke:colors['users'], strokeWidth:.5, insetTop:1, insetBottom:1, title: d => `${d.users} users`, sort:{y:'x', reverse:true} }), Plot.text(data.filter(aq.escape(d => d.users > mid)), { ...textOptions, fill: colors.users, fillOpacity:.9, fontWeight: 'bold', textAnchor: 'end', dx: -7 }), Plot.text(data.filter(aq.escape(d => d.users <= mid)), { ...textOptions, fill: annotationColor, fontWeight: 'bold', fillOpacity:.6, stroke:"#fff", textAnchor: 'start', dx: 7 }) ], tooltip: { fill: colors['users'], opacity:1, stroke: colors['users'], 'stroke-width':1.5 } }) return wrap(plot, caption(figcaption)) }32:T4d2,33:[] 2d:{"title":"Mastodon Key Metrics","cells":[{"id":1227,"value":"

Mastodon Key Metrics

users and posts checked every ~3 hours at instances.social

","pinned":false,"hidden":false,"mode":"html"},{"id":1361,"value":"caption('All times are UTC')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"htl.html`

Total New People Joining Mastodon

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"viewof type = Inputs.radio(['cum', 'new', 'daily'], {\n value:'new',\n format: d => labels[d]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"doubletimeline('mastodon', `${typecaptions[type]} at mastodon`, type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"htl.html`

where are they going

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"viewof hours = Inputs.radio([6,12,24,72], {\n value:24,\n format: d => `${d} hours`,\n label: 'new in the last ...'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"topbars(instances_since, `30 instances with more new users in the last ${hours} hours`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"htl.html`

are they joining the most popular instances?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"htl.html`

and how a about specific communities like ${selected_instance}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"viewof instance_search = Inputs.search(instances_all, {\n headers: {name: 'Instance', users: 'Users'},\n format: d => `${d} instances`,\n placeholder: 'Search any instance 🔍'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"viewof instance_table = Inputs.table(instance_search, {\n header: {name: 'Instance', users: 'Users'},\n multiple:false,\n value: instance_search[0],\n rows:7.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"viewof dummy_submit = Inputs.button(\"Check\", {value: null, reduce: ( ) => set(viewof selected_instance, instance_table.name)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"viewof type2 = Inputs.radio(['cum', 'new', 'daily'], {\n value:'new',\n format: d => labels[d]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"doubletimeline('instance', `${typecaptions[type2]} at ${selected_instance}`, type2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"htl.html`

... what are people saying at ${selected_instance}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"viewof dummy_peek = Inputs.button(`Take a peek`, {value: null, reduce: ( ) => set(viewof peek_instance, selected_instance)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"peek_timeline = {\n if (peek_instance != null) {\n return display_toots(toots)\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"---\nDependencies","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"Helper functions and constants","pinned":false,"hidden":false,"mode":"md"},{"id":1136,"value":"baseURL = 'https://raw.githubusercontent.com/mauforonda/mastodon_timeline/main/data/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"diff = (data, columns) => {\n return data.derive(\n Object.fromEntries(columns.map(t => [t, `d => d[\"${t}\"] - op.lag(d[\"${t}\"])`]))\n ).slice(1,)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"filter_daily = (data) => {\n return data.\n orderby('updated_at').\n groupby({date: d => op.datetime(op.year(d.updated_at), op.month(d.updated_at), op.date(d.updated_at))}).\n slice(0,1).\n ungroup()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"wrap = (...elems) => {\n const div = document.createElement(\"div\");\n elems.forEach(el => div.appendChild(el));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"tables = ({\n cum:{mastodon:mastodon, instance:instance}, \n new:{mastodon:mastodon_d, instance:instance_d}, \n daily: {mastodon:mastodon_daily, instance:instance_daily}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"labels = ({cum:'all', new:'new every 3 hours', daily:'new daily', users:'users', statuses:'posts'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"timedomain = [1,mastodon.numRows() - 1].map(i => mastodon.array('updated_at')[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"colors =({users:'#1d6ff3', statuses:'#fdc126'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"annotationColor = '#828287'","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"filter_instances = (data, column, number) => {\n return data.\n filter(aq.escape(d => d[column] > 0)).\n orderby(aq.desc(column)).\n slice(0,number).\n select('name', String(column)).\n rename(aq.names(['name', 'users']))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"numBars = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"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":1161,"value":"viewof selected_instance = {const element = htl.html`

`;\n element.value = 'mastodon.social';\n return element;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"caption = (text) => {return htl.html`

${text}

`}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"typecaptions = ({cum:'all users and posts', new:'new users and posts every 3 hours', daily: 'new users and posts daily'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"rows = mastodon.numRows()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"dot_size = rows < 500 ? ((1 - (rows / 500)) * 1.5) + 1.5 : 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"Data","pinned":false,"hidden":false,"mode":"md"},{"id":613,"value":"mastodon = {\n const data = await aq.loadCSV(`${baseURL}mastodon.csv`)\n return data.derive({updated_at: d => op.parse_date(d.updated_at)})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"mastodon_d = diff(mastodon, ['users', 'statuses'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"mastodon_daily = diff(filter_daily(mastodon), ['users', 'statuses'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"instance = {\n const data = await aq.loadCSV(`${baseURL}instance/${selected_instance}.csv`)\n return data.derive({updated_at: d => op.parse_date(d.updated_at)})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"instance_d = diff(instance, ['users', 'statuses'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"instance_daily = diff(filter_daily(instance), ['users', 'statuses'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"instances = aq.loadCSV(`${baseURL}instances.csv`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"instances_all = filter_instances(instances, 'users', -1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"instances_since = filter_instances(instances, hours, numBars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"Plots","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"doubletimeline = (dataset, figcaption, t) => {\n return wrap(\n timeline(tables[t][dataset], 'users', false, colors['users']),\n timeline(tables[t][dataset], 'statuses', true, colors['statuses'], true),\n caption(figcaption)\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"Some CSS","pinned":false,"hidden":false,"mode":"md"},{"id":1617,"value":"for inputs and headers","pinned":false,"hidden":false,"mode":"md"},{"id":1218,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1616,"value":"for toots","pinned":false,"hidden":false,"mode":"md"},{"id":1615,"value":"