Visualizing Vega's Scenegraph and User Interaction

Vega is a declarative visualization language that enables rapid iteration while allowing designers to focus on visual encoding instead of low-level implementation details. However, the separation of specification from execution inhibits debugging effectiveness due to obfuscation of the underlying code. Visualizing Vega's scenegraph enables rapid exploration of the visualization structure and underlying data. As end-users interact with the visualization, the scenegraph updates dynamically to show changes in the underlying data. Inspection of the visualization enables users to identify related elements in the scenegraph. Visually surfacing system internals enhances user understanding and facilitates the identification of errors that would otherwise require complex debugging cycles.

Software

You can try Vega and the scenegraph visualization online here.

The scenegraph is a tree representation of the final visualization where nodes in the tree represent different components of the output visualization. The tree is dynamically updated as users interact with the visualization. The following is a list of features in the scenegraph representation.

General Features

Data on Demand

The user can right-click nodes in the scenegraph to print the corresponding data to the console.

Collapse/Expand

Selecting nodes in the scenegraph collapses or expands them. Collapsed nodes are represented with a black border. The size of collapsed nodes is indicative of the number of hidden descendants of that node.

The control buttons in the "Scenegraph" bar allow the user to rapidly expand or collapse nodes. "Show All" expands all nodes to show all nodes in the tree. "Auto Collapse" collapses nodes for which the number of children exceeds some threashold.

Modify Scenegraph

"Remove Axis" and "Remove Legend" removes nodes corresponding to these components from the scenegraph visualization. These nodes are not removed from the visualization, but are simply hidden from the user's view of the scenegraph. The user can select these buttons again to restore the nodes.

Interaction Mode

While in the "Interaction" mode, the user can complete end- user interactions for the Vega visualization. As the user interacts with the visualization, the scenegraph is grayed out. Once the user stops interacting, the scenegraph is updated to show how the final state has changed from the initial state of the visualization.

The color of the node (as shown in the legend) is representative of the percentage of hidden descendant nodes that have changed in some way. The stroke color of the node denotes the update status of that node (either modified, added, or removed.

Inspection Mode

The user can select the "Inspect" button to change from the interact mode to instead inspect elements of the visualization. In this mode, end-user interaction is disabled. Instead, when the user clicks the visualization, all nodes containing the point are highlighted in the scenegraph in pink.

Materials