Immersive Analytics — On the Web?
A new web framework is redefining immersive visualization.
Virtual reality has has been the talk of the town in recent times. From gaming and movies to visualizations, VR has been able to provide an immersive experience for everything. It has therefore become necessary to make standardized tools which help in building these immersive virtual experiences. VRIA is one such tool to help you build these experiences for data visualizations, and yes, even if you are just a beginner! And the best thing? It’s all done in your web browser!
Simply put, VRIA is a web-based framework to design immersive data visualization experiences in Virtual Reality. It is built upon WebVR, A-Frame, React, and D3.js. It is designed so that it can be used by users with varying levels of programming experience, from novices to experts to rapidly build and test visualizations in a 3D on-screen or immersive manner. The framework enables users to build and share immersive and consumable IA experiences for the open web with a single code-base which can then be experienced with a wide variety of VR capable devices. The VRIA framework aims to democratize the creation of immersive data analytics experiences keeping in mind the standards in the domain of the immersive Web. The motivation to make VRIA a web-based tool is the belief that the Web is the most ubiquitous, collaborative and platform independent way to build and share information.
The VRIA framework was made both for people who are beginners to programming as well as for people who already have some experience with programming. The following diagram demonstrates how the framework is suitable for all types of users.
Once the user has the dataset which they wish to visualize, they can follow different paths to make the immersive visualization depending upon their expertise.
Beginners can use the VRIA builder on the web to visualize their dataset. They require no prior knowledge of the grammar or JSON. It is mainly intended to help the user learn the grammar. Along with this, it also helps to give immediate feedback to the user by enabling them to rapidly protoype, test and iteratively develop various visualizations on the screen. First, the user has to upload their dataset to the builder or choose from a set of examples. Then the user can configure various parameters like the type and shape of marks, channel encodings etc. using the drop down menus provided. Then, the user can view the 3D visualizations interactively within the builder or even view them immersively with the help of VR headsets.
The VRIA builder also helps non-WebVR developers to learn the grammar and speeding up their learning process. These users are more likely to have some experience using JSON before and so they may be inclined to edit the configuration files on their own instead of using the drop down menus provided by the builder since it would be a tedious task for them. For developers getting started with WebVR, creating a React project is the simplest way to learn VRIA. With a few extra steps, VRIA can also be integrated with non-React projects (although the overarching application should make use of A-Frame scenes).
For people who already have a grasp on WebVR and A-frames, the builder would be useful to learn the grammar and build the initial structure of their VRIA. The builder will not be able to parse and generate configuration files with any new features that are currently not a part of it, and if they want, the developer can use their knowlege to build these features for their own standalone projects which use the VRIA API.
VRIA is a JavaScript module written using React and A-Frame. React is a JavaScript library used to build user interfaces whereas A-Frame is a framework used to build WebVR experiences. A-Frame provides structure to Three.js, which is a javascript library which helps to program 3D scenarios in a web browser. Moreover A-frame helps the React library to efficiently update only those parts of the visualization which require re-rendering, saving time and memory. VRIA supports all major HMDs (Head Mounted Displays) including six degrees of freedom (6DOF) HTC Vive/Focus, Oculus Touch/Quest and Windows MR dual controllers, as well as 3DOF Daydream, Oculus Go and Gear VR single controllers.
The user provides a dataset (JSON/CSV files) as the input which are converted to a visualization configuration file (vis config). VRIA then interprets this file and fills up any missing values with defaults. This file is then used to map data to graphical marks and their visual encoding channels. Once all this is done, the visualization renderer constructs the visualization, the user interface, axes, legends etc. and adds all of that to the scene. The interpretation part and the mapping part both take place at runtime, so any changes to the dataset will be seen in realtime. All of the interactions with the visualization are real-time.
More Information
- P. W. S. Butcher, N. W. John and P. D. Ritsos, “VRIA: A Web-Based Framework for Creating Immersive Analytics Experiences.” IEEE Transactions on Visualization and Computer Graphics, vol. 27, no. 7, pp. 3213–3225, 1 July 2021, doi: 10.1109/TVCG.2020.2965109.
