Fork me on GitHub

If you have a moment, help us out by taking the Superconductor design survey!

Superconductor is a framework for creating interactive big data visualizations in the web browser. It contains two components: a JavaScript library for running visualizations in your browser, and a compiler which generates the high-performance visualization code from our simple domain specific language for describing visualizations.

Superconductor was created by Leo Meyerovich and Matthew Torok at the University of California, Berkeley's Parallel Computing Laboratory. The ideas behind it evolved out of our research in the parallel browser project. Over the last two years, we've worked to apply the ideas behind that research to the task of big data visualization, and to create a polished, easy-to-use framework based around that work. Superconductor is the result.

Parallel Web Programming for Massive Visualizations

Superconductor is a collection of compilers for scripting large, interactive visualizations.

By supporting data sets of hundreds of thousands of data points, Superconductor enables new classes of interactive visualizations that were previously out of reach.

Three key ideas

  1. Domain specific languages (DSLs)

    Programs are written in a high-level domain specific languages (DSLs) — and mostly standard web ones at that. Superconductor supports the core visualization pipeline: data loading, styling, layout, rendering, and interaction.

    Superconductor supports the web languages widely known today:

    • JSON for data
    • CSS selectors for styling
    • JavaScript for interaction

    It also introduces our own FTL domain specific language for building custom layouts:

    • FTL is a declarative language ("attribute grammar")
    • We've used it for 2D and 3D graphics, charting, hierarchical data, and interactive animations
    • A layout is a tree schema with local constraints between node attributes

    An example of FTL code:

    class HBox : Node { 
      children { left: Node; right : Node }
    	  actions {
    		width := left.width + right.width
    		@render paintRect(x, y, width, height, red)
    class VBox : Node { ... }

    This snippet demonstration one constraint we place on the FTL language to allow our compiler to parallelize it: attributes must be solvable as a sequences of parallel tree traversals. How these tree traversals are done is automatically determined by the compiler, as long as this constraint holds true.

  2. Automatic Parallelism

    Aggressive compilers employ program synthesis and modern parallel algorithms. Superconductor's DSL compilers are aggressive, yet are hidden from typical programming interactions. Superconductor provides compilers for each of its high-level DSLs. It automatically finds and exploits parallelism.

    • It uses the GPU for the basic animation/interaction loop, except for data loading (parsing), which is multicore
    • It optimizes data representation and scheduling, but largely hides this from the programming API
    • It uses modern data parallel compilation techniques when viable
    • It uses new techniques in program synthesis to find parallelism in the layout language
  3. Parallel JavaScript

    Portability and scriptability is through exploiting modern web standards from multicore and GPU processing. Superconductor automates use of: web workers (multicore), WebCL (GPU), and WebGL (GPU). For portability and scriptability, Superconductor uses parallel JavaScript:

    • multicore (web workers) and GPU (WebCL, and WebGL)
    • programming is in our DSLs; Superconductor generates the parallel JavaScript code
    • visualizations live in standard webpages, meaning they interact normally with the surrounding page through standard JavaScript
    • we are working on supporting multiple backends, but the focus is on enabling new types of experiences on modern clients