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
220
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
26
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
78
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
150
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
200
BabiaXR: Virtual Reality Data Visualizations for the browser
dlumbrer
0
210
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
82
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
150
VBoard, Web dashboards in VR and AR
dlumbrer
0
180
VBoard, web dashboards in VR and AR
dlumbrer
0
180
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
300
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
300
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
470
オープンソースソフトウェアへの解像度🔬
utam0k
16
3.1k
CSC305 Lecture 05
javiergs
PRO
0
220
Catch Up: Go Style Guide Update
andpad
0
230
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.4k
Developer Joy - The New Paradigm
hollycummins
1
200
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
580
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Designing for humans not robots
tammielis
254
26k
Building Applications with DynamoDB
mza
96
6.7k
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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]