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') }