Interested in communicating data-driven insights. Director of Data Science at @ASNDataAnalytics.
Public
Edited
Jan 30, 2024
1 star
economist_plot = Plot.plot({
// inset: 2,
width: 1000,
height: 1000 * 0.618,
caption:
"*Where rental costs make up 30% of annual wage. Based on median studio rental prices, July 2023. Sources: Bureau of Labor Statistics; Zumper.\nCopyright 2023 The Economist.\nRecreated by @kpivert@fosstodon.org",
y: {
domain: [0, 150000],
axis: "right",
ticks: 4,
tickFormat: "$,.0",
tickSize: 0
},
x: { axis: null },
margin: 80,
color: { legend: true },
marks: [
Plot.ruleY([0, 50000, 100000, 150000], { stroke: "#cccccc" }),
Plot.dot(data_updated, {
x: "index",
y: "affordable_rent_wage",
fill: "#e2130c",
r: 4
// tip: true
}),
Plot.dot(data_updated, {
x: "index",
y: "median_wage",
fill: "#1c2b73",
r: 4
// tip: true
}),
Plot.ruleX(data_updated, {
x: "index",
y1: "affordable_rent_wage",
y2: "median_wage",
tip: true,
title: (d) =>
`${
d.city
}\nThe affordable rent wage is \$${d.affordable_rent_wage.toLocaleString()},\nwhich is \$${Math.abs(
d.diff
).toLocaleString()} ${d.more_less} than the median wage`
})
]
})
data_updated = data.map((d, index) => ({
...d,
median_wage: d.affordable_rent_wage - d.diff,
more_less: d.diff > 0 ? "more" : "less",
index
}))
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.
