Brussels / 2 & 3 February 2019


VBoard, making web dashboards in 3D and VR

There are plenty of tools that can analyze data in many ways, but just a few of them try to visualize this data in new ways. This is the aim of VBoard, a 100% open source web application that allows building visualizations and dashboards in 3D and VR using A-Frame as its core render library. The data is retrieved in real time using a ElasticSearch, and VBoard saves its objects (visualizations, dashboards) in it.

In this talk I will show the functionality of VBoard, starting with a general overview, its installation steps and a simple step by step user guide. All of this in order to build a 3D and VR dashboard from scratch. To finish, I will show examples of what kind of visualization/dashboard you can build with VBoard using data retrieved with GrimoreLab related to open source projects (e.g., commits, usernames, repositories, etc.).

The goal of VBoard is to have a complex data visualization system in a 3D and VR environment. It started as my master's thesis and finally became a web application that uses A-Frame as the visualization render engine and ElasticSearch as a database and search engine. Specifically, VBoard rests on A-FrameDC to show these data visualizations, A-FrameDC is a JavaScript library to create different kind of data visualizations based on A-Frame. A-FrameDC extends A-Frame, encapsulating it in another library so that the construction of 3D elements is focused on data visualization graphics and it allows the creation and interaction with them in a simple way. This library allows the creation of different kinds of charts, from the simplest 2D charts like pies to 3D charts like bubbles. VBoard takes advantage of A-FrameDC using it in a web interface, making the visualization building process easy and scalable, permitting also the persistence of the objects (visualization and dashboards) saving it in the same ElasticSearch that it does the queries.

The talk will show how to create visualization and dashboards with VBoard. I will start by explaining how to install it in a few steps. I will show how to import open source project data (e.g., commits, usernames, repositories, organizations, etc.) to ElasticSearch using GrimoireLab in order to build the visualization with it. Then, I will build visualizations from scratch, showing its features and usability. You will see how simple it is to create a 3D and VR dashboard that relates useful data like the relation of users with repositories, organizations, etc.


Photo of David Moreno David Moreno