Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
BabiaXR: Virtual Reality Data Visualizations us...
Search
David Moreno Lumbreras
February 06, 2021
Programming
270
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
BabiaXR: Virtual Reality Data Visualizations using only Front-End
Fosdem 2021 (JavaScript devroom)
David Moreno Lumbreras
February 06, 2021
Transcript
26 slides
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]
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
70
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
160
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
210
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
240
BabiaXR: Virtual Reality Data Visualizations for the browser
dlumbrer
0
260
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
120
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
200
VBoard, Web dashboards in VR and AR
dlumbrer
0
240
VBoard, web dashboards in VR and AR
dlumbrer
0
260
Other Decks in Programming
See All in Programming
느린 네트워크와 저사양 디바이스 사용자를 위한 웹뷰 로딩 시간 개선기
kmkim
1
240
小さなアプリを作って公開するまで
onozaty
0
180
Engineering Biometric UX Across Android Versions | DroidKnights 2026
ryunen344
1
210
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
rkaga
6
2.3k
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
15
12k
仕様駆動開発入門 (何を作るかを先に決めて渡す) | 目指せ Kiro マスター 05
inariku
PRO
2
160
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
bicstone
2
650
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
250
AI駆動開発4年目の現在地(『あなたはFDEになるべきか?』イベント資料)
kumaiu
0
620
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
utakaha
4
4.4k
AI Augmentation Techniques with Liberty
ivargrimstad
1
480
Seven New Principles of Software Engineering
yegor256
0
500
Featured
See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
3k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
690
Deep Space Network (abreviated)
tonyrice
0
420
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
2
400
Prompt Engineering for Job Search
mfonobong
0
580
We Are The Robots
honzajavorek
0
440
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7.1k
Git: the NoSQL Database
bkeepers
PRO
433
67k
Google's AI Overviews - The New Search
badams
0
1.7k