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
100
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
8
OPENSYM & OSS 2023 GATHER TOGETHER
dlumbrer
0
12
Visualize the NPM dependencies city ecosystem of your node project in VR
dlumbrer
0
68
BabiaXR: Virtual Reality Data Visualizations for the Web
dlumbrer
0
100
BabiaXR: Virtual Reality Data Visualizations for the browser
dlumbrer
0
72
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
dlumbrer
0
60
BabiaXR Visualización de Datos en Realidad Virtual
dlumbrer
0
65
VBoard, Web dashboards in VR and AR
dlumbrer
0
77
VBoard, web dashboards in VR and AR
dlumbrer
0
95
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
59
29k
PHPはいつから死んでいるかの調査
chiroruxx
1
400
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
Git Lint
bkuhlmann
4
750
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
910
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
310
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
330
Snowflakeで眠ったデータを起こそう!
estie
0
120
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
25
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Navigating Team Friction
lara
178
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
YesSQL, Process and Tooling at Scale
rocio
164
13k
We Have a Design System, Now What?
morganepeng
43
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Automating Front-end Workflow
addyosmani
1356
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Thoughts on Productivity
jonyablonski
58
3.8k
What's in a price? How to price your products and services
michaelherold
237
11k
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]