Sharing with No Strings Attached?
How to share visualizations without data.
“Knowledge is power,” they say. However, it is often the case that the access to such knowledge is unintentionally restricted to a select few. This is especially true when sharing interactive visualizations of large datasets. Though these visualizations display tons of useful information, many people do not have the technical facilities to process data on such a large scale. Allowing the general public to access the underlying dataset also could expose the data to malicious users. One way to address this issue is to create static images and videos of the visualization which can be shared independent of the platform, software, and dataset used to create them. However, this is a less than ideal solution because it results in a loss of interactivity with the visualization.
To overcome this issue, the paper, “Dataless Sharing of Interactive Visualization” [1], puts forth a prototype system called Loom that that supports dataless sharing of interactive visualizations. Loom creates an interactive representation of any given data visualization through a set of video recordings. Unlike static video files, Loom represents the visualization as a clickable interface that takes a user’s actions as the input and outputs a visual response to it. This solution is completely platform-agnostic, meaning that Loom representations do not depend on the capabilities of the system they are run on. Loom representations are also independent of the underlying dataset which removes the threat of data misuse. Loom allows the creator to show only the visualizations that they feel are necessary and restrict access to others. It does this in two steps: (1) construction and (2) reconstruction.
Construction
Loom encapsulates the visualization in the form of an action tree — a hierarchical data structure in which one parent interaction leads to several possible child interactions. Action trees are stored in a JSON format which makes them easily readable by web browsers. The action tree also stores the visual response associated with each action along with the action itself as a Loom recording. The visual responses are compressed with H.264 compression which makes them more efficient for sharing and retrieving.
Each node in the action tree represents a particular state of the visualization and consists of the following attributes,
- ActionType (String) represents the type of interaction performed on the interactive element, for example, hover, click, etc.
- Shape (SVG format) represents the position and shape of the interactive element on the screen.
- Children (Object) represents the child elements that can be interacted with after the parent interaction.
Constructing an action tree is done through Loom’s Overlay Application (LOA) which allows the user to define the interactive elements of the visualization. These areas are called “targets” and have a defined shape and action property which specify what event should occur when the element is interacted with. After the action tree is constructed, Loom traverses it and takes a static screenshot of the state of the visualization represented by the node in the action tree. This screenshot is saved as the visual response for that particular node.
Reconstruction
After the construction of the action tree and the corresponding visual representations, the Loom object can be deployed to the web. The code for displaying the Loom object is written in Javascript so the object can easily be rendered in all browsers that support Javascript.
To reconstruct the visualization, Loom runs through the action tree and generates an invisible HTML SVG object for each interaction element, that is, each target. Javascript event handlers are added for each target which trigger on user interaction. The action tree is then converted to a state machine, which maintains which objects can be interacted with for each state of the system and defines transitions between each state. When a user interacts with any of the targets, the event handler is triggered for the particular SVG shape. Based on the shape triggered, the corresponding visual response is then retrieved and the system moves to the resulting state.
Loom in Action
You can see Loom in action in the video below which applies Loom to the Tableau superstore visualization to create a dataless interactive visualization. Loom can also handle more complex visualizations such as the Paraview visualization which is also mentioned in the video.
In conclusion, Loom provides an easy and user-friendly way to create shareable visualizations that are not tightly coupled to the technical infrastructure. So yes, visualizations can be shared with no strings attached!
References
- M. Raji, J. Duncan, T. Hobson and J. Huang, “Dataless Sharing of Interactive Visualization.” IEEE Transactions on Visualization and Computer Graphics, vol. 27, no. 9, pp. 3656–3669, 1 Sept. 2021, doi: 10.1109/TVCG.2020.2984708.
