Pleiades: Interactive Composing Tools for Vega-Lite Charts

Team Members: Chanwut Kittivorawong, Manesh Jhawar, Sorawee Porncharoenwase

Pleiades is a tool that helps Vega-Lite users with less experience in JSON to easily compose complicated multiple Vega-Lite views. For example, concat view can contains repeat view that also contains concat of layer views; composing this visualization using JSON can be verbose and hard to visualize since it requires multiple levels of nested view-compositions. Pleiades is a graphical composing tool for Vega-Lite views. Users can easily compose views using concat, layer, repeat, and facet. It also provides suggestions to users to prevent them from composing not-fully-compatible views. In the end, the users can export the composed view into Vega-Lite JSON specification, to render normally with Vega-Lite compiler.
Link to paper and poster

Abstract

Vega-Lite is a high-level grammar which is easy to understand. Naturally, the user base of Vega-Lite ranges from beginners to experts in the field of visualization. Although users with less JSON experience have no trouble working with most of the features of Vega-lite, composing different views together has a sharp learning curve. View composition requires a good understanding of tree structure since different views can be nested inside each other to create more complex views.

Pleiades provides a graphical user interface for users to compose Vega-Lite charts. The users can add charts that they want to work with the software, then use them to compose complex views. The operations they can perform are layer, concat, repeat, and facet. Using these four techniques, the users can keep on composing and constructing complex visualizations. Pleiades provides the users with warnings and restrictions when composing charts that would be incompatible. We provide this level of abstraction to help users focus more on the visualization and less about the nitty-gritty details of Vega-lite.

Running Instructions

  1. To add Vega-Lite spec to the application to work with, you can click 'NEW SPEC'. Then, type or paste Vega-Lite spec into the editor. Or, you can click examples to try adding example Vega-Lite specs. You can also set alias to each spec in the upper-left text box. Then, click 'SAVE'.
  2. To add the first Vege-Lite spec to the main view, you can click the spec; then click 'PLACE' in the operation bar (bar on the top).
  3. To layer views, click a view in the main view, and a view in the side bar. Then, click 'LAYER'. A menu will shows up, and you can choose whether you want the view in the side bar to be layered under or over the view in the main view.
  4. To concat views, click a view in the main view, and a view in the side bar. Then, click 'CONCAT'. A menu will shows up, and you can choose the direction you want the view in the side bar to be concatinated to the view in the main view.
  5. To repeat a view, click a view in the main view. Then, click 'REPEAT'. A window will pops up, and you can choose to repeat row or column by checking and filling array of field names and their encoding channels. Then click 'Repeat'.
  6. To facet a view, click a view in the main view. Then, click 'FACET'. A window will pops up, and you can choose to facet row or column by checking and filling their field names and types. Then click 'Facet'.
  7. To edit each spec in the main view, click the view you would like to edit, then click 'EDIT'.
  8. You can select inner view of Repeat and Facet by enabling 'Inner View Navigator'. When click at a view in the main view, the inner view of the selected view is displayed in the Inner View Navigation.
  9. You can always undo and redo every interaction by clicking 'UNDO' and 'REDO' buttons.
  10. When finished composing views, you can click 'EXPORT' to download the resulting Vega-Lite spec.

Application

The application is at ./app.html

Screenshot of the application

screenshot
CSE 512 Data Visualization University of Washington