Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Public
Edited
Jul 31, 2023
42 forks
Importers
120 stars
Plot.plot({
width: 1152,
height: sort === "Date" ? 760 : 680,
insetLeft: 10,
insetRight: 60,
r: {range: [0, 80]},
marks: [
Plot.frame({anchor: "bottom"}),
Plot.dot(
fails,
Plot.dodgeY({
sort,
anchor: "bottom",
padding: 2,
x: "Date",
r: Assets, // N.B. sqrt scale
title: (d) => `${d["Bank Name"]}\n${(d[Assets] / 1000).toFixed(1)}B`,
tip: true,
fill: "#ddd",
stroke: "#000",
strokeWidth: 1
})
),
Plot.text(
fails,
Plot.filter((d) => d.Assets > 2000, Plot.dodgeY({
sort,
anchor: "bottom",
padding: 2,
x: "Date",
lineWidth: 5,
r: Assets,
text: (d) => d.Assets > 12900
? `${d["Bank Name"]}\n${(d[Assets] / 1000).toFixed(0)}B`
: `${(d[Assets] / 1000).toFixed(1)}`,
pointerEvents: "none",
fill: "#000",
stroke: "#ddd"
}))
)
]
})
fails = (await FileAttachment("bfb-data@2.csv").csv({array: true}))
.slice(1, -2)
.map((d) => {
const date = parseDate(d[2]);
const assets = parseAssets(d[3]);
return {
"Bank Name": d[0].split(", ")[0],
"City, State": d[0].split(", ").slice(1).join(", "),
"Date": date,
"Assets": assets,
"Assets (adj.)": adjustForInflation(date, assets),
"Acquirer": d[5]
};
})
parseDate = d3.utcParse("%d-%b-%y")
parseAssets = (x) => parseFloat(x.replace(/[^\d.]/g, ""))
findCpi = {
const bisector = d3.bisector((d) => d.DATE);
return (date) => cpiaucsl[bisector.center(cpiaucsl, date)].CPIAUCSL;
}
adjustForInflation = {
const currentCpi = findCpi(new Date("2023-05-01"));
return (date, value) => currentCpi / findCpi(date) * value;
}
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.
