Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BabiaXR Visualización de Datos en Realidad Virtual

BabiaXR Visualización de Datos en Realidad Virtual

Existen muchas herramientas que permiten analizar datos de diferentes maneras, la mayoría se componen de una aplicación full-stack, pero las librerías de front-end conocidas limitan la visualización a las dos dimensiones, muy pocas tratan de visualizar datos en navegador integrando otras tecnologías como WebXR. Este es el objetivo de BabiaXR, ya que se trata de un set de módulos front-end para análisis de datos en VR (realidad virtual) y 3D.

Las visualizaciones de datos en BabiaXR están basadas en A-Frame y Three.js, ofreciendo una colección de componentes que permiten realizar queries, filtrar data y crear diferentes tipos de gráficos, todo ello desarrollado utilizando simplemente tecnologías front-end. Entre las visualizaciones, aparecen algunas comunes como gráficos de barras, gráficos circulares, gráficos de burbujas, etc., aunque se está yendo más allá y explorando nuevas formas de mostrar datos en 3D y VR.

Un ejemplo es la representación de proyectos de software utilizando la metáfora de la ciudad, en la que se muestra un sistema de software como una ciudad en la que cada edificio un fichero y cada barrio el árbol de directorios al que pertenece. En esta charla, hablaremos sobre el proyecto BabiaXR, mostrando distintos ejemplos del potencial de WebXR y A-Frame con diferentes visualizaciones.

La idea es mostrar lo fácil que puede ser desarrollar este tipo de módulos simplemente utilizando JavaScript y otras librerías front-end. Por último, utilizaremos datos conocidos relacionados con el COVID-19 y los mostraremos haciendo uso de BabiaXR.

Web del proyecto: https://babiaxr.gitlab.io/ / https://gitlab.com/babiaxr/aframe-babia-components

David Moreno Lumbreras

June 25, 2021
Tweet

Transcript

  1. Entity Component System Entity - <a-entity> Components - HTML attributes

    on <a-entity>‘s System - Systems are similar to components in definition https://aframe.io/docs/1.2.0/introduction/entity-component-system.html
  2. 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D cylinders

    5. Bubbles 6. Network . . Visualizations
  3. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D

    cylinders 5. Bubbles 6. Network . . City
  4. Metrics Treemap - Tree structure for districts/buildings Building Geometry height

    area (depth/width) Other Color map for numeric field
  5. Do you remember the empty space in the demo museum?

    IT’S CODE TIME! <a-entity id = "bar" babia-bars='legend: true; axis: true; heightMax: 15; from: simplebardata; x_axis: date; height: deaths' position="-2.25 0.275 0" rotation="0 0 0" scale = "0.5 0.5 0.5"> </a-entity> Add visualization