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 using only Front-End
Search
David Moreno Lumbreras
February 06, 2021
Programming
0
130
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
15
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
14
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
72
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
120
BabiaXR: Virtual Reality Data Visualizations for the browser
dlumbrer
0
100
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
65
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
84
VBoard, Web dashboards in VR and AR
dlumbrer
0
100
VBoard, web dashboards in VR and AR
dlumbrer
0
120
Other Decks in Programming
See All in Programming
CSC307 Lecture 05
javiergs
PRO
0
210
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
日付と正規化
megmogmog1965
0
140
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
CSC307 Lecture 10
javiergs
PRO
0
310
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Cult of Friendly URLs
andyhume
75
5.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Agile that works and the tools we love
rasmusluckow
325
20k
For a Future-Friendly Web
brad_frost
173
9.2k
How to train your dragon (web standard)
notwaldorf
79
5.5k
We Have a Design System, Now What?
morganepeng
46
7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
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]