Connecting Chrome
VisConnect is a web-based distributed collaborative visualization system.
VisConnect is a new distributed collaborative visualization system that can be integrated into existing visualization implementations with little to no changes to the original source code. With its collaborative drag, brush, and lasso interactions, it simplifies development and provides flexibility and robustness, thus lowering barriers to developing remote collaborative visualization. The VisConnect system is described in a recent IEEE paper presented by Schwab et al.
In general, people’s shared use of visual representations of data has broad applications across domains. Yet, the problem of supporting collaborative visualization for people working from home or people spread across geographic areas is a grand challenge for data visualization. Synchronous distributed collaborative solutions are technically complex. Visualization creators often implement customized network protocols and algorithms entwined with the visualization code, reducing generalizability and readability and yielding ‘one-off’ solutions.
VisConnect offers a more elegant solution. It replicates browser events across collaborators to produce synchronized visualizations. It supports simultaneous interaction with a lock system that gives each collaborator control over specific web elements. It includes a script tag and minimal code changes to web-based visualizations. Users then share a URL to the visualization that will connect their browsers in communication. To successfully work, the system prioritizes resolving conflicts to ensure that users stay synchronized when collaborators attempt to make different modifications to the same object.
VisConnect includes functions for collaborative drag, brush, and lasso interactions. It considers strategies like “divide and conquer” and “all together” to extend other interactions for collective use.
The VisConnect system is a peer-to-peer distributed system that synchronizes pointer events. This is challenging to achieve, as different collaborators can try to simultaneously execute conflicting modifications to the data and the view. The system addresses this with explicit client leadership, DOM partitioning, and an interaction lock service. VisConnect is implemented for web-based SVG visualizations. The implementation works across mobile and desktop computers, is open source, and is written in TypeScript using Peer.js. This approach allows it to be easily added to many existing visualizations with only a few lines of code. To help in this endeavor, VisConnect also includes a customizable set of JavaScript events that are synchronized across clients.
To use VisConnect, a developer must add a script tag to the HTML page of a visualization. This must come before the JavaScript code that creates the visualization so that VisConnect can capture events before they reach the visualization. After adding the library, collaboration can begin. A click on the VisConnect UI, shown above, lets users share a link with their collaborators. Once they click the link, they join the collaboration session, and events are synchronized among collaborators.
The VisConnect authors collaborated with doctors to create a collaborative diabetes visualization. Conventionally, doctor-patient communication is a one-way street as clinicians drive the conversations. Interactions like these are even more challenging in a telemedicine situation.
With VisConnect, on the other hand, patients can not only follow the clinicians but also redirect the conversation by interacting on their own screens. This type of interaction is displayed above. From the overview, the doctor and the patient can select a day of interest to explain the change in blood glucose levels during a particular day. They both can hover over specific elements of the graph to examine details on demand.
In remote collaborative work, two collaborators might want to jointly learn about the U.S. economy from Wikipedia and point out interesting facts from the text and the included graphs. VisConnect uses a Google Chrome extension, “Live Website Annotate” (LWA), which enables multiple users to simultaneously annotate existing online visualizations and websites.
The extension adds two stacked SVG elements to a website to enable annotation. The first SVG is used for the user interface that includes drawing options. The second SVG is used as the canvas for drawing annotations. Some other code changes are included to add a user interface (see above).
VisConnect can also facilitate e-learning and visualization education by creating an interactive online exercise to help students learn how to characterize network graphs. The online activity, Planarity Party, asks group members to collaboratively solve a puzzle. Each group selected one member to be the leader who initiated the collaborative game. Once connected, each group started the game by dragging nodes until they found a representation of the graph without edge crossings, solved the puzzle, and moved to the next new “level.” At the end of the game, each group could take a screenshot of the final level to see how far they got within 15 minutes. Overall, most students found the activity enjoyable and stated that it had helped them understand concepts in visualization. The proof of concept shows that VisConnect in e-learning can help students engage with the class material and encourage learners to interact with each other’s ideas.
With its simplicity, the VisConnect system is an excellent introduction to what distributed collaborative visualization should look like. It makes progress in exploring the design space of distributed collaborative interaction techniques and it helps lower barriers to using remote collaborative visualization.
References
- Michail Schwab, David Saffo, Yixuan Zhang, Sash Sinha, Cristina Nita-Rotaru, James Tompkin, Cody Dunne, Michelle Borkin. (2021). VisConnect:Distributed Event Synchronization for Collaborative Visualization. IEEE Transactions on Visualization and Computer Graphics. PP. 10.1109/TVCG.2020.3030366. (PDF)
