We are a research group at the CMU HCII. Our mission is to empower people to analyze and communicate data with interactive systems.
Public
Edited
May 28, 2023
3 stars
table = arrow.tableFromIPC(FileAttachment("flights-1m.arrow").arrayBuffer())
{
// FALCON
const flightsArrow = new falconVis.ArrowDB(table);
const falcon = new falconVis.FalconVis(flightsArrow);
// 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 = 400; // I can afford to be approximate here to reduce memory
const distanceView = await falcon.view1D(
{
type: "continuous",
name: "Distance",
bins: 25,
resolution
},
(updatedCounts) =>
updateVegaliteChart(distanceChart, vegaliteDataFormat(updatedCounts))
);
const arrivalDelayView = await falcon.view1D(
{
type: "continuous",
name: "ArrDelay",
range: [-20, 140],
bins: 25,
resolution
},
(updatedCounts) =>
updateVegaliteChart(arrivalDelayChart, vegaliteDataFormat(updatedCounts))
);
const flightDateView = await falcon.view1D(
{
type: "continuous",
name: "FlightDate",
bins: 25,
time: true,
resolution
},
(updatedCounts) =>
updateVegaliteChart(flightDateChart, vegaliteDataFormat(updatedCounts))
);
// LINK'em!
await falcon.link();
// filter the data on user brush of charts
addBrushesToCharts(distanceChart, distanceView);
addBrushesToCharts(arrivalDelayChart, arrivalDelayView);
addBrushesToCharts(flightDateChart, flightDateView);
}
function addBrushesToCharts(chart, falconView) {
chart.addEventListener("mouseenter", async () => {
// prefetches the falcon data index
await falconView.activate();
});
chart.addSignalListener("brush", (...s) => {
const brush = s[1]["binStart"] ?? null;
if (brush !== null) {
falconView.select(brush);
} else {
falconView.select();
}
});
}
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.
