BabiaXR: Virtual Reality Data Visualizations using only Front-End

Slide 1

Slide 1 text

BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David Moreno [email protected] [email protected]

Slide 2

Slide 2 text

Introduction In the beginning it was CodeCity

Slide 3

Slide 3 text

https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/3dbars_chart/

Slide 4

Slide 4 text

https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/fosdem/completed/

Slide 5

Slide 5 text

A-Frame

Slide 6

Slide 6 text

Entity Component System Entity - Components - HTML attributes on ‘s System - Systems are similar to components in deﬁnition https://aframe.io/docs/1.1.0/introduction/entity-component-system.html

Slide 7

Slide 7 text

Component https://aframe.io/docs/1.1.0/introduction/writing-a-component.html

Slide 8

Slide 8 text

queriers babiaxr-querier_json babiaxr-querier_es babiaxr-querier_github

Slide 9

Slide 9 text

filterdata babiaxr-filterdata (for filtering) - WIP

Slide 10

Slide 10 text

mapping babiaxr-vismapper (maps data properties to visualization properties)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/

Slide 14

Slide 14 text

User guide Components API https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/README.md Components User Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_CHARTS_WITH_QUERIER.md

Slide 15

Slide 15 text

CodeCity https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/

Slide 16

Slide 16 text

Time evolution City Layout From present to past and from past to present Empty zones = ﬁles that used to exist/will exist UI Navbar For moving between time snapshots

Slide 17

Slide 17 text

Conﬁguration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md

Slide 18

Slide 18 text

Conﬁguration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md

Slide 19

Slide 19 text

Get the Data Tutorial: https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/tools

Slide 20

Slide 20 text

Full Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/ master/docs/EXAMPLE_CREATE_CITY_WORKFLOW.md

Slide 21

Slide 21 text

Example https://youtu.be/VJ-cbAmD2_M https://github.com/chaoss/grimoirelab-sortinghat

Slide 22

Slide 22 text

other components Islands (representing code as islands, WIP)

Slide 23

Slide 23 text

other components Terrain Totem (for dynamically changing between set of data) ... More coming soon!

Slide 24

Slide 24 text

bonus

Slide 25

Slide 25 text

Contribute GPLv3 License Contributing Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md

Slide 26

Slide 26 text

BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David Moreno [email protected] [email protected]