Towards a Framework for Immersive Analytics on the WebPeter W. S. Butcher*

University of ChesterNigel W. John†

Univeristy of ChesterPanagiotis D. Ritsos‡

Bangor University

ABSTRACT

We present work-in-progress on the design and implementation ofa Web framework for building Immersive Analytics (IA) solutionsin Virtual Reality (VR). We outline the design of our prototypeframework, <VRIA>, which facilitates the development of VRspaces for IA solutions, which can be accessed via a Web browser.<VRIA> is built on emerging open-standards Web technologiessuch as WebVR, A-Frame and React, and supports a variety ofinteraction devices (e.g., smartphones, head-mounted displays etc.).We elaborate on our motivation for focusing on open-standards Webtechnologies and provide an overview of our framework. We alsopresent two early visualization components. Finally, we outlinefurther extensions and investigations.

Index Terms: H.5.2 [Information Interfaces and Presentation]:Multimedia Information Systems—Artificial, augmented, andvirtual realities.

1 INTRODUCTION

Immersive Analytics (IA) is an emerging research theme, in whichresearchers and developers explore visual mechanisms for dataexploration and analysis, away from desktop computers and Window-Icon-Mouse-Pointer (WIMP) interfaces [4]. Amongst this multi-flavored research thrust, Virtual Reality (VR) has a prominent placeas one of the oldest paradigms for beyond-the-desktop interaction.Despite the fact that VR has been around for decades, the recentemergence of affordable, commercially available head-mounted-displays (HMDs), such as the HTC Vive and Oculus Rift, hasreinvigorated the interest in all things VR. Motivated by thisevolution of VR, we are interested in building the necessary toolsthat will enable the visualization community to explore whether, andhow, data visualization practices can be enhanced by the use of VR.

In this effort, we present work-in-progress on our IA framework,<VRIA>, which facilitates the development of IA solutions forthe web, and is built upon WebVR, A-Frame and React. Weare particularly interested in using open-standards Web-basedtechnologies, as we believe that the Web is the most ubiquitous,collaborative and platform-independent way to build and shareinformation [9]. Moreover, such technologies work in synergy withestablished visualization libraries, through the HTML documentobject model (DOM). It is no surprise that the most populartechnologies for data visualization nowadays (e.g., D3.js [1]) arefrom the Web technologies ecosystem and are essentially based onopen-standards.

2 BACKGROUND

At the beginning of the millennium Van Dam et al. [10] presented aresearch agenda that included a call to action on how VR could bean effective medium for scientific visualization. They highlightedthe lack of standardization that enables interoperability for the

*e-mail: p.butcher@chester.ac.uk†e-mail: nigel.john@chester.ac.uk‡e-mail: p.ritsos@bangor.ac.uk

development of VR systems, as a major obstacle. We believe theirobservation applies to all genres of visualization.

Aided by the recent availability of new affordable VR interfaces,a large number of efforts to employ this paradigm have emergedover the last five years, e.g., [5, 6]. However, very few efforts focuson open-standard web technologies, e.g. [2, 8]. Of particular interestto our work is the Web-based visualization library, Stardust [7],which has a focus on graphical, GPU-driven performance andshares a number of similarities with our work (declarative grammar,web-technologies, WebVR support). However, its main goal isto achieve significant performance improvements for GPU-basedrendering of either 2D or 3D content. Our work, however, focuseson providing a flexible and extensible framework for building VRspaces for IA solutions, accessible on the Web, that nonethelesssupport a variety of interface devices. Another interesting effortis the DXR toolkit (https://sites.google.com/view/dxr-vis) whichallows prototyping IA visualizations in both AR and VR. DXRshares a similar philosophy to <VRIA>, in terms of prototypingvisualizations but is, nonetheless, built around the game engineUnity.

3 THE <VRIA> FRAMEWORK

Following our prior investigations [2, 3], we were motivated tocreate a framework that would allow anyone to create interactive,immersive WebVR data visualizations. <VRIA> includes methodsfor rapid prototyping with simple configuration files, as wellas an API facilitating the creation of bespoke visualizationsand interactions. By accommodating both of these approaches,<VRIA> is suitable for both seasoned programmers and users withlittle programming experience.

<VRIA> is written in React, a JavaScript library for building userinterfaces; Redux, a state container for JavaScript applications; andA-Frame, a framework for building WebVR experiences. The exactstructure and implementation of the high-level DOM architectureof an application that makes use of <VRIA> is up to the user, andthere is no requirement for the whole application to be written inReact. <VRIA> can be integrated into existing applications, withthe only requirement being that the overarching application makesuse of A-Frame scenes.

The top level node in the example application depicted inFig. 1 is a React component ( ) that contains an A-Frame scenecomponent ( ). The scene component can contain any other A-

Figure 1: Architectural overview of an example application built with<VRIA>. This diagram also gives a high-level depiction of how dataflows through an application.

Figure 2: A demonstration <VRIA> application running on a mid-range smartphone with Chrome for Android and Google Cardboard.The user is able to fully interact with all controls via a gaze cursor.

Frame components that a user desires. <VRIA> provides a Reactcomponent called VRIA ( ) which must be placed within the sceneelement and should be passed a visualization configuration file( ). Everything that this component generates is mandated by theconfiguration file that is passed to it. The store ( ), is implementedwith Redux and contains the application state. It is connected tovisualization and control components ( ). These components mapdata to React components ( ), that depict the visualization and alluser interfaces with A-Frame (and ThreeJS that underlines it). Theyalso respond to user interaction and report these actions back to thestore, which then updates the visualization.

<VRIA> provides a simple method of converting a dataset intoWebVR-ready 3D visualizations, coupled with a set of appropriateinterfaces (controls), through a declarative format described withJSON. This forms a visualization configuration that our frameworkcan interpret, and allows users to create different visualizationsthrough setting parameters, properties and constraints tailored toeach visualization type. In its most basic form, a visualizationconfiguration consists of a dataset and the type of visualization wewish to use. This can either be packaged up as a JSON file oras a JavaScript module. <VRIA> only requires a visualizationconfiguration for basic functionality. However, if extra functionalityis required such as a custom set of interactions or a bespokevisualization type, then these can be created with A-Frame and<VRIA>’s API.

4 FIRST COMPONENTS

<VRIA> currently supports tabular data inputs formatted as JSONor CSV. Data sets may contain any number of fields and records.Supported visualization types currently include 3D bar chartsand multivariate scatter plots (Fig. 3) with more abstract datavisualization types planned. Each visualization has its own setof possible interactions that can be selectively enabled or disabledin the visualization configuration.

Visualization and control components are written using A-Frame.The framework’s API is used to map controls to data transformations,which are then reflected in the visualization. The exact nature of thedata transformations and desired interactions are left to the user; theframework then connects everything together. Data transformationsfor new visualizations can be achieved with existing libraries suchas D3.js, or can be written from scratch.

5 FUTURE WORK AND CONCLUSIONS

We present <VRIA>, a framework for building VR spacesfor Immersive Analytics, using open-standards Web-technologies.<VRIA> is built using WebVR, A-Frame and React. Theresulting VR solutions can be experienced through a WebVR-compliant browser with a variety of devices, ranging from

Figure 3: Example of a scatter plot created with <VRIA> depicting arandomly generated multivariate dataset with 500 data points.

smartphones to HMD-equipped desktop computers. <VRIA>uses a declarative format for specifying visualization types throughsimple configuration files, simplifying visualization prototyping,data binding and interaction configuration. Our framework is inongoing development, with a number of enhancements planned.In the next phase we look to build more 3D vis components,along with corresponding interaction mechanisms. We also plan tointegrate features that allow collaborative tasks in VR space. Moreinformation on <VRIA> is available at https://github.com/vriajs.

REFERENCES

[1] M. Bostock, V. Ogievetsky, and J. Heer. D3 Data-DrivenDocuments. IEEE Transactions on Visualization and ComputerGraphics, 17(12):2301–2309, Dec 2011.

[2] P. W. Butcher and P. D. Ritsos. Building Immersive Data Visualizationsfor the Web. In Procs. of International Conference on Cyberworlds(CW’17), pages 142–145, Sept 2017.

[3] P. W. Butcher, J. C. Roberts, and P. D. Ritsos. Immersive Analytics withWebVR and Google Cardboard. In Posters of the IEEE Conference onVisualization (IEEE VIS 2016), Baltimore, MD, USA, 2016.

[4] T. Chandler, M. Cordeil, T. Czauderna, T. Dwyer, J. Glowacki,C. Goncu, M. Klapperstueck, K. Klein, K. Marriott, F. Schreiber,and E. Wilson. Immersive Analytics. In Procs. of Big Data VisualAnalytics, (BDVA), pages 1–8, Sept 2015.

[5] M. Cordeil, A. Cunningham, T. Dwyer, B. H. Thomas, and K. Marriott.ImAxes: Immersive Axes As Embodied Affordances for InteractiveMultivariate Data Visualisation. In Procs. of the ACM Symposium onUser Interface Software and Technology, (UIST), pages 71–83, NewYork, NY, USA, 2017. ACM.

[6] C. Donalek, S. G. Djorgovski, A. Cioc, A. Wang, J. Zhang, E. Lawler,S. Yeh, A. Mahabal, M. Graham, A. Drake, et al. Immersive andcollaborative data visualization using virtual reality platforms. InProcs. of IEEE International Conference on Big Data, pages 609–614,Oct 2014.

[7] D. Ren, B. Lee, and T. Hollerer. Stardust: Accessible and TransparentGPU Support for Information Visualization Rendering. ComputerGraphics Forum, 36(3):179–188, 2017.

[8] P. D. Ritsos, J. Mearman, J. R. Jackson, and J. C. Roberts.Synthetic Visualizations in Web-based Mixed Reality. In B. Bach,M. Cordeil, T. Dwyer, B. Lee, B. Saket, A. Endert, C. Collins,and S. Carpendale, editors, Immersive Analytics: Exploring FutureVisualization and Interaction Technologies for Data AnalyticsWorkshop, IEEE Conference on Visualization (VIS), Phoenix, Arizona,USA, Oct. 2017.

[9] J. C. Roberts, P. D. Ritsos, S. K. Badam, D. Brodbeck, J. Kennedy, andN. Elmqvist. Visualization Beyond the Desktop - the next big thing.IEEE Computer Graphics & Applications, 34(6):26–34, Nov. 2014.

[10] A. van Dam, A. S. Forsberg, D. H. Laidlaw, J. J. LaViola, and R. M.Simpson. Immersive VR for scientific visualization: a progress report.IEEE Computer Graphics & Applications, 20(6):26–52, Nov 2000.