ABSTRACT
The dominant markup language for Web visualizations-Scalable Vector Graphics (SVG)-is comparatively easy to learn, and is open, accessible, customizable via CSS, and searchable via the DOM, with easy interaction handling and debugging. Because these attributes allow visualization creators to focus on design on implementation details, tools built on top of SVG, such as D3.js, are essential to the visualization community. However, slow SVG rendering can limit designs by effectively capping the number of on-screen data points, and this can force visualization creators to switch to Canvas or WebGL. These are less flexible (e.g., no search or styling via CSS), and harder to learn. We introduce Scalable Scalable Vector Graphics (SSVG) to reduce these limitations and allow complex and smooth visualizations to be created with SVG. SSVG automatically translates interactive SVG visualizations into a dynamic virtual DOM (VDOM) to bypass the browser's slow 'to specification' rendering by intercepting JavaScript function calls. De-coupling the SVG visualization specification from SVG rendering, and obtaining a dynamic VDOM, creates flexibility and opportunity for visualization system research. SSVG uses this flexibility to free up the main thread for more interactivity and renders the visualization with Canvas or WebGL on a web worker. Together, these concepts create a drop-in JavaScript library which can improve rendering performance by 3-9× with only one line of code added. To demonstrate applicability, we describe the use of SSVG on multiple example visualizations including published visualization research. A free copy of this article, collected data, and source code are available as open science at osf.io/ge8wp.
ABSTRACT
Tools and interfaces are increasingly expected to be synchronous and distributed to accommodate remote collaboration. Yet, adoption of these techniques for data visualization is low partly because development is difficult: existing collaboration software systems either do not support simultaneous interaction or require expensive redevelopment of existing visualizations. We contribute VisConnect: a web-based synchronous distributed collaborative visualization system that supports most web-based SVG data visualizations, balances system safety with responsiveness, and supports simultaneous interaction from many collaborators. VisConnect works with existing visualization implementations with little-to-no code changes by synchronizing low-level JavaScript events across clients such that visualization updates proceed transparently across clients. This is accomplished via a peer-to-peer system that establishes consensus among clients on the per-element sequence of events, and uses a lock service to grant access over elements to clients. We contribute collaborative extensions of traditional visualization interaction techniques, such as drag, brush, and lasso, and discuss different strategies for collaborative visualization interactions. To demonstrate the utility of VisConnect, we present novel examples of collaborative visualizations in the healthcare domain, remote collaboration with annotation, and show in an education case study for e-learning with 22 participants that students found the ability to remotely collaborate on class activities helpful and enjoyable for understanding concepts. A free copy of this paper and source code are available on OSF at osf.io/ut7e6 and at visconnect.us.
ABSTRACT
Information hierarchies are difficult to express when real-world space or time constraints force traversing the hierarchy in linear presentations, such as in educational books and classroom courses. We present booc.io, which allows linear and non-linear presentation and navigation of educational concepts and material. To support a breadth of material for each concept, booc.io is Web based, which allows adding material such as lecture slides, book chapters, videos, and LTIs. A visual interface assists the creation of the needed hierarchical structures. The goals of our system were formed in expert interviews, and we explain how our design meets these goals. We adapt a real-world course into booc.io, and perform introductory qualitative evaluation with students.
