Background/Context: Currently, the usual interface for visualizing data is based on 2D screens. Recently, devices capable of visualizing data while immersed in Virtual Reality (VR) scenes are becoming common. However, it has not been studied in detail to which extent these devices are suitable for interacting with data visualizations in the specific case of data about software development. Objective/Aim: In this study, we propose VR dashboards that can aggregate and combine information that is usually represented in diferent 2D dashboards. Specifically, the combination of the timing of issues and pull requests in a single VR dashboard. Method: We address our objective by combining a series of pre-built dashboards in Kibana, with the help of GrimoireLab and Bitergia into a single VR dashboard. We use GrimoireLab for data extraction, Kibana as a model to build the VR dashboard, and BabiaXR to build the dashboard in VR. We rely on web technologies, WebXR and WebVR standards for development, generating open, universal dashboards, capable of being viewed in modern browsers. Results: A complete VR dashboard that combines information on Pull Requests and Issues, specifically their closing and processing time (timing). The diferentiation between Issues and Pull Requests is done using two diferent color ranges. This approach will give way to a programmed study of the comparison of these VR dashboards with the common ones generated by Kibana.
Software engineers mainly interact with source code using a keyboard and a mouse, typically
viewing it on 2D monitors. This way of interacting does not take advantage of the many benefits
of movement and perception that humans have. This is not the case of virtual reality (VR)
immersion, where the subject works in a virtual 3D environment. In the last years, afordable
VR devices have emerged, and new standards such as WebXR [
In fact, in the specific case of software engineering, some scholars argue that the use of
VR allows for environments that may make practitioners face lower learning curves, be more
creative and achieve higher productivity [
To explore visualizing software development data in VR, Bitergia1 and Universidad Rey
Juan Carlos have developed BabiaXR,2 a toolset for visualizing data in 3D, both on-screen
and in VR devices. Bitergia is a company ofering commercial services in the area of software
development analytics, and leads the development of GrimoireLab3 [
The fact that we can design scenes to visualize exactly the same data, with very similar charts, in two diferent environments (2D charts on traditional screens in Kibana, and 3D charts on VR devices using BabiaXR), gives us the chance of trying fair comparisons between both environments. In particular, we can design VR scenes with charts similar to the 2D, on-screen visualizations that Bitergia uses for its customers, and then run an experiment where subjects use one of those environments so that we can compare results.
The future aim is to test if VR immersion is at least as efective and eficient as 2D in-screen,
for the visualization of the same data. The field of analysis for our study is Pull Requests and
Issues activity. Pull Request, as part of modern code review [
By default, there are two diferent panels, developed by Bitergia in Kibana, to display the timing of Issues and Pull Requests, forcing the user to move between pages to correlate the data, this is another goal to achieve by displaying both Issues and Pull Requests timing in the same VR Dashboard.
With the help of GrimoireLab, Bitergia gathers and enriches software development data to create a set of pre-existing dashboards. In particular, there are five panels/dashboards whose main goal is to show several aspects of the Pull Request and Issues process. We focus on the timing panels (for Issues and Pull Requests) for analyzing bottlenecks on code reviews.
The timing panels (shown in Figure 1 and Figure 2), ofer information about the time to close Pull Requests. This panel focuses on bringing information to the user about the evolution of the time to close a Pull Request/issue over time. This is intended to visually find previous bottlenecks in the development process.
The data represented is about the CHAOSS project5, an open-source project well known by the authors and the project that GrimoireLab belongs to. All the data represented in Kibana with GrimoireLab have temporal information, allowing us to see the temporal evolution of this data, and see the status of the Pull Requests and Issues at diferent moments in time. Kibana allows changing the time range with a menu, shown in Figure 3.
This refers to following the evolution of the software project that is represented, seeing how the code review processes have changed over time and being able to analyze bottlenecks and other problems.
BabiaXR6 is a toolset for 3D data visualization in the browser. BabiaXR is based on A-Frame,7 an open web framework to build 3D, augmented reality (i.e., AR), and VR experiences in the browser. A-Frame extends HTML with new entities allowing to build 3D scenes as if they were HTML documents, using techniques common to any front-end web developer. A-Frame is built
7A-Frame: https://aframe.io on top of Three.js,8 which uses the WebGL API available in all modern browsers.
BabiaXR extends A-Frame by providing components to create visualizations, simplify data retrieval, and manage data (e.g., data filtering or mapping of fields to visualization features). Scenes built with BabiaXR can be displayed on-screen, or on VR devices, including consumergrade headsets. Figure 4 shows a sample scene built with BabiaXR. BabiaXR is open source: Its source code is available on GitLab9 and it can be installed with npm.10
BabiaXR includes components for query data from the ElasticSearch database, having the same functionality as the Kibana queries, allowing to do usual queries and aggregations to ElasticSearch. Once the query is done, the data is parsed and formatted in the generic format that the BabiaXR visualizations use: " f i e l d 1 " : " a a a / bbb / c c c " " m e t r i c " : x , " m e t r i c 2 " : y , . . . 8Three.js: https://threejs.org 9https://gitlab.com/babiaxr/aframe-babia-components 10https://npmjs.org/package/aframe-babia-components
The scene to visualize this data is composed of a single HTML file, which uses the data retrieved by the ElasticSearch queries. The HTML file imports all the dependencies ( i.e., A-Frame and BabiaXR JavaScript packages) and defines the scene by including the corresponding elements and components: babia-queryes to retrieve the ElasticSearch data, babia-treebuilder and babia-xxxx which are the actual components to generate the visualizations. Each component has its own configuration, detailed in the documentation. 11 The listing below shows a sample scene, including some configuration parameters: <a − s c e n e i d = " s c e n e " > <a − e n t i t y i d = " r a w d a t a "
babia− q u e r y e s = " u r l : d a t a . j s o n " > </ a − e n t i t y > <a − e n t i t y i d = " b a r s v i z " babia− b a r s = " h e i g h t : m e t r i c ; x _ a x i s : f i e l d ; from : r a w d a t a " > </ a − e n t i t y > <a − e n t i t y i d = " 3 D b a r s v i z " babia− barsmap = " from : r a w d a t a ; x _ a x i s : f i e l d ; z _ a x i s : m e t r i c 2 ; h e i g h t : m e t r i c 3 " > </ a − e n t i t y > . . . </ a − s c e n e >
One of the biggest benefits of 3D and VR environments is that space is not as limited as in a 2D environment, specifically, in 3D and VR environments there is 360-degree space in all axes around a point, for example, the camera or the user entry point to the scene.
This feature allows various elements to be placed around a point and with a simple camera turn, which is transferred to a VR user’s head turn, more information can be observed and correlated. So with BabiaXR, we have tried to bring together both Kibana panels, both the Pull Request Timing panel and the Issues Timing panel, into a single VR scene, displaying both Issues and Pull Requests information in that scene. An example of this scene is shown in Figure 7.
We have used the museum metaphor (represent elements like in a museum) for the representation of this VR dashboard. In addition, we use two diferent color ranges (blue and red) to be able to distinguish between issue visualizations and Pull Request visualizations. 11https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/docs/APIs HTML file
In addition, the feature to be able to change in diferent time ranges that include Kibana, shown in Figure 3, has been completely developed for BabiaXR, allowing to change time ranges quickly. This is done with a Kibana-like menu found on top of a VR headset controller, as shown in Figure 8
One of the results of this study is to prepare a dashboard that combines both Issues and Pull
Requests timing in a VR dashboard. This objective has been fulfilled and gives way to future
comparative analysis of both environments. In the study derived from the registered report [
Given the little evidence about the convenience of using VR for visualizing and interacting with data, and in particular the relative lack of evidence comparing on-screen with VR immersion in software engineering, we consider that an experiment is important for the field. As VR devices become increasingly commonplace, as we can observe now in academia and several branches of science (medical, industrial engineering, etc.), inclusion in software engineering could be a real option, and it will be important to know as much as possible about how they impact practitioners, in comparison with traditional environments.
The analysis should be done with qualitative/quantitative studies, based on tasks and (possibly semi-structured) interviews with a sample of the people who will go through the experiment, to learn about the details of their experience. For avoiding as much as possible bias due to the diferent training with on-screen environments or VR environments, all subjects will go through a short training procedure, and we will mitigate other threats that can appear in the experiment.
As another future work, the development of BabiaXR will follow. A very strong point that it needs is the improvement of the interaction with the visualizations, Kibana allows you to add iflters as you click on diferent elements of the visualizations, that BabiaXR does not allow it at the moment, so it is the next step for have a VR dashboard in functionality equal to that of Kibana. And in general, an improvement of the experience, interfaces, and usability after the feedback that we expect from the participants of the experiment and future ones.
Virtual reality has been shown to facilitate discovery in domains in which space plays an
important role. For example in the field of brain tumors [
Regarding the virtual reality data visualizations, Donalek et al. [
There are other fields of study for data visualization, and Augmented Reality (AR) is one of
them. Olshannikova et al. [