Falx: Visualization by Example

Falx makes visualization easy by synthesizing visualizations of the full dataset from small examples

The Challenge: Data Transformation

With modern visualization tools like Tableau, ggplot2 or Vega-Lite, we can create visualizations easily using mappings from data columns to visual properties, thanks to the design from the grammar of graphics [1].

We can create a line chart from the dataset (with three columns titled Date, New York, and San Francisco) by mapping the Date column to x-axis, and the New York column to y-axis.
A visualization shows temperature differences between New York and San Francisco temperature. It consists of a line chart that shows temperature of the two cities and a bar chart overlaid on top of the line chart that shows temperature differences between the two cities.
Temperature differences between New York and San Francisco from 2011–10–01 to 2012–10–01
In order to create the final visualization, we need to: mutate the input data to calculate the temperature differences map it to a floating bar chart, pivot the table and map it to a colored line chart, and combine the two layers together.

The Solution: Visualization by Example

Falx is a visualization-by-example tool to bypass these challenges. In Falx, we use a few data points from the dataset as an example to demonstrate how they should be mapped to the canvas, and Falx automatically generalizes the example to visualize the full dataset.

  1. create an example line segment that shows San Francisco temperatures on the first two days (the segment starts at x1=2011–10–01, y1=62.7, ends at x2=2011–10–05, y2=58.7, and it is colored as “San Francisco”);
  2. create an example bar to show temperature difference between the two cities on the first day (the bar is at x=2011–10–01, starts and ends at y1=62.7, y2=63.4, and it is colored with the difference 0.7);
Visualization by example in action using Falx web editor (https://falx.cs.washington.edu).

The Technique: Program Synthesis

Falx is powered by a technique called program synthesis: starting from the user example, Falx will search for programs defined by the data transformation language (R tidyverse) and the visualization language (Vega-Lite) that satisfies the user example (i.e., the visualization outputted from the program should contain all elements from the user example).

  1. decompile the visualization provided by the user into a visualization program and an intermediate data (the small data behind the example);
  2. search for data transformation programs: these programs are essentially tidyverse scripts that can transform the input to match the intermediate data generated in step 1;
  3. generate final scripts by combining data transformation and visualization programs and render the visualizations for user exploration.
The architecture of the Falx system. Each solver thread synthesizes visualizations that match user examples in three steps: (1) visualization decompilation, (2) data transformation synthesis, and (3) program generation.
The architecture of the Falx system. Each solver thread synthesizes visualizations that match user examples in three steps: (1) visualization decompilation, (2) data transformation synthesis, and (3) program generation.

Summary & Future of Falx

Falx is a visualization-by-example tool that can synthesize data visualization from examples. Since Falx bypasses the data transformation and the visualization scripting challenges, non-experienced users can use Falx to create expressive visualizations that they cannot easily create otherwise. We hope Falx provides one exemplar for how to adapt core techniques in synthesis into powerful interactive tools that empower human creativity.

Further Reading

To learn more about Falx, you can refer to the following research papers:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store