group = bins
.map((d) => {
return [d.x0, d3.sum(d, (d) => d.difference)];
})
.filter((d) => d[1])
dailyGroup = dailyBins
.map((d) => {
return [d.x0, d3.sum(d, (d) => d.difference)];
})
.filter((d) => d[1])
bins = d3
.bin()
.value((d) => d.timestamp)
.thresholds(
thresholdTime(
timeFrame === "Weekly" ? d3.timeWeek.every(1) : d3.timeDay.every(1)
)
)(orderedData)
.filter((d) => d[1])
dailyBins = d3
.bin()
.value((d) => d.timestamp)
.thresholds(thresholdTime(d3.timeDay.every(1)))(orderedData)
.filter((d) => d[1])
hourlyGroup = hourlyBins
.map((d) => [d.x0, d3.sum(d, (d) => d.difference)])
.slice(-24)
.map(([hour, amount]) => {
return {
hour,
amount
};
})
hourlyBins = d3
.bin()
.value((d) => d.timestamp)
.thresholds(thresholdTime(d3.timeHour.every(1)))(orderedData)
orderedData = 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 { difference, timestamp };
});
return data;
}
last24HoursData = {
// Get the current date and time
const now = new Date();
// Round down to the nearest hour
const roundedNow = new Date(now);
roundedNow.setMinutes(0, 0, 0);
// Calculate the threshold for the last 24 hours from the rounded time
const threshold = new Date(roundedNow.getTime() - 24 * 60 * 60 * 1000);
// Filter the array to include only dates within the last 24 hours
const filteredData = data
.filter(({ timestamp }) => timestamp >= threshold)
.map((d) => {
d.timestamp = dateFns.toZonedTime(d.timestamp, "America/New_York");
return d;
});
return filteredData;
}
height = width < 576 ? 300 : 500
function thresholdTime(n) {
return (data, min, max) => {
return d3
.scaleTime()
.domain([min, max])
.ticks(n);
};
}
hourFormat = d3.timeFormat("%-I %p")
dayFormat = d3.timeFormat("%b %-d")
url = 'https://raw.githubusercontent.com/rdmurphy/actblue-ticker-tracker/main/amounts.csv'
journalize = require("journalize@2")
dateFns = import("https://esm.sh/date-fns-tz@3.1.3")
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.
