The end-to-end solution for building and hosting better data apps, dashboards, and reports.
data = {
let offset = 0;
const pages = [];
while (true) {
const page = await d3.csv(`${url}?$limit=50000&$offset=${offset}`);
pages.push(page);
if (page.length === 0) break;
offset += page.length;
}
return pages.flat();
}
data[0]
filtered = data.filter((d => d.fiscal_year == year && (revOrSpend === "All" ? true : d.revenue_or_spending === revOrSpend)))
.map(d => ({...d, per_capita_budget: d.budget/population }))
population = 881500 // San Francisco's 2019 population, roughly
vl.markBar()
.data(filtered)
.encode(
vl.y().fieldN('organization_group').sort('-x'),
vl.x().sum('per_capita_budget')
)
.render()
import { vl } from '@vega/vega-lite-api'
import { select } from '@jashkenas/inputs'
d3 = require('d3-fetch')
import { twitch } from '@codingwithfire/twitch'
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.
