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
230

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
40
OPENSYM & OSS 2023 GATHER TOGETHER
Avatar for David Moreno Lumbreras dlumbrer
0
99
Visualize the NPM dependencies city ecosystem of your node project in VR
Avatar for David Moreno Lumbreras dlumbrer
0
160
BabiaXR: Virtual Reality Data Visualizations for the Web
Avatar for David Moreno Lumbreras dlumbrer
0
210
BabiaXR: Virtual Reality Data Visualizations for the browser
Avatar for David Moreno Lumbreras dlumbrer
0
220
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
Avatar for David Moreno Lumbreras dlumbrer
0
100
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
200
VBoard, web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
190

Other Decks in Programming

See All in Programming
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
240
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
600
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
440
AI & Enginnering
Avatar for codelynx codelynx
0
110
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
140
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
600
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
890
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
160
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140

Featured

See All Featured
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
400
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
46

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]