Cornell Grad
Plot.plot({
width: 1152,
height: 1000,
insetLeft: 10,
insetRight: 60,
r: {range: [0, 100]},
style: "overflow: visible;",
marks: [
Plot.frame({anchor: "bottom"}),
Plot.dot(
fails,
Plot.dodgeY({
anchor: "bottom",
padding: 2,
x: "Date",
r: "Assets",
title: (d) => `${d["Bank Name"]}\n${(d["Assets"] / 1000).toFixed(1)}B`,
fill: "#902",
stroke: "#000",
strokeWidth: 1.2
})
),
Plot.text(
fails,
Plot.dodgeY({
anchor: "bottom",
padding: 2,
filter: (d) => d.Assets > 2000,
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: "#fff",
//stroke: "#fff"
})
)
]
})
fails = (await FileAttachment("bfb-data.csv").csv({array: true}))
.slice(1, -2)
.map((d) => ({
"Bank Name": d[0].split(", ")[0],
"City, State": d[0].split(", ").slice(1).join(", "),
"Date": parseDate(d[2]),
"Assets": parseAssets(d[3]),
"Acquirer": d[5]
}))
parseDate = d3.utcParse("%d-%b-%y")
parseAssets = (x) => parseFloat(x.replace(/[^\d.]/g, ""))
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.
