group = bins
.map(d => {
return [d.x0, d3.sum(d, d => d.difference)];
})
.filter(d => d[1])
bins = d3
.bin()
.value((d) => d.timestamp)
.thresholds(thresholdTime(d3.timeDay.every(1)))(data.slice().reverse())
data = {
const input = await d3.csv(url, ({ amount, timestamp }) => {
return {
amount: Number.parseInt(amount, 10),
timestamp: new Date(timestamp * 1000)
};
});
const data = input.map(({ amount, timestamp }, idx, arr) => {
let difference = null;
// this looks weird, but it's because they come in reverse-chron
if (idx + 1 !== arr.length) {
const prev = arr[idx + 1].amount;
difference = amount - prev;
}
return { amount, difference, timestamp };
});
return data;
}
height = width < 576 ? 300 : 500
function thresholdTime(n) {
return (data, min, max) => {
return d3
.scaleTime()
.domain([min, max])
.ticks(n);
};
}
url = 'https://raw.githubusercontent.com/rdmurphy/actblue-ticker-tracker/main/amounts.csv'
journalize = require("journalize@2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
