Online / 6 & 7 February 2021


BabiaXR: Virtual Reality Data Visualizations using only Front-End

BabiaXR is a set of front-end FOSS modules for VR data visualization for the browser. BabiaXR is composed of different modules (for querying, filtering, and representing data) based on A-Frame and Threejs, with the goal of making it very easy to create different kinds of data visualizations (bar charts, bubble charts, cities, ...), by exploiting the power of WebXR and regular web front-end programming.

There are plenty of tools that can analyze data in many ways, most of them are composed of a full-stack app, and the well-known front-end libraries limit the visualization on the 2D and screen environment, just a few of them try to visualize this data in the browser integrating other technologies/environments like webXR. This is the goal of BabiaXR, a set of front-end modules for 3D and VR (virtual reality) data analysis. The visualization part of BabiaXR is based on A-Frame and Threejs, providing a collection of components for querying data, filtering data, and creating different kinds of visualizations, all of them developed using just front-end technology. Among the visualizations, there are common ones like bar charts, pie charts, bubbles chart, but now we are moving beyond that, exploring new ways of show data in 3D/VR. For example, we are working on representing software projects using the city metaphor, showing the evolution of the project as the evolution of a city, with building corresponding to the different files. In this talk, I will do an overview of BabiaXR, showing different examples of the power of WebXR and A-Frame with different visualizations, and how simple is to develop this kind of module using just JavaScript and other front-end libraries. Then, I will analyze a city corresponding to a well-known FOSS project, showing its evolution in different time snapshots and explaining how the code evolves as the city does.


Photo of David Moreno David Moreno