Public
Edited
Oct 24, 2023
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(
budget_data.filter((d) => d.fund_code === "0300"),
{
x: (d) => new Date(d.year.toString()),
y: "amount",
fill: (d) => d.appropriation_account_description,
order: "sum",
tip: true,
reverse: true
}
),
Plot.ruleY([0])
]
})
budget_data.filter((d) =>
d.appropriation_account_description.startsWith("SOFTWARE")
)
corporate_budget = d3.flatRollup(
budget_data.filter((d) => d.fund_code === "0100"),
(v) => d3.sum(v, (d) => d.amount),
(d) => d.year
)
budgets = [
{
year: 2023,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/pn35-trku.json"
},
{
year: 2022,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/2cr6-8u6w.json"
},
{
year: 2021,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/385z-7dwt.json"
},
{
year: 2020,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/fyin-2vyd.json"
},
{
year: 2019,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/h9rt-tsn7.json"
},
{
year: 2018,
type: "appropriations",
url: "https://data.cityofchicago.org/resource/6g7p-xnsy.json"
}
]
query = ({
'$select' : '*',
'$where': 'department_number = 25',
})
budget_data = raw_budget_data.map((d) => ({
...d,
amount:
(d.appropriation || d._ordinance_amount_) * cpi_chicago_2023.get(d.year - 1)
}))
raw_budget_data = {
const budget_data = [];
for (const budget of budgets) {
const response = await fetch(
budget.url + "?" + new URLSearchParams(query),
{
method: "GET",
headers: { "Content-Type": "application/json" }
}
);
const data = await response.json();
budget_data.push(data.map((d) => ({ ...d, year: budget.year })));
}
return budget_data.flat();
}
cpi_chicago = [
{ year: 2017, index: 235.177 },
{ year: 2018, index: 238.957 },
{ year: 2019, index: 242.393 },
{ year: 2020, index: 245.745 },
{ year: 2021, index: 256.881 },
{ year: 2022, index: 278.03 },
{ year: 2023, index: 284.375 }
]
cpi_chicago_2023 = {
const base = cpi_chicago.find((d) => d.year === 2023).index;
return new Map(cpi_chicago.map(({ year, index }) => [year, base / 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.
