Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BabiaXR: Virtual Reality Data Visualizations fo...
Search
David Moreno Lumbreras
February 05, 2022
Technology
0
160
BabiaXR: Virtual Reality Data Visualizations for the browser
David Moreno Lumbreras
February 05, 2022
Tweet
Share
More Decks by David Moreno Lumbreras
See All by David Moreno Lumbreras
Exploring Visualization of Software-Related data in Extended Reality - Thesis dissertation
dlumbrer
0
18
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
39
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
110
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
170
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
71
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
130
BabiaXR: Virtual Reality Data Visualizations using only Front-End
dlumbrer
0
180
VBoard, Web dashboards in VR and AR
dlumbrer
0
140
VBoard, web dashboards in VR and AR
dlumbrer
0
150
Other Decks in Technology
See All in Technology
All you need to know about InnoDB Primary Keys
lefred
0
120
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
630
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
100
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
340
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
460
Larkご案内資料
customercloud
PRO
0
600
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
4.6k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
180
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
440
Culture Deck
optfit
0
260
Postman Vault を使った秘密情報の安全な管理
nagix
0
120
AndroidデバイスにFTPサーバを建立する
e10dokup
0
230
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
RailsConf 2023
tenderlove
29
990
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Done Done
chrislema
182
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
260
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
BabiaXR Virtual Reality Data Visualizations for the browser https://babiaxr.gitlab.io David
Moreno -
[email protected]
&
[email protected]
None
https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/barsmap/
https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/1.0.11/
A-Frame
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
Component https://aframe.io/docs/1.2.0/introduction/writing-a-component.html
Queriers babia-queryjson <a-entity id="data" babia-queryjson="url: ./data.json;"> </a-entity> babia-queryes babia-querygithub
Data management babia-filter Work In Progress <a-entity babia-filter="from: data; filter:
age=2017"></a-entity> babia-treebuilder
1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D cylinders
5. Bubbles 6. Network . . Visualizations
Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D
cylinders 5. Bubbles 6. Network . . City
Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/
Guides Components API https://babiaxr.gitlab.io/apis/ Tutorials https://babiaxr.gitlab.io/tutorials/
City https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/
Metrics Layout Tree structure for districts/buildings Building Geometry height area
(depth/width) Other Color map for numeric field
Metrics Treemap - Tree structure for districts/buildings Building Geometry height
area (depth/width) Other Color map for numeric field
Quick full example
Quick full example
Quick full example
Quick full example
Boats and City
Full Configuration
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
None
Time evolution
Multiuser Networked component: https://github.com/networked-aframe/networked-aframe
Desert: https://tinyurl.com/babiaFOSDEM22 With avatar selection: https://tinyurl.com/babiaAvatars Multiuser
Other components babia-terrain babia-lookat More coming soon!
bonus
WebRTC + Aframe + NPM upload
Contribute GPLv3 License Contributing guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md
BabiaXR Virtual Reality Data Visualizations for the browser https://babiaxr.gitlab.io David
Moreno -
[email protected]
&
[email protected]