Data Visualization in immersive environments: Aframe and BabiaXR

Acme Design is a full service design agency.

Juan Romero-Luis and Alberto Sánchez Acedo

https://bit.ly/afbabia

Aframe emerging tech

https://aframe.io/

https://bit.ly/afbabia

BabiaXR based on Aframe tech

https://babiaxr.gitlab.io/

https://bit.ly/afbabia

<etiqueta atributo ="valor">

HTML (a reminder)

<a href="url"></a>

<img src="ruta/nombre.extension">

<etiqueta atributo ="valor">

Afame based in HTML

<a-entity camera-position="0 0 0"></a-entity>

<a-light type="ambient" intensity="1" position="0 2 0"></a-light>

<a-box  depth="5" height="5" width="5" ></a-box>

<a-sphere position="0 0 0"></a-sphere>

https://jsfiddle.net/

https://oluisjuan.github.io/LongCovid-Pilot/ 
https://literate-substantial-fuchsia.glitch.me/ 

Aframe: first steps

set, ready...

1

Aframe Basic Scripts scene

3

Changing camera positiion

5

Our first <abox>

(Exercise)

2

Reference sphere

(position= "0 0 0")

4

Environment configuration

Resource: 360 image.

6

Light points

8

Final results

7

<abox> textures

Floor texture: image.

Walls textures: image.

BabiaXR: first steps

set, ready...

Types of charts

Babia components

a

Copy code for inline babia-pie chart

c

Convert CSV to JSON

b

Get data (only Agricultura)

d

Change key to: Month and size: Value 

babia-pie in-line

a

Download data.

Open Data

c

Upload data to server (already done)

b

Reorganize data to barsmap format

[Month, Sector, Value]

d

Link data in our project

babia-barsmap off-line

e

Final Results

Data Visualization in immersive environments: Aframe and BabiaXR

By Juan Romero-Luis

Data Visualization in immersive environments: Aframe and BabiaXR

  • 68

More from Juan Romero-Luis

  • Metodologías activas aplicadas a la creación de videojuegos para fomentar el pensamiento crítico sobre sostenibilidad y economía circular
    Juan Romero-Luis
    32