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 

Cross-cutting Interactions

  • Spatial Selection
  • Navigation
  • Layer Management
  • Annotation
  • Others

Interactive Visualizations

What is VisDock?

VisDock is a mix-in JavaScript library

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

Design Space

  • Any SVG-oriented Visualizations
  • Any data-set
  • Concreteness
  • Direct maniuplation

Take a visualization

Visualization built by Derek Watkins

http://bl.ock.org/dwtkns

Importing VisDock Tools

Visualization built by Derek Watkins

http://bl.ock.org/dwtkns

Importing VisDock Tools

Visualization built by Derek Watkins

http://bl.ock.org/dwtkns

  • Button-based tools
    • Selection
    • Navigation
    • Annotation
  •  Query Manager
    • Set operations
    • Query results
  • Miniature View

VisDock Event Handler

Allows the coder to connect the interactions to user-defined functions/events.

Event 1

Event 2

Event 3

Selection

Navigation

Query

Results

VisDock Event Handler

var visdock.eventHandler = {

  // Find intersected items given a shape
  getHits: function(points, inc) { return []; },

  // Mark the selection with a color
  setColor: function(items, queryId) {},

  // Remove a selection
  removeColor: function(queryId) {},

  // Modify an existing selection color/opacity
  changeColor: function(style, queryId) {},
  changeVisibility: function(style, queryId) {},

  // Called when Pan/Zoom/Rotate events occur
  viewChanged: function(view) {}
}

Minimal Coding Effort

Enhancing interactivity

  • Adding interactivity to already interactive visualization
// Updating selection layers
VisDock.updateLayers();
  • Supporting dynamically changing visualization
    • Animated Transitions
    • Semantic Zooming
    • Annotated by data-space
// Annotated by dataspace declaration
AnnotatedByData.layerTypes = ['.layers'];

// Updating the annotations
AnnotatedByData.update();

Responsive Javascript

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

Conclusions & future works

  • VisDock's scientific contributions:
    • various cross-cutting tools
    • minimal coding effort
    • user-defined event handler
  • More data-driven interactions
  • More interactive functions for multiple canvas visualizations.
Made with Slides.com