explates: spatializing interactive analysis to scaffold visual exploration

›› ExPlates ›› PivotLab ›› PurdueUniversity

›› ExPlatesSpatializing Interactive Analysis to

Scaffold Visual ExplorationWaqas Javed

Niklas ElmqvistPurdue UniversityWest Lafayette, IN, USA

» E

uro

Vis

20

13

» Ju

ne 1

7-2

1 »

Le

ipZ

ig,

Germ

an

y

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

Life is a journey, not a destination.

›› ExPlates ›› PivotLab ›› PurdueUniversity

››“Life is a journey, not a destination.”

― Ralph Waldo Emerson (1803-1882)

Visual

Exploratio

n

›› ExPlates ›› PivotLab ›› PurdueUniversity

››visual exploration [ˈvɪʒʊəl -zjʊ- ˌɛkspləˈreɪʃən],

n.using visualization to analyze data, often without

prior knowledge or questions about the data

›› ExPlates ›› PivotLab ›› PurdueUniversity

›› GOAL

» Support visual exploration by spatializing the interaction

» Time → Space

» Externalizes not just the data,but also the exploration process

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

PREVIEW

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

Why is this important?Why is this difficult?

›› ExPlates ›› PivotLab ›› PurdueUniversity

››» Perception: many views

yield high visual clutter

» Memory: rememberingpast choices and results

» Reasoning: synthesizing multipledisparate findings is difficult

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

DUPLICATE ― NOT UPDATE!

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

10

Exploration Plates (ExPlates)

» Data-flow method for visualization that automatically spatializes interaction

Spatialize…

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

11

Plate Anatomy» Building block: exploration plate– Visualization state: data, mapping, view– Input and output ports (anchors)– Connected by wires

» Mutating ops create new plate(s)– Filtering, change visualization,

transforms

» Invariant ops update current plate– Color scale, viewport, formatting

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

12

Plate Types» Visualization plates: visual

representations of input data» Data plates: data transformations

from input to output» Annotation plates: add annotation

to specific locations on the canvas

›› ExPlates ›› PivotLab ›› PurdueUniversity

››Output anchors

Input anchors

Control area

Visualization area

Datawires

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

14

Canvas and Layout» Infinitely zoomable visual canvas–Mouse control + automatic operations

» Grid-based semi-automatic layout– Padding for data wires

» Two ways to create new plates–Manual (menu) or automatic

(spatializing)

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

DEMO

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

IMPLEMENTATION

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

17

Implementation» Web-based system (JavaScript +

SVG)» Google Data Source API– Google Docs (spreadsheets)– RSS/Atom feeds– XML files– CSV files

» Rendering: RaphaëlJS (raphaeljs.com)– Extensible with other SVG toolkits (D3,

etc)

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

DISCUSSION

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

20

Discussion and Limitations

» Scalability: complex exploration + size– Zooming and panning navigation–Web-based setting gives upper bound

» Expertise: web-based but not intended for novice-level users

» Comparison: relation to MDV tools– Data-flow (DataMeadow, GraphTrail)– Dashboard/workbench (Tableau,

Spotfire)

›› ExPlates ›› PivotLab ›› PurdueUniversity

››

CONCLUSION

›› ExPlates ›› PivotLab ›› PurdueUniversity

››» Spatializing

exploration– Branching visual history– Duplicate, do not update

» Data flow system– Automatic layout

» Multidimensional data– Visualization + analysis

» Web-based prototype– Live, dynamic updates

›› ExPlates ›› PivotLab ›› PurdueUniversity

››Questions?

Niklas ElmqvistPurdue University

West Lafayette, IN, USAelm@purdue.edu

» E

uro

Vis

20

13

» Ju

ne 1

7-2

1 »

Le

ipZ

ig,

Germ

an

y

All images are Creative Commons from Flickr.com