David Moreno-Lumbreras

In this talk we present how to visualize the NPM dependencies ecosystem of your node project using the elevated city of BabiaXR, in VR using the webXR standards. We will start with a step-by-step tutorial on how to retrieve the needed data from the node project, and how to build a VR scene for the browser using only a few lines of HTML, including the BabiaXR toolset based on A-Frame. We will analyze the important features of the project, such the license usage, vulnerabilities, community, and employment of the dependencies installed. All of these metrics are mapped to building aspects (height, area, and color).

The continuous emergence of OSS web development projects makes the \npm network a field of study and most important the dependencies that these projects install, adding community, vulnerabilities, or size issues to the software development process. NPM registry is a network where most web developers upload their packages, this network has been shown to grow with time. The need to control these ecosystem dependencies is an active field in academia and industry. We present a VR city for analyzing the NPM dependencies of a node project with the goal of understanding the information about the licenses, vulnerabilities, community, and employment of the dependencies installed in order to detect and prevent issues derivated from there.

For creating the VR scene in the browser, we will use BabiaXR, a toolset for data visualization in VR for the web, in this case, we will focus on the elevated city, being the buildings the packages installed by npm, and the level of the dependency represented as an elevated quarter of the city. In this talk, we will follow a step-by-step tutorial for retrieving the data and needed metrics and we will show how to use this VR scene and how to change these metrics in real time, updating the city in order to see information about the license usage, vulnerabilities, community or package employment.

This talk requires basic knowledge of the NPM ecosystem, nothing else beyond that.

BabiaXR is a set of FOSS modules for VR (virtual reality) data visualization for the browser. BabiaXR is 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 WebVR and regular web front-end programming. In this talk, I will do an overview of BabiaXR, showing different examples of different common visualizations. Then, I will focus on showing how we use the city metaphor to represent a popular FOSS project, showing its evolution over time. The talk will show examples (in VR) that the public can try on the fly.

There are plenty of tools that can analyze data in many ways, but just a few of them try to visualize this data beyond 2D. This is the goal of BabiaXR, a set of front-end modules for 3D VR (virtual reality) data visualization. The visualization part of BabiaXR is based on A-Frame and Threejs, providing a collection of components for creating different kinds of visualizations. Among them there are common ones like bar charts, pie charts, bubbles chart, but now we are moving beyond that, exploring new ways of showing data in 3D. 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 WebVR and A-Frame with different visualizations. 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. Moreover, there will be examples that the public of the room can try on the fly in their devices, and I will bring a set of two different VR devices to show the examples in an immersive environment after the talk.

As A-Frame was developed in part by Mozilla developers, and it is used in some Mozilla services (such as Hubs), I think that it is interesting to show what kind of things, beyond games, can be done with this awesome framework, specifically, related to data analysis and new different ways of data visualization, like the cities that you can build with BabiaXR.