falcon-vis

FalconVis

🚧 Work in Progress

npm install falcon-vis

A simple javascript API to link visualizations at scale. FalconVis is a successor to vega/falcon.

Finally, you can cross-filter all the data you've been hoarding without the large delays or slowdowns. Interactions are smooth, fast, and responsive.

Live Browser Examples

• TODO: add json 10k
• TODO: add arrow 1million
• TODO: add duckdb-wasm 5 million
• [30 Million Flights | DuckDB Python]

Example

Check out real examples in the examples/ directory. If you want a quick sneak-peak, keep reading.

TODO make this section more clear.

Initialization

Create a the falcon instance and link it up to some data and some views.

import { FalconVis, JsonDB } from "falcon-vis";

/**
 * 1. create the falcon instance with a database
 */
const plainOldJavascriptObject = await fetch("flights-10k.json").then((d) =>
	d.json()
);
const db = new JsonDB(plainOldJavascriptObject);
falcon = new FalconVis(db);

/**
 * 2. create the views (you interact with these directly to cross-filter)
 */
// 0D is total count (num rows)
const countView = await falcon.view0D();
countView.onChange((updatedTotalCount) => {
	// called every time the count changes
	console.log(updatedTotalCount); // you can do whatever in here
});

// 1D is a histogram
const distanceView = await falcon.view1D({
	type: "continuous",
	name: "Distance",
	resolution: 400,
	bins: 5,
});
distanceView.onChange((updatedHistogram) => {
	console.log(updatedHistogram);
});

/**
 * 3. initialize falcon by linking everything together
 */
await falcon.link();

Cross-filtering

The view you that you want to filter is the active view. Once you do filter an active view, the onChange callbacks will be called with the updated counts for all the other linked views.

/**
 * 1. make the view you are interacting with active
 *    this computes the fast falcon index in the background
 */
await distanceView.activate();

/**
 * 2. select/filter a range between 0 and 100
 */
await distanceView.select([0, 100]);

API Reference

TODO fill in and add examples

Core

# index.view0D()

# index.view1D()

# index.link()

# index.entries()

# view.activate()

# view.select()

# view.onChange()

Databases

# JsonDB
# ArrowDB
# DuckDB
# HttpDB

Development

Check out the CONTRIBUTING.md document to see how to run the development server.