function minichart(handle) { const data = rawdata[handle].map(d => d[1]); let w = width > 800 ? width / 4 : width > 600 ? width / 3 : width > 450 ? width / 2 : width; let s = d3.select(svg``); let margin = { top: 5, right: 80, bottom: 5, left: 0 }; w = w - margin.left - margin.right; let h = +s.attr("height") - margin.top - margin.bottom; let g = s .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleLinear().rangeRound([0, w]); var y = d3.scaleLinear().rangeRound([h, 0]); var area = d3 .area() .x((d, i) => x(i)) .y1(d => y(d)) .y0(h) var line = area.lineY1() var yExtent = d3.extent(data); x.domain([0, data.length]); y.domain([0, yExtent[1]]); const lastPoint = data[data.length - 1]; const peakLoss = lastPoint - yExtent[1]; const peakLossPct = peakLoss / yExtent[1]; g.append("g") .attr("transform", `translate(${w + 5}, 0)`) .call( d3 .axisRight(y) .tickValues(yExtent.concat(0)) .tickFormat(d => d ? d3.format(".2s")(d) : 0) ) .select(".domain") .remove() .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("x", -h / 2) .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "middle") .text("Followers"); g.append("path") .datum(data) .attr("fill", "steelblue") .attr("fill-opacity", .2) .attr("d", area); g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 2) .attr("d", line); g.append("circle") .attr("cx", x(data.length)) .attr("cy", y(lastPoint)) .attr("r", 3) .attr("fill", "steelblue"); const absolute = d3.format(".2s"); const pct = d3.format(".0%"); const div = html`

${s.node()}

@${handle}
${ peakLoss < 0 ? `${absolute(peakLoss)} followers
Lost ${pct(-peakLossPct)}` : `No loss` }

`; return { html: div, loss: peakLossPct }; }

@${handle} ${ peakLoss < 0 ? `${absolute(peakLoss)} followers Lost ${pct(-peakLossPct)}` : `No loss` }

@${handle}
${ peakLoss < 0 ? `${absolute(peakLoss)} followers
Lost ${pct(-peakLossPct)}` : `No loss` }