VisDock: A Toolkit for Cross-cutting Interactions in Visualization
Jungu "Joe" Choi, Yuet Ling Wong, Eli Fisher
University of Maryland, College Park, MD
Deok Gun Park, Niklas Elmqvist
Purdue University, W. Lafayette, IN
Given Visualization
VisDock
You can try
http://goo.gl/nzpJ0E
Motivation
Cross-cutting interactions for visualization
interaction techniques that are common to a range of visual representations, data and tasks
Tableau
For Developers
- Provides a guideline
For end-users
- Reduces learning effort
How?
- Identify common interactions
- Develop a toolkit
- Evaluate
1. Identifying common interactions
- Any dataset
- Any visualization
- Concrete
- Direct manipulation
Design Criteria
Graphics Software
Interactive Visualizations
Cross-cutting Interaction for
Visualization
Selection
Criteria
Cross-cutting Interactions for Visualization
- Selection
Cross-cutting Interactions for Visualization
- 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
- Selection
- Query Management
- Navigation
- Annotation
2. VisDock
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
Multiple canvas
Responsive UI
Minimal coding for Developers
Still you need to write event handler.
Familiar UI for Users
3. Evaluation
VisDock
Developer
End-User
Evaluation Goal
- Adoptability for Developers
- What are barriers?
- Usability for Users
- Can they use without learning?
Developer Evaluation
Identify barrier for adoption
Tasks
- Informal evaluation study with dozen programmers
Removing barriers for adoption
Initial meeting
Difficulty in event handler
- Simplified API
- Revised tutorial
Followup meeting
Improved adoption
User Evaluation
Usability
Tasks
- 11 paid volunteers
It looks like west coast people love blockbusters than ...
User Evaluation Results
Selection
Query
Management
Navigation
Annotation
6.5 comments per user
Conclusion
Contributions
- Identify cross-cutting interactions
- Derive cross-cutting interactions for visualization
- VisDock as an open-source toolkit
Questions?
http://visdockhub.github.io/NewVisDock/