Doing stuff
The coronavirus pandemic ends when this chart shrinks againRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and StripeCoronavirus worldwide evolutionHow to visualize periodicity ?3d engine in DNA codeObservable & creative codingHistorical Illinois COVID-19 ZIP code dataMost favorited Hacker News posts of all timeIntroduction to SVG and D3.js
ActBlue Ticker Tracker
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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.