BabiaXR: Virtual Reality Data Visualizations using only Front-End

Fosdem 2021 (JavaScript devroom)

Transcript

1. BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David Moreno dmoreno@bitergia.com dmorenolumb@gmail.com
2. Introduction In the beginning it was CodeCity
3. https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/3dbars_chart/
4. https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/fosdem/completed/
5. A-Frame
6. 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.1.0/introduction/entity-component-system.html
7. Component https://aframe.io/docs/1.1.0/introduction/writing-a-component.html
8. queriers babiaxr-querier_json babiaxr-querier_es babiaxr-querier_github
9. filterdata babiaxr-filterdata (for filtering) - WIP
10. mapping babiaxr-vismapper (maps data properties to visualization properties)
11. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D cylinders 5. Bubbles . . .
12. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D cylinders 5. Bubbles . . . 6. CodeCity
13. Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/
14. 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
15. CodeCity https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/
16. Time evolution City Layout From present to past and from past to present Empty zones = files that used to exist/will exist UI Navbar For moving between time snapshots
17. Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md
18. Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md
19. Get the Data Tutorial: https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/tools
20. Full Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/ master/docs/EXAMPLE_CREATE_CITY_WORKFLOW.md
21. Example https://youtu.be/VJ-cbAmD2_M https://github.com/chaoss/grimoirelab-sortinghat
22. other components Islands (representing code as islands, WIP)
23. other components Terrain Totem (for dynamically changing between set of data) ... More coming soon!
24. bonus
25. Contribute GPLv3 License Contributing Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md
26. BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David Moreno dmoreno@bitergia.com dmorenolumb@gmail.com