polychrome: a cross-device framework for collaborative web visualization
TRANSCRIPT
1
PolyChromeA Cross-Device Framework for
Collaborative Web Visualization
Sriram Karthik Badam, Niklas Elmqvist
2
“The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.”… Mark Weiser
Ubiquitous Computing
3
Ubiquitous Computing
4
Ubiquitous Analytics
Massive heterogeneous data
Ubiquitous analytics: Interacting with big data anywhere, anytime (Elmqvist and Irani, 2013)
Interaction with data anywhere and anytime
Mobile Visualization
Visualizing information on mobile devices (Chittaro, 2006)A Mobile Visual Analytics Approach for Law Enforcement Situation Awareness (Razip et al., 2014)
5
6
Collaborative Visualization
Interactive Tree Comparison for co-located collaborative visualization (Isenberg and Carpendale, 2007)Hugin (Kim et al., 2010)Lark (Tobiasz et al., 2011)Collaborative Visualization (Isenberg et al., 2011)
“Collaborative visualization is the shared use of computer-supported, (interactive,) visual representations of data by more than one person with the common goal of contribution to joint information processing activities”
7
Emergency Situation
Heterogeneous Information sourcesMultiple analysts/ stakeholders Ensemble of devices
8
Interaction With Data
Let’s see how the spread of this fire is different from two years ago.
Sam, look at this!
Wait, Linda, let me
visualize the sensor data here!
Aha!! that’s why it
happened! Siri,
capture screenshot.
9
RequirementsSupporting Collaboration
Multiple and Networked Devices
Post-WIMP interactionWIMP – Windows, Icons, Menus, Pointers
Supporting Visualization
Collaboration over the Web
Cross-Device Interaction over the Web
Collaborative Web Visualization
10
PolyChrome
• Middleware Framework for developing web-based collaborative visualizations
• JavaScript and Node.js
• Three components
• Proxy server modules (Node.js)
• Interaction/operation sharing and view management
• Interaction recording, concurrency, and conflict management
11
Web Visualization Collaborative Visualization
Cross-Device Interaction
Related Work
ProtoVis: Bostock and Heer, 2009
D3: Bostock et al., 2011
Collaborative Visualization
Isenberg and Carpendale, 2007
Hugin (Kim et al., 2010)
Lark (Tobiasz et al., 2012)
GroupWeb: Greenberg and Roseman, 1996Instant Co-Browsing: Esenther, 2002Magpie: Domingue et al., 2004
Co-Browsing Cross-Device Interaction
WebSplitter: Han et al., 2000
Conductor: Hamilton and Widgor, 2014
Panelrama: Yang and Widgor, 2014
12
Design Choices: Operation Sharing
Implicit Explicit
Synchronite (Thum and Schwind, 2010) Branch-explore-merge (McGrath et al., 2012)
GroupWeb (Greenberg and Roseman, 1996)
PlugByPlay (Wiltse and Nichols, 2009)WebSplitter (Han et al., 2000)
CoLab (Hoyos-Rivera et al., 2005)
13
Design Choices: Operation Definition
Data-centric operationInteraction-centric operation
Represented as an action
Represented as a change in the data
driving the viewMouse, touch, and gestures
Mouse events in Synchronite(Thum and Schwind, 2010)
State changes, selection, and filtering
Dynamic screenshots in CoFox (Rodriguez Perez et
al., 2011)
State variables in Panelrama
(Yang and Widgor, 2014)
Instrument changes in Shared Substance(Gjerlufsen et al., 2011)
Event sharing in XICE windowing toolkit(Arthur and Olsen, 2011)
Tap, side, knuckle events in Duet(Chen et al., 2014)
14
PolyChrome API: Explicit Sharing
DOM Events: mousedown, mousemove, mouseup
element.click(function handler() {});
Capture
Recycle
PolyChromeEventHandler.wrapEvent(event);PolyChromeEventHandler.shareEvent();PolyChromeEventHandler.applyEvent();
Handle
makeSelection(event)
Share with a P2P connection1,2 to all devices
Share with a server using web sockets
Apply event
Handle event based on application logic
1http://peerjs.com/2http://w3c.github.io/webrtc-pc/
Traditional JS event handling routine
15
PolyChrome API: Implicit Sharing
DOM Events: mousedown, mousemove, mouseup
Capture
Recycle
Handle
Event captured and the underlying elements identified by PolyChrome browser modules
Event wrapped in a PolyChrome Event class and shared automatically
Event handled by the client logic
16
Design Choices: Display Configuration
Traffic trends across the world
?
?
17
Design Choices: Display Configuration
A B AB
A B
Stitching Replication
Nesting
Exploring the design space of composite visualization (Javed and Elmqvist, 2012)
18
PolyChrome API: Display Configuration
PolyChrome API: CSS Transforms
Unified Display Space
Surface 1 Surface 2 ….
Surface *
element.css({'-webkit-transform-origin': x y});
Offset
element.css({'-webkit-transform': scale(s, u)});
Scale factors
19
Other Design Requirements
Persistence
Interaction log/ replay
Many Eyes
Consistency/Conflict Management
Operation Transformation
20
Legacy Applications
Distributed Web browser
Proxy server to load existing webpages
Implicit sharing
Display Management
D3 is awesome!!!
21
Application Examples
Scatterplot Matrix Exploration
Geographical Map Exploration
Legacy Application
22
Scatterplot Matrix Exploration
Anderson’s Iris dataset
Brush-and-link interaction on tablets
Brushes overviewed on public space
D3 - visualization
HTML, JS, and CSS
23
Geographical Map Exploration
Capture visual events
PolyChrome CustomEvent
Synchronized views
Google Map
HTML, JS, and CSS
24
Limitations/ Future Work
• Implicit sharing expensive due to the need to find the DOM target captur
eRecyc
leHandl
e
• Display management currently limited to transformation
• Embedding operation transformation into the framework
• Developer evaluation and more tutorials
• Lack of underlying structure in the collaborative web visualizations
But many advantages,
• Works with existing SVG visualization frameworks: D3• Abstracts communication, operation management, and space
configuration • Easy to deploy!• Supports wide range of collaboration scenarios
25
Conclusion
PolyChrome Framework
Implicit Explicit
A BAB
Application Examples
26
Acknowledgment
S. Karthik [email protected]
Questions?
IIS-1253863
PolyChromehttps://github.com/karthikbadam/PolyChrome
VisDock framework developed by Jungu Choi available on Github