PolyChrome: A Cross-Device Framework for Collaborative Web Visualization
-
Upload
niklas-elmqvist -
Category
Technology
-
view
89 -
download
4
Transcript of PolyChrome: A Cross-Device Framework for Collaborative Web Visualization
![Page 1: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/1.jpg)
1
PolyChromeA Cross-Device Framework for
Collaborative Web Visualization
Sriram Karthik Badam, Niklas Elmqvist
![Page 2: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/2.jpg)
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
![Page 3: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/3.jpg)
3
Ubiquitous Computing
![Page 4: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/4.jpg)
4
Ubiquitous Analytics
Massive heterogeneous data
Ubiquitous analytics: Interacting with big data anywhere, anytime (Elmqvist and Irani, 2013)
Interaction with data anywhere and anytime
![Page 5: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/5.jpg)
Mobile Visualization
Visualizing information on mobile devices (Chittaro, 2006)A Mobile Visual Analytics Approach for Law Enforcement Situation Awareness (Razip et al., 2014)
5
![Page 6: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/6.jpg)
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”
![Page 7: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/7.jpg)
7
Emergency Situation
Heterogeneous Information sourcesMultiple analysts/ stakeholders Ensemble of devices
![Page 8: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/8.jpg)
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.
![Page 9: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/9.jpg)
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
![Page 10: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/10.jpg)
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
![Page 11: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/11.jpg)
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
![Page 12: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/12.jpg)
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)
![Page 13: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/13.jpg)
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)
![Page 14: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/14.jpg)
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
![Page 15: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/15.jpg)
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
![Page 16: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/16.jpg)
16
Design Choices: Display Configuration
Traffic trends across the world
?
?
![Page 17: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/17.jpg)
17
Design Choices: Display Configuration
A B AB
A B
Stitching Replication
Nesting
Exploring the design space of composite visualization (Javed and Elmqvist, 2012)
![Page 18: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/18.jpg)
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
![Page 19: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/19.jpg)
19
Other Design Requirements
Persistence
Interaction log/ replay
Many Eyes
Consistency/Conflict Management
Operation Transformation
![Page 20: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/20.jpg)
20
Legacy Applications
Distributed Web browser
Proxy server to load existing webpages
Implicit sharing
Display Management
D3 is awesome!!!
![Page 21: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/21.jpg)
21
Application Examples
Scatterplot Matrix Exploration
Geographical Map Exploration
Legacy Application
![Page 22: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/22.jpg)
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
![Page 23: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/23.jpg)
23
Geographical Map Exploration
Capture visual events
PolyChrome CustomEvent
Synchronized views
Google Map
HTML, JS, and CSS
![Page 24: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/24.jpg)
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
![Page 25: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/25.jpg)
25
Conclusion
PolyChrome Framework
Implicit Explicit
A BAB
Application Examples
![Page 26: PolyChrome: A Cross-Device Framework for Collaborative Web Visualization](https://reader037.fdocuments.us/reader037/viewer/2022103020/55cf1432bb61eb6e5c8b4659/html5/thumbnails/26.jpg)
26
Acknowledgment
S. Karthik [email protected]
Questions?
IIS-1253863
PolyChromehttps://github.com/karthikbadam/PolyChrome
VisDock framework developed by Jungu Choi available on Github