Successfully reported this slideshow.
Your SlideShare is downloading. ×

PolyChrome: A Cross-Device Framework for Collaborative Web Visualization

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 26 Ad

More Related Content

Slideshows for you (20)

Similar to PolyChrome: A Cross-Device Framework for Collaborative Web Visualization (20)

Advertisement

More from Niklas Elmqvist (20)

Recently uploaded (20)

Advertisement

PolyChrome: A Cross-Device Framework for Collaborative Web Visualization

  1. 1. PolyChrome A Cross-Device Framework for Collaborative Web Visualization Sriram Karthik Badam, Niklas Elmqvist sbadam@umd.edu 1
  2. 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 2
  3. 3. Ubiquitous Computing 3
  4. 4. Ubiquitous Analytics Massive heterogeneous data Ubiquitous analytics: Interacting with big data anywhere, anytime (Elmqvist and Irani, 2013) Interaction with data anywhere and anytime 4
  5. 5. 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. 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” 6
  7. 7. Emergency Situation Heterogeneous Information sources Multiple analysts/ stakeholders Ensemble of devices 7
  8. 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. 8
  9. 9. Requirements Supporting CollaborationMultiple and Networked Devices Post-WIMP interaction WIMP – Windows, Icons, Menus, Pointers Supporting Visualization Collaboration over the Web Cross-Device Interaction over the Web Collaborative Web Visualization 9
  10. 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 10
  11. 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, 1996 Instant Co-Browsing: Esenther, 2002 Magpie: Domingue et al., 2004 Co-Browsing Cross-Device Interaction WebSplitter: Han et al., 2000 Conductor: Hamilton and Widgor, 2014 Panelrama: Yang and Widgor, 2014 11
  12. 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) 12
  13. 13. Design Choices: Operation Definition Data-centric operationInteraction-centric operation Represented as an action Represented as a change in the data driving the view Mouse, 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) 13
  14. 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 14
  15. 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 15
  16. 16. Design Choices: Display Configuration Traffic trends across the world ? ? 16
  17. 17. Design Choices: Display Configuration A B A B A B Stitching Replication Nesting Exploring the design space of composite visualization (Javed and Elmqvist, 2012) 17
  18. 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 18
  19. 19. Other Design Requirements Persistence Interaction log/ replay Many Eyes Consistency/Conflict Management Operation Transformation 19
  20. 20. Legacy Applications Distributed Web browser Proxy server to load existing webpages Implicit sharing Display Management D3 is awesome!!! 20
  21. 21. Application Examples Scatterplot Matrix Exploration Geographical Map Exploration Legacy Application 21
  22. 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 22
  23. 23. Geographical Map Exploration Capture visual events PolyChrome CustomEvent Synchronized views Google Map HTML, JS, and CSS 23
  24. 24. Limitations/ Future Work • Implicit sharing expensive due to the need to find the DOM target capture Recycle Handle • 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 24
  25. 25. Conclusion PolyChrome Framework Implicit Explicit A B AB Application Examples 25
  26. 26. Acknowledgment S. Karthik Badam sbadam@umd.edu Questions? IIS-1253863 PolyChrome https://github.com/karthikbadam/PolyChrome VisDock framework developed by Jungu Choi available on Github 26

Editor's Notes

  • Why not use web as the medium for ubiquity!?

×