duckDBClient = DuckDBClient.of({
flights: FileAttachment("flights-10m.parquet")
})
{
// FALCON
const flightsDuckDB = new falconVis.JsonDB(data);
const falcon = new falconVis.FalconVis(flightsDuckDB);
// VIEWS
const count = await falcon.view0D((updatedCounts) => {
mutable selected = updatedCounts.filter;
});
// const resolution = chartWidth; // if the resolution is the same as the chartWidth pixels, filtering will be accurate, if lower, filtering counts will be approximate
const resolution = 350; // I can afford to be approximate here to reduce memory
const distanceView = await falcon.view1D(
{
type: "categorical",
name: "type",
range:['tab', 'visa', 'cash']
},
(updatedCounts) =>
updateVegaliteChart(distanceChart, vegaliteDataFormat(updatedCounts))
);
const arrivalDelayView = await falcon.view1D(
{
type: "continuous",
name: "total",
bins: 30,
resolution
},
(updatedCounts) =>
updateVegaliteChart(arrivalDelayChart, vegaliteDataFormat(updatedCounts))
);
const flightDateView = await falcon.view1D(
{
type: "continuous",
name: "date",
bins: 25,
time: true,
resolution
},
(updatedCounts) =>
updateVegaliteChart(flightDateChart, vegaliteDataFormat(updatedCounts))
);
// LINK'em!
await falcon.link();
addListenersToChart(distanceChart, distanceView);
addListenersToChart(arrivalDelayChart, arrivalDelayView);
addListenersToChart(flightDateChart, flightDateView);
}
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.
