VisDock: A Toolkit for Cross-cutting Interactions in Visualization

Jungu Choi, Yuet Ling Wong, Eli Fisher

University of Maryland, College Park, MD 

Deok Gun Park, Niklas Elmqvist

Purdue University, W. Lafayette, IN 

Motivation

Cross-cutting interactions for visualization

interaction techniques that are common to a range of visual representations, data and tasks

For Developers

  • Provides a guideline
  • Reduces coding effort

For end-users

  • Reduces learning effort

How?

  1. Identify common interactions 
  2. Design interface
  3. Develop a toolkit
  4. Evaluate

1. Identifying common interactions

Interactive Visualizations

Graphics Software

Cross-cutting Interaction for

Visualization

Cross-cutting Interactions for Visualization

  1. Selection

Cross-cutting Interactions for Visualization

  1. Selection

2.  Query Management

Cross-cutting Interactions for Visualization

1.  Selection

2.  Query Management

3.  Navigation

Cross-cutting Interactions for Visualization

1.  Selection

2.  Query Management

3.  Navigation

4.  Annotation

Cross-cutting Interactions for Visualization

  1. Selection
  2. Query Management
  3. Navigation
  4. Annotation

2. Design of Interactions

Design space

  • Any dataset
  • Any visualization
  • Concrete
  • Direct manipulation

3. VisDock

Visualization built by Derek Watkins

http://bl.ock.org/dwtkns

Joe, make earth center to the visualization

Joe, please add a animation visualization example

VisDock

a mix-in JavaScript library

  • to import cross-cutting interactions in any SVG-oriented visualizations
  • to connect the interactive events to user-defined functions

Responsive Javascript

Minimal coding for Developers

Still you need to write event handler. 

Familiar boring UI for Users

4. Evaluation

VisDock-enabled

Visualization

Developer

End-User

VisDock Evaluation I

  • Informal evaluation study with dozen programmers

Evaluation I Results

  • VisDock successfully imported
  • VisDock Event Handler partial implementation

VisDock Evaluation II

  • 11 paid volunteers to use VisDock-integrated MovieViz visualization.

VisDock Evaluation II

  • What is MovieViz?
    • Complex visualization with ~ 1000 multi-variate movie and movie-goers' data

Evaluation II Results

  • Most participants (9 out of 10) successfully accomplished all objectives.
  • All participants queried data using selection tools
  • About 6.5 insightful comments per participant

Conclusion

Contributions

  • Concept of cross-cutting interactions
  • Design of Cross-cutting interactions for Visualization
  • Visdock as an open-source toolkit
Made with Slides.com