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 us...
Search
David Moreno Lumbreras
February 06, 2021
Programming
0
210
BabiaXR: Virtual Reality Data Visualizations using only Front-End
Fosdem 2021 (JavaScript devroom)
David Moreno Lumbreras
February 06, 2021
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
22
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
68
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
140
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
190
BabiaXR: Virtual Reality Data Visualizations for the browser
dlumbrer
0
190
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
74
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
150
VBoard, Web dashboards in VR and AR
dlumbrer
0
170
VBoard, web dashboards in VR and AR
dlumbrer
0
180
Other Decks in Programming
See All in Programming
Go製CLIツールをnpmで配布するには
syumai
0
760
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
AIのメモリー
watany
11
1.1k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
740
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Code Review Best Practice
trishagee
69
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Side Projects
sachag
455
43k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David
Moreno
[email protected]
[email protected]
Introduction In the beginning it was CodeCity
https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/3dbars_chart/
https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/fosdem/completed/
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.1.0/introduction/entity-component-system.html
Component https://aframe.io/docs/1.1.0/introduction/writing-a-component.html
queriers babiaxr-querier_json babiaxr-querier_es babiaxr-querier_github
filterdata babiaxr-filterdata (for filtering) - WIP
mapping babiaxr-vismapper (maps data properties to visualization properties)
Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D
cylinders 5. Bubbles . . .
Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D
cylinders 5. Bubbles . . . 6. CodeCity
Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/
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
CodeCity https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/
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
Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md
Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md
Get the Data Tutorial: https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/tools
Full Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/ master/docs/EXAMPLE_CREATE_CITY_WORKFLOW.md
Example https://youtu.be/VJ-cbAmD2_M https://github.com/chaoss/grimoirelab-sortinghat
other components Islands (representing code as islands, WIP)
other components Terrain Totem (for dynamically changing between set of
data) ... More coming soon!
bonus
Contribute GPLv3 License Contributing Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md
BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David
Moreno
[email protected]
[email protected]