Vega and D3 - smclements/vega GitHub Wiki

A number of great tools for web-based visualization already exist. Principal among them is D3 (Data-Driven Documents), by Mike Bostock and collaborators at the Stanford Visualization Group (now the University of Washington Interactive Data Lab).

So why create Vega?

To get right to the point: Vega is NOT intended as a "replacement" for D3. D3 is intentionally a low-level system. During the early design of D3, we even referred to it as a "visualization kernel" rather than a "toolkit" or "framework". In addition to custom design, D3 is intended as a supporting layer for higher-level visualization tools. Vega is one such tool, and leverages D3 heavily within its implementation.

Vega provides a higher-level visualization specification language on top of D3. By design, D3 will maintain an "expressivity advantage" and in many cases will be better suited for novel, highly interactive graphics. On the other hand, we hope that Vega will be convenient for a wide range of common yet customizable visualizations. Vega's design builds on concepts we developed in both Protovis and D3, and is informed by years of research at Stanford and UW, and our experiences building data-driven applications at Trifacta.

We had a number of motivations for creating Vega:

• Support fast and customizable design. Following in the footsteps of Protovis, Vega provides a convenient language of graphical marks for creating custom graphics. These marks support a wide variety of chart types, without the artificial restrictions of monolithic chart widgets. Vega also provides an integrated workflow model of data transformations that supports custom processing and advanced layout algorithms.

• Make visualizations more reusable and shareable. Each Vega specification defines a reusable and shareable chart component. Input data can also be included within a specification, resulting in stand-alone definitions. In essence, Vega provides a file-format for saving and sharing visualization designs.

• Enable programmatic generation of visualizations. Once the learning curve has been climbed, manually writing D3 code is often both fun and efficient. However, D3 is not always the most convenient form for automatically generating visualizations. One goal of Vega is to provide a "target language" in which computer programs can dynamically generate visualizations. A program can construct a Vega specification (which is simply a JSON object) and then pass it off to the Vega runtime to visualize data.

• Improve performance and platform flexibility. D3 maintains a tight binding between data objects and Document Object Model (DOM) elements. This design decision carries a number of advantages, including use of CSS for styling, transparency, and ease of debugging. However, the core of D3 is limited to DOM-based displays. In contrast, Vega provides an abstraction layer for both rendering and event processing, which in turn provides flexibility. By using an internal scenegraph (rather than the DOM), Vega can render visualizations using either HTML5 Canvas or SVG. Canvas can provide improved rendering performance and scalability: often 2-10x faster than SVG for full-component redraws (though such comparisons require nuance). SVG, on the other hand, can be used for infinitely zoomable, print-worthy vector graphics. Going forward, Vega can be extended to other rendering systems, such as WebGL.

As is always the case, the right tool for the job depends on the task at hand. For novel visual designs or sophisticated interactive pieces, we expect D3 will continue to be the tool of choice. For common yet customizable chart types, programmatic generation, and flexible rendering, we believe Vega can further facilitate the use of data visualization across a variety of web applications.