Public
Edited
Mar 24
Insert cell
Insert cell
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")
);
}
Insert cell
// 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;
}
Insert cell
Insert cell

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.
Learn more