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
65
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
140
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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
210
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
98
36k
Hack Claude Code with Claude Code
choplin
6
2.5k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.5k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
720
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
290
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
320
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
930
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
580
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
320
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Facilitating Awesome Meetings
lara
54
6.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How to Ace a Technical Interview
jacobian
278
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Cult of Friendly URLs
andyhume
79
6.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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]