Data visualization and analysis at the University of Washington, Seattle.
Public
Edited
Aug 26, 2024
11 forks
34 stars
viewof flights = {
// load flights data from external parquet file
await vg.coordinator().exec(`CREATE TABLE IF NOT EXISTS flights10m AS
SELECT
GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay,
DISTANCE AS distance,
DEP_TIME AS time
FROM 'https://idl.uw.edu/mosaic-datasets/data/flights-10m.parquet'`);
// create a selection with crossfilter resolution
const brush = vg.Selection.crossfilter();
// helper method to generate a binned plot filtered by brush
// a plot contains a rectY mark for a histogram, as well as
// an intervalX interactor to populate the brush selection
const makePlot = column => vg.plot(
vg.rectY(
vg.from("flights10m", { filterBy: brush }), // data set and filter selection
{ x: vg.bin(column), y: vg.count(), fill: "steelblue", inset: 0.5 }
),
vg.intervalX({ as: brush }), // create an interval selection brush
vg.xDomain(vg.Fixed), // don't change the x-axis domain across updates
vg.marginLeft(75),
vg.width(600),
vg.height(200)
);
// generate dashboard with three linked histograms
return vg.vconcat(
makePlot("delay"),
makePlot("time"),
makePlot("distance")
);
}
// import vgplot and configure Mosaic to use DuckDB-WASM
vg = {
const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.10.0/+esm');
vg.coordinator().databaseConnector(vg.wasmConnector());
return vg;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.