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

BabiaXR: Virtual Reality Data Visualizations fo...

Avatar for David Moreno Lumbreras David Moreno Lumbreras
February 05, 2022
Technology
0
220

BabiaXR: Virtual Reality Data Visualizations for the browser

Avatar for David Moreno Lumbreras

David Moreno Lumbreras

February 05, 2022
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
170
BabiaXR: Virtual Reality Data Visualizations for the Web
Avatar for David Moreno Lumbreras dlumbrer
0
210
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
BabiaXR: Virtual Reality Data Visualizations using only Front-End
Avatar for David Moreno Lumbreras dlumbrer
0
230
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 Technology

See All in Technology
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
220
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
110
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
1
270
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
250
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.4k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
360
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
150
Exadata Fleet Update
Avatar for oracle4engineer oracle4engineer
PRO
0
1.1k
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
150
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
450
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
470
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k

Featured

See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
240
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
120
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
120
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
460
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
70
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k

Transcript

  1. BabiaXR Virtual Reality Data Visualizations for the browser https://babiaxr.gitlab.io David

    Moreno - [email protected] & [email protected]
  2. None

  3. https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/barsmap/

  4. https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/1.0.11/

  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.2.0/introduction/entity-component-system.html

  7. Component https://aframe.io/docs/1.2.0/introduction/writing-a-component.html

  8. Queriers babia-queryjson <a-entity id="data" babia-queryjson="url: ./data.json;"> </a-entity> babia-queryes babia-querygithub

  9. Data management babia-filter Work In Progress <a-entity babia-filter="from: data; filter:

    age=2017"></a-entity> babia-treebuilder

  10. 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D cylinders

    5. Bubbles 6. Network . . Visualizations

  11. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D

    cylinders 5. Bubbles 6. Network . . City

  12. Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/

  13. Guides Components API https://babiaxr.gitlab.io/apis/ Tutorials https://babiaxr.gitlab.io/tutorials/

  14. City https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/

  15. Metrics Layout Tree structure for districts/buildings Building Geometry height area

    (depth/width) Other Color map for numeric field

  16. Metrics Treemap - Tree structure for districts/buildings Building Geometry height

    area (depth/width) Other Color map for numeric field

  17. Quick full example

  18. Quick full example

  19. Quick full example

  20. Quick full example

  21. Boats and City

  22. Full Configuration

  23. Get the Data Tutorials: https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/tools Boats API: https://babiaxr.gitlab.io/apis/charts/#babia-boats-component

  24. None

  25. Time evolution

  26. Multiuser Networked component: https://github.com/networked-aframe/networked-aframe

  27. Desert: https://tinyurl.com/babiaFOSDEM22 With avatar selection: https://tinyurl.com/babiaAvatars Multiuser

  28. Other components babia-terrain babia-lookat More coming soon!

  29. bonus

  30. WebRTC + Aframe + NPM upload

  31. Contribute GPLv3 License Contributing guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md

  32. BabiaXR Virtual Reality Data Visualizations for the browser https://babiaxr.gitlab.io David

    Moreno - [email protected] & [email protected]