Vega Test Gallery

Interaction Techniques

Interactive cross-filtering of airline arrival delay, departure time and travel distance data for 200,000 flights. Uses the Vega crossfilter transform to perform efficient incremental updates. Click and drag to move or resize a brush, double-click to maximize, or use the scroll wheel to zoom the brush size. Based on the Crossfilter.js example by Mike Bostock.

An overview plus detail interaction: click and drag in the overview to zoom the larger detail view. Based on a D3 example by Mike Bostock.

Brushing and linking is an interaction technique that highlights points based on linked selections across multiple views. This can be particularly useful for exploring relationships in multi-dimensional data. This example uses an interactive scatter plot matrix of Iris flower measurements, in an homage to the original Brushing Scatterplots paper by Becker and Cleveland. Click and drag on the visualization to make a linked selection.

Interactive scatter plot that can be panned and zoomed. Click and drag to pan, use the scroll wheel to zoom. Scatter plot points also adjust their size in response to the zoom level.

Interactive timelines for global health and economic development data: grab a point to drag it through time. Based on the DimpVis technique by Brittany Kondo and Christopher Collins, University of Ontario Institute of Technology (2014).

A scatter plot with interactive guides. Shift-click legend entries to select subsets of the data, or drag along the x-axis to create a 1D brush. Click the chart background to clear all selections.

This example enables interactive exploration of investment returns based on the time of purchase. As the mouse position changes, the chart updates to show the resulting proportional returns for a set of technology stocks had one invested at that time.

Estimation of π by randomly sampling points and counting how many of them fall inside or outside a unit circle. Based on the Observable notebook by Cameron Yick.

Source

click to see code