Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BabiaXR: Virtual Reality Data Visualizations us...

Avatar for David Moreno Lumbreras David Moreno Lumbreras
February 06, 2021
Programming
0
230

BabiaXR: Virtual Reality Data Visualizations using only Front-End

Fosdem 2021 (JavaScript devroom)

Avatar for David Moreno Lumbreras

David Moreno Lumbreras

February 06, 2021
Tweet

More Decks by David Moreno Lumbreras

See All by David Moreno Lumbreras
Exploring Visualization of Software-Related data in Extended Reality - Thesis dissertation
Avatar for David Moreno Lumbreras dlumbrer
0
40
OPENSYM & OSS 2023 GATHER TOGETHER
Avatar for David Moreno Lumbreras dlumbrer
0
99
Visualize the NPM dependencies city ecosystem of your node project in VR
Avatar for David Moreno Lumbreras dlumbrer
0
170
BabiaXR: Virtual Reality Data Visualizations for the Web
Avatar for David Moreno Lumbreras dlumbrer
0
210
BabiaXR: Virtual Reality Data Visualizations for the browser
Avatar for David Moreno Lumbreras dlumbrer
0
220
CodeCity: On-Screen or in Virtual Reality? - VISSOFT 2021
Avatar for David Moreno Lumbreras dlumbrer
0
100
BabiaXR Visualización de Datos en Realidad Virtual
Avatar for David Moreno Lumbreras dlumbrer
0
160
VBoard, Web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
200
VBoard, web dashboards in VR and AR
Avatar for David Moreno Lumbreras dlumbrer
0
190

Other Decks in Programming

See All in Programming
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
CSC307 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
660
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
220
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
MUSUBIXとは
Avatar for Hisaho nahisaho
0
140
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.3k
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.4k
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
100
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
240

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
440
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910

Transcript

  1. BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David

    Moreno [email protected] [email protected]

  2. Introduction In the beginning it was CodeCity

  3. https://babiaxr.gitlab.io/aframe-babia-components/examples/charts/3dbars_chart/

  4. https://babiaxr.gitlab.io/aframe-babia-components/examples/demos/fosdem/completed/

  5. A-Frame

  6. 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

  7. Component https://aframe.io/docs/1.1.0/introduction/writing-a-component.html

  8. queriers babiaxr-querier_json babiaxr-querier_es babiaxr-querier_github

  9. filterdata babiaxr-filterdata (for filtering) - WIP

  10. mapping babiaxr-vismapper (maps data properties to visualization properties)

  11. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D

    cylinders 5. Bubbles . . .

  12. Visualizations 1. Pie 2. Doughnut 3. 3D/2D bars 4. 3D/2D

    cylinders 5. Bubbles . . . 6. CodeCity

  13. Examples babiaxr-vismapper (maps data properties to visualization properties) https://babiaxr.gitlab.io/aframe-babia-components/

  14. 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

  15. CodeCity https://babiaxr.gitlab.io/aframe-babia-components/examples/codecityjs/basic/

  16. 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

  17. Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md

  18. Configuration https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/HOW_TO_TIME_EVOLVE_CITY.md

  19. Get the Data Tutorial: https://gitlab.com/babiaxr/aframe-babia-components/-/tree/master/tools

  20. Full Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/ master/docs/EXAMPLE_CREATE_CITY_WORKFLOW.md

  21. Example https://youtu.be/VJ-cbAmD2_M https://github.com/chaoss/grimoirelab-sortinghat

  22. other components Islands (representing code as islands, WIP)

  23. other components Terrain Totem (for dynamically changing between set of

    data) ... More coming soon!

  24. bonus

  25. Contribute GPLv3 License Contributing Guide https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/docs/CONTRIBUTING.md

  26. BabiaXR Virtual Reality Data Visualizations using only Front-End https://babiaxr.gitlab.io David

    Moreno [email protected] [email protected]