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
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
320
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
180
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
380
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
460
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
630
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
240
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
210
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
550
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
130
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
550
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.6k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
3.4k

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
790
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
270
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
300
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
230
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
200
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
940

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]