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

BabiaXR: Virtual Reality Data Visualizations us...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for David Moreno Lumbreras David Moreno Lumbreras
February 06, 2021
Programming
0
240

BabiaXR: Virtual Reality Data Visualizations using only Front-End

Fosdem 2021 (JavaScript devroom)

Avatar for David Moreno Lumbreras

David Moreno Lumbreras

February 06, 2021
Tweet

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
41
OPENSYM & OSS 2023 GATHER TOGETHER
Avatar for David Moreno Lumbreras dlumbrer
0
100
Visualize the NPM dependencies city ecosystem of your node project in VR
Avatar for David Moreno Lumbreras dlumbrer
0
170
BabiaXR: Virtual Reality Data Visualizations for the Web
Avatar for David Moreno Lumbreras dlumbrer
0
220
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
160
VBoard, Web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
210
VBoard, web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
190

Other Decks in Programming

See All in Programming
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
200
Claude Code Skill入門
Avatar for maya mayahoney
0
400
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
270
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1k
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
0
300
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
Avatar for tak tak848
0
230
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
180
Codex の「自走力」を高める
Avatar for yorifuji yorifuji
0
1.2k
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
590
エンジニアの「手元の自動化」を加速するn8n 2026.02.27
Avatar for 西尾義英 symy2co
0
160
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
650
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
1.1k

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
790
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
810
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
220
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
270
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
170

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]