BabiaXR: Virtual Reality Data Visualizations using only Front-End
Moreno, David
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.
 you Hello everyone, first of all, thank you so much to the organizers for making this special for them and this JavaScript that's possible. I'm David Moreno and I'm going to present you Bavia XR Virtual Reality Data Visualizations using only Frontend and what is better to start than showing directly live demo? Well, technically, this is a video. So this is the first demo. Record it in a browser and show in a scene, a 3D scene, with a data visualization with some interaction with the keyboard for moving and the mouse for selecting and hovering. Now, as I said, this works in a browser, so as probably you notice, this is based on Web XR and this scene is also compatible with VR glasses. This example shows the same scene but using an Oculus Quest 2. And we can see that the data visualization is also compatible with the Oculus Quest 2 controller. Maybe it doesn't seem amazing but what if I tell you that this is the code for generating this scene? And yes, it's not technically code, it is just these few lines on HTML. This is possible using two scenes, A-Frame and Bavia components. I'm going to get deep into A-Frame and Bavia components in the presentation. So I'm going to show you another demo. This is the other example that I want to show you and well, this is HTML. If we add a set of libraries and more lines, we can create scenes like this one, a complete launch, like a museum, but showing data with the possibility of interacting with the charts using the cursor. And well, you can see that in these scenes there are different kinds of visualization. And one of the most important one is the one with the green base, this one, I'm going to stop the video here. That shows a city. This is one of the special visualization that Bavia has included. I will show you more information about it in the presentation, at the end of the presentation. And well, this is the same example of the launch, but using the VR glasses, Oculus Quest 2 as well. And well, it is completely compatible with the glasses and the control. You can select it with the right control. And the code, the lines of HTML are basically the same, but adding more entities. I'm going to explain what is an entity in the presentation as well. As you can see here, we have added the Bavia components script. And we define here the different things of the scene, the sky, the camera, the different visualizations, and so on. Perhaps you notice that there is an empty space in the middle of the scene. Don't worry, at the finish of the presentation, I will add a visualization there in order to show you how simple it is to add this kind of visualization in a 3D and VR scene using a frame. So going back to the presentation, I want to say that the presentation is full of QR codes and links to the examples, the documentation, and some more useful information that I'm going to show in the presentation. And now I will share the slides or they will be available now in the first and talk description. The first thing that I want to show is the main page of Bavia. Well, it's a common page. It includes useful information about the usage of the components, the documentation, how to build a scene, how to use the components, link to the samples, and so on. I just want to say that this is still working progress. We appreciate the feedback and if you want to contribute, the code is hosted on GILLAB. The essence of the code is GBL version 3. This is the link to the first example that I showed, and this is the other link to the launch example. You can try to enter the example using your smartphone, GBL glasses, or just the browser in your computer. So the main technology that Bavia uses is A-Frame. Bavia completely relies on A-Frame. And what is A-Frame? A-Frame is a web framework for building 3D AR VR experiences with HTML and the entity component. A-Frame is developed on top of 3DS and again, with this just few lines of HTML, we can create scenes like this one. And well, A-Frame uses the entity component system definition. So following its documentation, entities are contained objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty divs. Components are reusable models or data containers that can be attached to entities to provide appearance, behavior, and or functionality. Components are like plug-and-play for objects. All logic is implemented through components and we define different types of objects by mixing, marking, and configuring components. So Bavia uses components as its main library. And I'm not going to stop on systems because we are not using systems, but if you want more information about it, there is a link here with a QR that will redirect you to the A-Frame page. So specifically, entities are represented by the entity element and prototype. Components are represented by HTML attributes on an entity and systems are similar to components, but I'm not going to stop there because in Bavia we don't use systems. And what is the logic? The logic is in the component definition. The JavaScript code is there. And this is how the component has to be defined in A-Frame. First of all, we have the schema. The schema are the attributes in the HTML definition of the components. And we have to define the type of the attributes that we are going to use in the component. We have here this example and we see that the attribute bar is defined here and the type is number. And then we have four predefined functions that will be executed some moment of the same execution process. First of all, we have the init function that we do something when the component first attacks the update function that we do something when the component data is updated. For instance, if you change the value of one of the attributes using JavaScript, for instance, getting the element from the DOM and changing manually the value of one of these attributes, the update function will be executed. We have the remove function that will do something when the component or its entity is detached and the tick function that is really important that we do something on every scene tick or frame. Well, Pavia XR is a set of components for data visualization, but it includes components that are not just visual. It includes components for query data, filtering data, and visualizing data. So following this stack, the components starts with the query data. But before moving to the next slide, I want to let you know that this QR at this link will redirect you to the A-frame documentation with more information about how to write a component and more details about it. So the first components in the stacks are the components for query data. We call them queriers. We have currently three types of components that retrieve data, three types of queries. The query is JSON, the query is ES, and the query is GitHub. The query is JSON, we retrieve data from our URL that has a JSON. We have this simple sample to put here, the URL of the JSON, and the component will retrieve the data. The query is relative data from an elastic sets database, and the query is GitHub, will retrieve the data from the GitHub REST API. When the components retrieve the data, the component stores the data in one attribute of the component. The next component is the filtered data component, a component that is attached to a query and filters the data that the query retrieves. That's it. The component is still working, so we have to add more filters to the component. The next component is the component that is called PISMapper. This component maps the data fields to visualization properties. For instance, this component is used for putting a field of the data as a hate in a 3D bar chart visualization. Or put another field as the X axis and so on. And finally, the final components of the tags are the components for visualization the data. We have included so far the next one, the pie chart, the donut chart, the 3D and the two bar charts with two or three dimensions. The 3D and 2D cylinders, the same that the 3D and 2D bar chart, but with the dimension of the cylinder. The bar chart and the final component, the last one added is the code city component for visualization code as cities. Returning to the second demo of the presentation, the demo that I did at the beginning of the presentation, we are going to fill the empty zone that we saw in the lounge. And in this case, we are going to add the components in the bar chart. We are going to add a 2D visualization representing a bar chart with the configuration of the legend, the axis, the maximum height for normalized data. We added a filter data as well and a mapper in order to put the fields in the X axis and in the height. So this is the lounge completed, we have now our visualization in the empty zone and the example is now completed. As you can see, it's really simple to add a visualization in HTML, just these three lines. And this is more complicated because we added a filter data and a mapper, but you can add just the component of visualization and put and digit the data. And the next point is the code city component, so let's go for it. But before starting with this component on the examples page of Bavia, there are visual examples of each component described in this presentation. This is the link to the examples page. And here you can see different squares with the different samples of each component. And I want to leave these links here where all the information and the details about the component definition, the attributes of the components, and the user guide for using the components. So this first link redirects to the rhythm, where there are a small sample and all the API of each component. And this other link is a component social guide with a step-by-step guide for using the components stack. So if you want to take a little later, here are the links. So focusing on the code city visualization where, or city visualization, I want to say that the visualization relies on the city metaphor for visualizing data that has a tree format. It's just data with a tree format representing as a city. But we focus on the study of the visualization for visualizing code. I mean, the city represents a software system. Each building represents a file of the software system. And the quarter hierarchy represents the folder hierarchy of each building. And the major representatives are the height and the area of each building. The height of the building represents the lines of code of the file and the area of each building represent the number of functions that the file code has. Obviously, these values are normalized. But adding more functionality to this visualization, we are currently working on the time evolution of the software city, changing the layout of the city as the code is changing along the time, observing how the building changes their area and their height, or even disappear as the code changes between commits. For moving between this time snapshot, there is a component called UINAPBar that is this one, that allows the user to interact with it moving the city between the time snapshots. This visualization is fully configurable with all these parameters. I'm not going to stop here because there are a lot of them as you can see, but in this link, there is the user guide with all the description of which one, and again, a step-by-step user guide in order to understand the visualization of the component. And the same with the definition of the component in the HTML file. But well, there is an important point on visualization that is the data. For producing the needed data for this visualization, we use a different set of tools that are in the Grimoire lab stack. We are starting analyzing a repository using Gral. Gral leverages on the git backend of Perthable and enhances it to set up a doc source code analysis. Thus, it fetches the commit for the git repository and provides a mechanism to plug the Part 2's libraries focused on source code analysis. Specifically, we use Gral to obtain a matrix related to code complexity of our repository, and then Gral stores the data in the last search, in an last search database, in the last search search engine. Then we created a Python code included in the Bavia XR components repository in order to get the JSON data with all the information that will be ingested in the code city component of Bavia XR. Again, this is a link to a more detailed explanation about the process of getting the data. And this is a complete use case with all the needed steps to create this time-evolving city, step-by-step, using a specific use case. In this video, I show the time-evolving city of the Shorting Hat project. This is the link to the Shorting Hat project. Well, I cannot say it right now because of the presentation. And this is the link to the video. I'm going to put just a little bit. As you can see here, we can see the UINNAT bar with all the time-evolving snapshots that we can navigate. And if we hover a building, we see the file that represents, and if we click on a quarter, we see the folder that this quarter represents. And, well, this is the visualization. We have included as well some tips that I'm going to show you now. For instance, this is a tip that explains, for instance, in this case, the interaction with the city. And this explains a little what is the city about, what it represents. And if we click on a dot in order to change the time-evolving snapshot, we can see how the city changes its layout. For instance, in these two points, a file disappears. There is another tip with instruction to use the navigation bar. We can see how the city evolves. In this case, we are moving from present to past, and we can see how the building disappears. And, well, this visualization is completely compatible with the Euclid Quest and the smartphone, and I said, when I set the smartphone, I said any device with a modern browser that supports WebXR, but if you are using a VR glasses, it has been tested with Euclid Quest and Euclid Go. You can use the controller for interacting with the city. So if you click, as we can see in this example, we can change the same in the time-esnaps and see how the city evolves. Just to finish, I want to show some other components that are under development right now. Starting with the Iceland component, this one, that provides a new layout for the city visualization. So the data is the same data from the cold city visualization that I already showed. It's a three-data format, and we have the goal to have different Iceland that maybe can represent different software systems, and we can see the evolution of the Iceland as the code of the software systems evolves. The same as the other visualization, but with a new layout that can provide different features than the other layout can provide. We are developing as well the Terrain visualization from Proginter Range that represent data, and they taught them for dynamically changing some visualization between different set of data. Of course, any other idea is more than welcome in the next months or so. More components are coming soon for sure. And now, actually, to conclude, this is another branch of research in BaviaXR, the branch of augmented reality. I want to ask you if you are watching the presentation to use your smartphone to scan this QR right now. Once you scan it, it will redirect you to a web page, and it will ask you for access to the camera. I promise that I will not steal any data, trust me. But I will let you to accept, and once the camera is activated, you will point the QR code again, then you will see data visualization in augmented reality. This is a video of the process, just in case you want to follow it. So this is the link, it will redirect you to the web page, it will ask you for camera access. And then if you accept the camera access, you will see in the middle of the QR some data visualization related to the Grimoire Lab project. Okay, so just in case you are interested in the BaviaXR project, we have a contributors guide to contribute to the project. We are under the GPL version 3 license, and I just want to say that any feedback, any tomato or whatever is more than welcome. And that's everything. Thank you very much for the organizers again and to you for your attention. I'll let me do in the Q&A session, just in case these are my emails if you want to reach me after the program. Thank you very much and see you right now. Okay, the live should start very soon. Okay. Now, we are live, right? Yes. Okay, so hello everyone. I hope you can see me and hear me. Yes, I think so. Well, thank you very much for watching and well, I'm here for the questions. So let's go. I wanted to say that the slides are already linked on the FOSDEM Talk page, just in case you want to run the QR demos. And well, I wanted to say that on the baby page, there are links to tutorials, to the live demos and all the information to build these things. And if you have any question or suggestions, you can send me an email or you can open an issue in the repository. I really appreciate it. So let's do it. Okay, so let's see if there is any question. Or to me, whatever you want. What I'm going to do is I'm going to share my screen and live here the last demo of augmented reality, just in case if you want to run the demo with your smartphone. Maybe this is a good idea. Yeah, I think you can see here the last demo, because I think it's the most visual demo and you can run it just with your smartphone and your camera. I hope you can see that we can have a beer there in Brussels. Let's see what happens. No questions. I'm going to put the video just if you want to know how to do it. So as I said in the presentation, you can go to the link, then the page asks you for for the camera permission, you should accept it. As I said, I don't go I don't, I don't still any data so I don't steal any data. So when the camera sets the pitch when you have the permission of the camera you see pointing to the qr augmented reality dashboard. Just in case to, if you want to try it. No questions. I encourage you if you have a beer glasses to try the qr demos that are linked in the in the slides in the slides. So, and if you have any feedback, please tell me this word me an email or open an issue, because we are currently working on, on adding more features to the VR integration, more, more interesting with controllers so please try it if you have a beer glasses and you can help me. Okay. So, I have a question here, maybe you can talk about how that is composed filter it is interesting. Yeah, I talked, I talked about that in the presentation in the body components in the body set of components. We have components for query data that I said, the components query data, just when a Jason or criminalistic database or putting the gift, the gift has rest API. And with this data, you can fit it with another component that is called filter data. Once the data is squared, you can visualize it with the visualizer that I already saw. So, all the information is in the presentation I think in the, in the, in the least that I, that I, that I have added in the presentation links, due to the to all the information about how to build this kind of things but if you follow the slides you can just do it. So, you should be able to do it. And, well, as I said this runs in every modern browser so just try it is just five lines of HTML. You know, it is works on web XR so it's pretty easy to use and pretty easy to configure. And as I said again, in the pages that I link in the presentation are full of information and step by step user guides and so on.
 you  Hello everyone, first of all, thank you so much to the organizers for making this special for them and this JavaScript that's possible. I'm David Moreno and I'm going to present you  Bavia XR Virtual Reality Data Visualizations using only Frontend and what is better to start than showing directly live demo? Well, technically, this is a video.  So this is the first demo. Record it in a browser and show in a scene, a 3D scene, with a data visualization with some interaction with the keyboard for moving and the mouse for selecting and hovering.  Now, as I said, this works in a browser, so as probably you notice, this is based on Web XR and this scene is also compatible with VR glasses.  This example shows the same scene but using an Oculus Quest 2.  And we can see that the data visualization is also compatible with the Oculus Quest 2 controller.  Maybe it doesn't seem amazing but what if I tell you that this is the code for generating this scene?  And yes, it's not technically code, it is just these few lines on HTML. This is possible using two scenes, A-Frame and Bavia components.  I'm going to get deep into A-Frame and Bavia components in the presentation.  So I'm going to show you another demo.  This is the other example that I want to show you and well, this is HTML.  If we add a set of libraries and more lines, we can create scenes like this one, a complete launch, like a museum, but showing data with the possibility of interacting with the charts using the cursor.  And well, you can see that in these scenes there are different kinds of visualization.  And one of the most important one is the one with the green base, this one, I'm going to stop the video here.  That shows a city.  This is one of the special visualization that Bavia has included.  I will show you more information about it in the presentation, at the end of the presentation.  And well, this is the same example of the launch, but using the VR glasses, Oculus Quest 2 as well.  And well, it is completely compatible with the glasses and the control.  You can select it with the right control.  And the code, the lines of HTML are basically the same, but adding more entities.  I'm going to explain what is an entity in the presentation as well.  As you can see here, we have added the Bavia components script.  And we define here the different things of the scene, the sky, the camera, the different visualizations, and so on.  Perhaps you notice that there is an empty space in the middle of the scene.  Don't worry, at the finish of the presentation, I will add a visualization there in order to show you how simple it is to add this kind of visualization in a 3D and VR scene using a frame.  So going back to the presentation, I want to say that the presentation is full of QR codes and links to the examples, the documentation, and some more useful information that I'm going to show in the presentation.  And now I will share the slides or they will be available now in the first and talk description.  The first thing that I want to show is the main page of Bavia. Well, it's a common page.  It includes useful information about the usage of the components, the documentation, how to build a scene, how to use the components, link to the samples, and so on.  I just want to say that this is still working progress.  We appreciate the feedback and if you want to contribute, the code is hosted on GILLAB.  The essence of the code is GBL version 3.  This is the link to the first example that I showed, and this is the other link to the launch example.  You can try to enter the example using your smartphone, GBL glasses, or just the browser in your computer.  So the main technology that Bavia uses is A-Frame. Bavia completely relies on A-Frame.  And what is A-Frame? A-Frame is a web framework for building 3D AR VR experiences with HTML and the entity component.  A-Frame is developed on top of 3DS and again, with this just few lines of HTML, we can create scenes like this one.  And well, A-Frame uses the entity component system definition.  So following its documentation, entities are contained objects into which components can be attached.  Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty divs.  Components are reusable models or data containers that can be attached to entities to provide appearance, behavior, and or functionality.  Components are like plug-and-play for objects.  All logic is implemented through components and we define different types of objects by mixing, marking, and configuring components.  So Bavia uses components as its main library.  And I'm not going to stop on systems because we are not using systems, but if you want more information about it, there is a link here with a QR that will redirect you to the A-Frame page.  So specifically, entities are represented by the entity element and prototype.  Components are represented by HTML attributes on an entity and systems are similar to components, but I'm not going to stop there because in Bavia we don't use systems.  And what is the logic? The logic is in the component definition. The JavaScript code is there.  And this is how the component has to be defined in A-Frame.  First of all, we have the schema. The schema are the attributes in the HTML definition of the components.  And we have to define the type of the attributes that we are going to use in the component.  We have here this example and we see that the attribute bar is defined here and the type is number.  And then we have four predefined functions that will be executed some moment of the same execution process.  First of all, we have the init function that we do something when the component first attacks the update function that we do something when the component data is updated.  For instance, if you change the value of one of the attributes using JavaScript, for instance, getting the element from the DOM and changing manually the value of one of these attributes, the update function will be executed.  We have the remove function that will do something when the component or its entity is detached and the tick function that is really important that we do something on every scene tick or frame.  Well, Pavia XR is a set of components for data visualization, but it includes components that are not just visual.  It includes components for query data, filtering data, and visualizing data.  So following this stack, the components starts with the query data.  But before moving to the next slide, I want to let you know that this QR at this link will redirect you to the A-frame documentation with more information about how to write a component and more details about it.  So the first components in the stacks are the components for query data. We call them queriers.  We have currently three types of components that retrieve data, three types of queries.  The query is JSON, the query is ES, and the query is GitHub.  The query is JSON, we retrieve data from our URL that has a JSON.  We have this simple sample to put here, the URL of the JSON, and the component will retrieve the data.  The query is relative data from an elastic sets database, and the query is GitHub, will retrieve the data from the GitHub REST API.  When the components retrieve the data, the component stores the data in one attribute of the component.  The next component is the filtered data component, a component that is attached to a query and filters the data that the query retrieves.  That's it. The component is still working, so we have to add more filters to the component.  The next component is the component that is called PISMapper.  This component maps the data fields to visualization properties.  For instance, this component is used for putting a field of the data as a hate in a 3D bar chart visualization.  Or put another field as the X axis and so on.  And finally, the final components of the tags are the components for visualization the data.  We have included so far the next one, the pie chart, the donut chart, the 3D and the two bar charts with two or three dimensions.  The 3D and 2D cylinders, the same that the 3D and 2D bar chart, but with the dimension of the cylinder.  The bar chart and the final component, the last one added is the code city component for visualization code as cities.  Returning to the second demo of the presentation, the demo that I did at the beginning of the presentation,  we are going to fill the empty zone that we saw in the lounge.  And in this case, we are going to add the components in the bar chart.  We are going to add a 2D visualization representing a bar chart with the configuration of the legend, the axis, the maximum height for normalized data.  We added a filter data as well and a mapper in order to put the fields in the X axis and in the height.  So this is the lounge completed, we have now our visualization in the empty zone and the example is now completed.  As you can see, it's really simple to add a visualization in HTML, just these three lines.  And this is more complicated because we added a filter data and a mapper,  but you can add just the component of visualization and put and digit the data.  And the next point is the code city component, so let's go for it.  But before starting with this component on the examples page of Bavia, there are visual examples of each component described in this presentation.  This is the link to the examples page.  And here you can see different squares with the different samples of each component.  And I want to leave these links here where all the information and the details about the component definition, the attributes of the components,  and the user guide for using the components.  So this first link redirects to the rhythm, where there are a small sample and all the API of each component.  And this other link is a component social guide with a step-by-step guide for using the components stack.  So if you want to take a little later, here are the links.  So focusing on the code city visualization where, or city visualization,  I want to say that the visualization relies on the city metaphor for visualizing data that has a tree format.  It's just data with a tree format representing as a city.  But we focus on the study of the visualization for visualizing code.  I mean, the city represents a software system.  Each building represents a file of the software system.  And the quarter hierarchy represents the folder hierarchy of each building.  And the major representatives are the height and the area of each building.  The height of the building represents the lines of code of the file and the area of each building represent the number of functions that the file code has.  Obviously, these values are normalized.  But adding more functionality to this visualization, we are currently working on the time evolution of the software city,  changing the layout of the city as the code is changing along the time,  observing how the building changes their area and their height,  or even disappear as the code changes between commits.  For moving between this time snapshot, there is a component called UINAPBar that is this one,  that allows the user to interact with it moving the city between the time snapshots.  This visualization is fully configurable with all these parameters.  I'm not going to stop here because there are a lot of them as you can see, but in this link,  there is the user guide with all the description of which one,  and again, a step-by-step user guide in order to understand the visualization of the component.  And the same with the definition of the component in the HTML file.  But well, there is an important point on visualization that is the data.  For producing the needed data for this visualization, we use a different set of tools that are in the Grimoire lab stack.  We are starting analyzing a repository using Gral.  Gral leverages on the git backend of Perthable and enhances it to set up a doc source code analysis.  Thus, it fetches the commit for the git repository and provides a mechanism to plug the Part 2's libraries focused on source code analysis.  Specifically, we use Gral to obtain a matrix related to code complexity of our repository,  and then Gral stores the data in the last search, in an last search database,  in the last search search engine.  Then we created a Python code included in the Bavia XR components repository in order to get the JSON data  with all the information that will be ingested in the code city component of Bavia XR.  Again, this is a link to a more detailed explanation about the process of getting the data.  And this is a complete use case with all the needed steps to create this time-evolving city,  step-by-step, using a specific use case.  In this video, I show the time-evolving city of the Shorting Hat project.  This is the link to the Shorting Hat project.  Well, I cannot say it right now because of the presentation.  And this is the link to the video.  I'm going to put just a little bit.  As you can see here, we can see the UINNAT bar with all the time-evolving snapshots that we can navigate.  And if we hover a building, we see the file that represents, and if we click on a quarter,  we see the folder that this quarter represents.  And, well, this is the visualization.  We have included as well some tips that I'm going to show you now.  For instance, this is a tip that explains, for instance, in this case, the interaction with the city.  And this explains a little what is the city about, what it represents.  And if we click on a dot in order to change the time-evolving snapshot, we can see how the city changes its layout.  For instance, in these two points, a file disappears.  There is another tip with instruction to use the navigation bar.  We can see how the city evolves.  In this case, we are moving from present to past, and we can see how the building disappears.  And, well, this visualization is completely compatible with the Euclid Quest and the smartphone,  and I said, when I set the smartphone, I said any device with a modern browser that supports WebXR,  but if you are using a VR glasses, it has been tested with Euclid Quest and Euclid Go.  You can use the controller for interacting with the city.  So if you click, as we can see in this example, we can change the same in the time-esnaps and see how the city evolves.  Just to finish, I want to show some other components that are under development right now.  Starting with the Iceland component, this one, that provides a new layout for the city visualization.  So the data is the same data from the cold city visualization that I already showed.  It's a three-data format, and we have the goal to have different Iceland that maybe can represent different software systems,  and we can see the evolution of the Iceland as the code of the software systems evolves.  The same as the other visualization, but with a new layout that can provide different features than the other layout can provide.  We are developing as well the Terrain visualization from Proginter Range that represent data,  and they taught them for dynamically changing some visualization between different set of data.  Of course, any other idea is more than welcome in the next months or so.  More components are coming soon for sure.  And now, actually, to conclude, this is another branch of research in BaviaXR, the branch of augmented reality.  I want to ask you if you are watching the presentation to use your smartphone to scan this QR right now.  Once you scan it, it will redirect you to a web page, and it will ask you for access to the camera.  I promise that I will not steal any data, trust me.  But I will let you to accept, and once the camera is activated, you will point the QR code again,  then you will see data visualization in augmented reality.  This is a video of the process, just in case you want to follow it.  So this is the link, it will redirect you to the web page, it will ask you for camera access.  And then if you accept the camera access, you will see in the middle of the QR some data visualization  related to the Grimoire Lab project.  Okay, so just in case you are interested in the BaviaXR project, we have a contributors guide to contribute to the project.  We are under the GPL version 3 license, and I just want to say that any feedback, any tomato or whatever is more than welcome.  And that's everything. Thank you very much for the organizers again and to you for your attention.  I'll let me do in the Q&A session, just in case these are my emails if you want to reach me after the program.  Thank you very much and see you right now.  Okay, the live should start very soon.  Okay.  Now, we are live, right? Yes.  Okay, so hello everyone. I hope you can see me and hear me.  Yes, I think so.  Well, thank you very much for watching and well, I'm here for the questions. So let's go.  I wanted to say that the slides are already linked on the FOSDEM Talk page, just in case you want to run the QR demos.  And well, I wanted to say that on the baby page, there are links to tutorials, to the live demos and all the information to build these things.  And if you have any question or suggestions, you can send me an email or you can open an issue in the repository.  I really appreciate it. So let's do it.  Okay, so let's see if there is any question.  Or to me, whatever you want.  What I'm going to do is I'm going to share my screen and live here the last demo of augmented reality, just in case if you want to run the demo with your smartphone.  Maybe this is a good idea.  Yeah, I think you can see here the last demo, because I think it's the most visual demo and you can run it just with your smartphone and your camera.  I hope you can see that we can have a beer there in Brussels.  Let's see what happens.  No questions.  I'm going to put the video just if you want to know how to do it.  So as I said in the presentation, you can go to the link, then the page asks you for for the camera permission, you should accept it.  As I said, I don't go I don't, I don't still any data so I don't steal any data.  So when the camera sets the pitch when you have the permission of the camera you see pointing to the qr augmented reality dashboard.  Just in case to, if you want to try it.  No questions.  I encourage you if you have a beer glasses to try the qr demos that are linked in the in the slides in the slides.  So, and if you have any feedback, please tell me this word me an email or open an issue, because we are currently working on, on adding more features to the VR integration, more, more interesting with controllers so please try it if you have a beer glasses and you can help me.  Okay.  So, I have a question here, maybe you can talk about how that is composed filter it is interesting. Yeah, I talked, I talked about that in the presentation in the body components in the body set of components.  We have components for query data that I said, the components query data, just when a Jason or criminalistic database or putting the gift, the gift has rest API.  And with this data, you can fit it with another component that is called filter data.  Once the data is squared, you can visualize it with the visualizer that I already saw. So, all the information is in the presentation I think in the, in the, in the least that I, that I, that I have added in the presentation links, due to the to all the information about how to build this kind of things but if you follow the slides you can just do it.  So, you should be able to do it.  And, well, as I said this runs in every modern browser so just try it is just five lines of HTML.  You know, it is works on web XR so it's pretty easy to use and pretty easy to configure. And as I said again, in the pages that I link in the presentation are full of information and step by step user guides and so on.
babiaxr_0_1607.png babiaxr_1608_1703.png babiaxr_1704_2063.png babiaxr_2064_3215.png babiaxr_3216_3395.png babiaxr_3396_3491.png babiaxr_3492_3551.png babiaxr_3552_3707.png babiaxr_3708_3779.png babiaxr_3780_4307.png babiaxr_4308_4403.png babiaxr_4404_4487.png babiaxr_4488_4535.png babiaxr_4536_4595.png babiaxr_4596_4763.png babiaxr_4764_4871.png babiaxr_4872_5543.png babiaxr_5544_6575.png babiaxr_6576_8639.png babiaxr_8640_17987.png babiaxr_17988_18167.png babiaxr_18168_18275.png babiaxr_18276_18347.png babiaxr_18348_18455.png babiaxr_18456_25415.png babiaxr_25416_26207.png babiaxr_26208_27983.png babiaxr_27984_32111.png babiaxr_32112_33539.png babiaxr_33540_42911.png babiaxr_42912_43031.png
you Hello everyone, first of all, thank you so much to the organizers for making this special for them and this JavaScript that's possible. I'm David Moreno and I'm going to present you Bavia XR Virtual Reality Data Visualizations using only Frontend and what is better to start than showing directly live demo? Well, technically, this is a video. So this is the first demo. Record it in a browser and show in a scene, a 3D scene, with a data visualization with some interaction with the keyboard for moving and the mouse for selecting and hovering. Now, as I said, this works in a browser, so as probably you notice, this is based on Web XR and this scene is also compatible with VR glasses. This example shows the same scene but using an Oculus Quest 2. And we can see that the data visualization is also compatible with the Oculus Quest 2 controller. Maybe it doesn't seem amazing but what if I tell you that this is the code for generating this scene? And yes, it's not technically code, it is just these few lines on HTML. This is possible using two scenes, A-Frame and Bavia components. I'm going to get deep into A-Frame and Bavia components in the presentation. So I'm going to show you another demo. This is the other example that I want to show you and well, this is HTML. If we add a set of libraries and more lines, we can create scenes like this one, a complete launch, like a museum, but showing data with the possibility of interacting with the charts using the cursor. And well, you can see that in these scenes there are different kinds of visualization. And one of the most important one is the one with the green base, this one, I'm going to stop the video here. That shows a city. This is one of the special visualization that Bavia has included. I will show you more information about it in the presentation, at the end of the presentation. And well, this is the same example of the launch, but using the VR glasses, Oculus Quest 2 as well. And well, it is completely compatible with the glasses and the control. You can select it with the right control. And the code, the lines of HTML are basically the same, but adding more entities. I'm going to explain what is an entity in the presentation as well. As you can see here, we have added the Bavia components script. And we define here the different things of the scene, the sky, the camera, the different visualizations, and so on. Perhaps you notice that there is an empty space in the middle of the scene. Don't worry, at the finish of the presentation, I will add a visualization there in order to show you how simple it is to add this kind of visualization in a 3D and VR scene using a frame. So going back to the presentation, I want to say that the presentation is full of QR codes and links to the examples, the documentation, and some more useful information that I'm going to show in the presentation. And now I will share the slides or they will be available now in the first and talk description. The first thing that I want to show is the main page of Bavia. Well, it's a common page. It includes useful information about the usage of the components, the documentation, how to build a scene, how to use the components, link to the samples, and so on. I just want to say that this is still working progress. We appreciate the feedback and if you want to contribute, the code is hosted on GILLAB. The essence of the code is GBL version 3. This is the link to the first example that I showed, and this is the other link to the launch example. You can try to enter the example using your smartphone, GBL glasses, or just the browser in your computer. So the main technology that Bavia uses is A-Frame. Bavia completely relies on A-Frame. And what is A-Frame? A-Frame is a web framework for building 3D AR VR experiences with HTML and the entity component. A-Frame is developed on top of 3DS and again, with this just few lines of HTML, we can create scenes like this one. And well, A-Frame uses the entity component system definition. So following its documentation, entities are contained objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty divs. Components are reusable models or data containers that can be attached to entities to provide appearance, behavior, and or functionality. Components are like plug-and-play for objects. All logic is implemented through components and we define different types of objects by mixing, marking, and configuring components. So Bavia uses components as its main library. And I'm not going to stop on systems because we are not using systems, but if you want more information about it, there is a link here with a QR that will redirect you to the A-Frame page. So specifically, entities are represented by the entity element and prototype. Components are represented by HTML attributes on an entity and systems are similar to components, but I'm not going to stop there because in Bavia we don't use systems. And what is the logic? The logic is in the component definition. The JavaScript code is there. And this is how the component has to be defined in A-Frame. First of all, we have the schema. The schema are the attributes in the HTML definition of the components. And we have to define the type of the attributes that we are going to use in the component. We have here this example and we see that the attribute bar is defined here and the type is number. And then we have four predefined functions that will be executed some moment of the same execution process. First of all, we have the init function that we do something when the component first attacks the update function that we do something when the component data is updated. For instance, if you change the value of one of the attributes using JavaScript, for instance, getting the element from the DOM and changing manually the value of one of these attributes, the update function will be executed. We have the remove function that will do something when the component or its entity is detached and the tick function that is really important that we do something on every scene tick or frame. Well, Pavia XR is a set of components for data visualization, but it includes components that are not just visual. It includes components for query data, filtering data, and visualizing data. So following this stack, the components starts with the query data. But before moving to the next slide, I want to let you know that this QR at this link will redirect you to the A-frame documentation with more information about how to write a component and more details about it. So the first components in the stacks are the components for query data. We call them queriers. We have currently three types of components that retrieve data, three types of queries. The query is JSON, the query is ES, and the query is GitHub. The query is JSON, we retrieve data from our URL that has a JSON. We have this simple sample to put here, the URL of the JSON, and the component will retrieve the data. The query is relative data from an elastic sets database, and the query is GitHub, will retrieve the data from the GitHub REST API. When the components retrieve the data, the component stores the data in one attribute of the component. The next component is the filtered data component, a component that is attached to a query and filters the data that the query retrieves. That's it. The component is still working, so we have to add more filters to the component. The next component is the component that is called PISMapper. This component maps the data fields to visualization properties. For instance, this component is used for putting a field of the data as a hate in a 3D bar chart visualization. Or put another field as the X axis and so on. And finally, the final components of the tags are the components for visualization the data. We have included so far the next one, the pie chart, the donut chart, the 3D and the two bar charts with two or three dimensions. The 3D and 2D cylinders, the same that the 3D and 2D bar chart, but with the dimension of the cylinder. The bar chart and the final component, the last one added is the code city component for visualization code as cities. Returning to the second demo of the presentation, the demo that I did at the beginning of the presentation, we are going to fill the empty zone that we saw in the lounge. And in this case, we are going to add the components in the bar chart. We are going to add a 2D visualization representing a bar chart with the configuration of the legend, the axis, the maximum height for normalized data. We added a filter data as well and a mapper in order to put the fields in the X axis and in the height. So this is the lounge completed, we have now our visualization in the empty zone and the example is now completed. As you can see, it's really simple to add a visualization in HTML, just these three lines. And this is more complicated because we added a filter data and a mapper, but you can add just the component of visualization and put and digit the data. And the next point is the code city component, so let's go for it. But before starting with this component on the examples page of Bavia, there are visual examples of each component described in this presentation. This is the link to the examples page. And here you can see different squares with the different samples of each component. And I want to leave these links here where all the information and the details about the component definition, the attributes of the components, and the user guide for using the components. So this first link redirects to the rhythm, where there are a small sample and all the API of each component. And this other link is a component social guide with a step-by-step guide for using the components stack. So if you want to take a little later, here are the links. So focusing on the code city visualization where, or city visualization, I want to say that the visualization relies on the city metaphor for visualizing data that has a tree format. It's just data with a tree format representing as a city. But we focus on the study of the visualization for visualizing code. I mean, the city represents a software system. Each building represents a file of the software system. And the quarter hierarchy represents the folder hierarchy of each building. And the major representatives are the height and the area of each building. The height of the building represents the lines of code of the file and the area of each building represent the number of functions that the file code has. Obviously, these values are normalized. But adding more functionality to this visualization, we are currently working on the time evolution of the software city, changing the layout of the city as the code is changing along the time, observing how the building changes their area and their height, or even disappear as the code changes between commits. For moving between this time snapshot, there is a component called UINAPBar that is this one, that allows the user to interact with it moving the city between the time snapshots. This visualization is fully configurable with all these parameters. I'm not going to stop here because there are a lot of them as you can see, but in this link, there is the user guide with all the description of which one, and again, a step-by-step user guide in order to understand the visualization of the component. And the same with the definition of the component in the HTML file. But well, there is an important point on visualization that is the data. For producing the needed data for this visualization, we use a different set of tools that are in the Grimoire lab stack. We are starting analyzing a repository using Gral. Gral leverages on the git backend of Perthable and enhances it to set up a doc source code analysis. Thus, it fetches the commit for the git repository and provides a mechanism to plug the Part 2's libraries focused on source code analysis. Specifically, we use Gral to obtain a matrix related to code complexity of our repository, and then Gral stores the data in the last search, in an last search database, in the last search search engine. Then we created a Python code included in the Bavia XR components repository in order to get the JSON data with all the information that will be ingested in the code city component of Bavia XR. Again, this is a link to a more detailed explanation about the process of getting the data. And this is a complete use case with all the needed steps to create this time-evolving city, step-by-step, using a specific use case. In this video, I show the time-evolving city of the Shorting Hat project. This is the link to the Shorting Hat project. Well, I cannot say it right now because of the presentation. And this is the link to the video. I'm going to put just a little bit. As you can see here, we can see the UINNAT bar with all the time-evolving snapshots that we can navigate. And if we hover a building, we see the file that represents, and if we click on a quarter, we see the folder that this quarter represents. And, well, this is the visualization. We have included as well some tips that I'm going to show you now. For instance, this is a tip that explains, for instance, in this case, the interaction with the city. And this explains a little what is the city about, what it represents. And if we click on a dot in order to change the time-evolving snapshot, we can see how the city changes its layout. For instance, in these two points, a file disappears. There is another tip with instruction to use the navigation bar. We can see how the city evolves. In this case, we are moving from present to past, and we can see how the building disappears. And, well, this visualization is completely compatible with the Euclid Quest and the smartphone, and I said, when I set the smartphone, I said any device with a modern browser that supports WebXR, but if you are using a VR glasses, it has been tested with Euclid Quest and Euclid Go. You can use the controller for interacting with the city. So if you click, as we can see in this example, we can change the same in the time-esnaps and see how the city evolves. Just to finish, I want to show some other components that are under development right now. Starting with the Iceland component, this one, that provides a new layout for the city visualization. So the data is the same data from the cold city visualization that I already showed. It's a three-data format, and we have the goal to have different Iceland that maybe can represent different software systems, and we can see the evolution of the Iceland as the code of the software systems evolves. The same as the other visualization, but with a new layout that can provide different features than the other layout can provide. We are developing as well the Terrain visualization from Proginter Range that represent data, and they taught them for dynamically changing some visualization between different set of data. Of course, any other idea is more than welcome in the next months or so. More components are coming soon for sure. And now, actually, to conclude, this is another branch of research in BaviaXR, the branch of augmented reality. I want to ask you if you are watching the presentation to use your smartphone to scan this QR right now. Once you scan it, it will redirect you to a web page, and it will ask you for access to the camera. I promise that I will not steal any data, trust me. But I will let you to accept, and once the camera is activated, you will point the QR code again, then you will see data visualization in augmented reality. This is a video of the process, just in case you want to follow it. So this is the link, it will redirect you to the web page, it will ask you for camera access. And then if you accept the camera access, you will see in the middle of the QR some data visualization related to the Grimoire Lab project. Okay, so just in case you are interested in the BaviaXR project, we have a contributors guide to contribute to the project. We are under the GPL version 3 license, and I just want to say that any feedback, any tomato or whatever is more than welcome. And that's everything. Thank you very much for the organizers again and to you for your attention. I'll let me do in the Q&A session, just in case these are my emails if you want to reach me after the program. Thank you very much and see you right now. Okay, the live should start very soon. Okay. Now, we are live, right? Yes. Okay, so hello everyone. I hope you can see me and hear me. Yes, I think so. Well, thank you very much for watching and well, I'm here for the questions. So let's go. I wanted to say that the slides are already linked on the FOSDEM Talk page, just in case you want to run the QR demos. And well, I wanted to say that on the baby page, there are links to tutorials, to the live demos and all the information to build these things. And if you have any question or suggestions, you can send me an email or you can open an issue in the repository. I really appreciate it. So let's do it. Okay, so let's see if there is any question. Or to me, whatever you want. What I'm going to do is I'm going to share my screen and live here the last demo of augmented reality, just in case if you want to run the demo with your smartphone. Maybe this is a good idea. Yeah, I think you can see here the last demo, because I think it's the most visual demo and you can run it just with your smartphone and your camera. I hope you can see that we can have a beer there in Brussels. Let's see what happens. No questions. I'm going to put the video just if you want to know how to do it. So as I said in the presentation, you can go to the link, then the page asks you for for the camera permission, you should accept it. As I said, I don't go I don't, I don't still any data so I don't steal any data. So when the camera sets the pitch when you have the permission of the camera you see pointing to the qr augmented reality dashboard. Just in case to, if you want to try it. No questions. I encourage you if you have a beer glasses to try the qr demos that are linked in the in the slides in the slides. So, and if you have any feedback, please tell me this word me an email or open an issue, because we are currently working on, on adding more features to the VR integration, more, more interesting with controllers so please try it if you have a beer glasses and you can help me. Okay. So, I have a question here, maybe you can talk about how that is composed filter it is interesting. Yeah, I talked, I talked about that in the presentation in the body components in the body set of components. We have components for query data that I said, the components query data, just when a Jason or criminalistic database or putting the gift, the gift has rest API. And with this data, you can fit it with another component that is called filter data. Once the data is squared, you can visualize it with the visualizer that I already saw. So, all the information is in the presentation I think in the, in the, in the least that I, that I, that I have added in the presentation links, due to the to all the information about how to build this kind of things but if you follow the slides you can just do it. So, you should be able to do it. And, well, as I said this runs in every modern browser so just try it is just five lines of HTML. You know, it is works on web XR so it's pretty easy to use and pretty easy to configure. And as I said again, in the pages that I link in the presentation are full of information and step by step user guides and so on.
much to the organizers for making this special browser, so as probably you notice, this is based A-Frame and Bavia components in the presentation. kinds of visualization. And one of the most visualizations, and so on. Perhaps you notice presentation, I will add a visualization there in order to show you how simple it is to add this kind of visualization in a 3D and VR scene using available now in the first and talk description. to the launch example. You can try to enter the technology that Bavia uses is A-Frame. Bavia A-Frame? A-Frame is a web framework for building again, with this just few lines of HTML, we can represented by HTML attributes on an entity and the component definition. The JavaScript code is function that will do something when the Pavia XR is a set of components for data query data, filtering data, and visualizing data. 3D and the two bar charts with two or three that the 3D and 2D bar chart, but with the city component for visualization code as cities. representing a bar chart with the configuration of Bavia, there are visual examples of each city metaphor for visualizing data that has a of the visualization for visualizing code. I currently working on the time evolution of the software city, changing the layout of the city as snapshots. This visualization is fully them as you can see, but in this link, there is visualization, we use a different set of tools case with all the needed steps to create this This is the link to the Shorting Hat project. snapshot, we can see how the city changes its city evolves. In this case, we are moving from see the evolution of the Iceland as the code of other visualization, but with a new layout that see data visualization in augmented reality. This very much for the organizers again and to you for can visualize it with the visualizer that I to use and pretty easy to configure. And as I