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

BabiaXR: Virtual Reality Data Visualizations us...

Avatar for David Moreno Lumbreras David Moreno Lumbreras
February 06, 2021
Programming
250
0

BabiaXR: Virtual Reality Data Visualizations using only Front-End

Fosdem 2021 (JavaScript devroom)

Avatar for David Moreno Lumbreras

David Moreno Lumbreras

February 06, 2021

More Decks by David Moreno Lumbreras

See All by David Moreno Lumbreras
Exploring Visualization of Software-Related data in Extended Reality - Thesis dissertation
Avatar for David Moreno Lumbreras dlumbrer
0
56
OPENSYM & OSS 2023 GATHER TOGETHER
Avatar for David Moreno Lumbreras dlumbrer
0
120
Visualize the NPM dependencies city ecosystem of your node project in VR
Avatar for David Moreno Lumbreras dlumbrer
0
180
BabiaXR: Virtual Reality Data Visualizations for the Web
Avatar for David Moreno Lumbreras dlumbrer
0
230
BabiaXR: Virtual Reality Data Visualizations for the browser
Avatar for David Moreno Lumbreras dlumbrer
0
230
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
Avatar for David Moreno Lumbreras dlumbrer
0
110
BabiaXR Visualización de Datos en Realidad Virtual
Avatar for David Moreno Lumbreras dlumbrer
0
180
VBoard, Web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
220
VBoard, web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
210

Other Decks in Programming

See All in Programming
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
160
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
260
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
Avatar for ming ming_ayami
0
110
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
630
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
510
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
770
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
460
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
120
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
150
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
130
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成（CC Night 2026）
Avatar for Hiroki Uemura wemra
1
110
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
200

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
220
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
250
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
51k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
360
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
550
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
190
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
380

Transcript

  1. BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David

    Moreno [email protected] [email protected]

  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 [email protected] [email protected]