Universidad Rey Juan Carlos ESCUELA TECNICA´ SUPERIOR DE INGENIER´IA DE TELECOMUNICACION´ INGENIER´IA DE TELECOMUNICACION´ PROYECTO FIN DE CARRERA Virtual Reality Data Dashboard Autor: Francisco Aguilar Hidalgo Tutor: Jes´usM. Gonz´alezBarahona Curso acad´emico: 2016/2017 Proyecto Fin de Carrera Virtual Reality Data Dashboard Autor: Francisco Aguilar Hidalgo Tutor: Jes´usM. Gonz´alezBarahona La defensa del presente Proyecto Fin de Carrera se realiz´oel d´ıa 2017, siendo calificada por el siguiente tribunal: Presidente: Secretario: Vocal: y habiendo obtenido la siguiente calificaci´on: Calificaci´on: Fuenlabrada, a 2017 Una imagen dice m´asque mil palabras. Acknowledgements En primer lugar, quiero agradecer la oportunidad que Jes´usM. Barahona me ha ofrecido para realizar este proyecto y su dedicaci´onen el mismo. Ha sido un gran apoyo durante todo el camino recorrido en este proyecto siempre d´andomelos mejores consejos posibles. Tambi´en agradecer a Adri´anAlonso y David Moreno del departamento y creadores de THREEDC y VBoard-UI por su colaboraci´ony ayuda. En segundo lugar, quiero agradecer a todos mis amigos que me han ayudado a lo largo de este camino. Ofreci´endomesu apoyo, cari~noy ´animosde forma incondicional. Muchos de ellos los he conocido en la universidad y ahora forman una parte muy importante de mi vida. Juntos hemos pasado grandes experiencias durante la carrera y despu´esy espero que siga siendo as´ıpor mucho tiempo. A mis amigos de siempre que son un gran apoyo, con ellos he madurado a trav´es de los a~nosy compartido muchas primeras experiencias. En especial agradecer a mi novia Elena por su paciencia y comprensi´onconmigo ayud´andome en todo momento. Por ´ultimoquiero agradecer a mi familia, ellos son los que me han guiado hasta aqu´ı. Siempre han estado cuando les he necesitado y han hecho grandes sacrificios por m´ı. Me han transmitido todos sus valores y ense~nadolas cosas importantes de la vida. Para m´ıellos son lo m´asimportante y una gran parte de lo que soy se lo debo a ellos. A todos vosotros os dedico mi proyecto. vii Abstract Nowadays data visualization is one of the main ways of analyzing them. The need to analyse large data-sets generated by the current society is very important to help in decision making. Currently the tools that allow data visualizations perform 2D graphics. The main form of diffusion is through web technologies, among other reasons, for its ease of use and accessibility. The main objective of the project is the creation of a tool that allows creat- ing visualizations of data with 3D graphics in a web environment using current web technologies. This tool also offers user interaction for data exploration and integration with a data analysis engine that enhances the ease of use of the tool. It also aims to offer the same 3D scene on a virtual reality enviroment to have a more inmersive experience. All the code and its examples are open source. The information is on the specific web of the project1. 1https://fran-aguilar.github.io/ ix Resumen Hoy en d´ıala visualizaci´onde datos es una de las principales v´ıasde an´alisisde los mismos. La necesidad de poder analizar la gran cantidad de datos generados por la sociedad actual es muy importante para ayudar en la toma de decisiones. Actualmente las herramientas que permiten realizar visualizaciones de datos re- alizan gr´aficosen 2D. La forma principal de difusi´ones mediante tecnolog´ıasweb, entre otros motivos, por su facilidad de uso y accesibilidad. El objetivo principal del presente proyecto es la creaci´onde una herramienta que permita crear visualizaciones de datos con gr´aficos3D en un entorno web uti- lizando las tecnolog´ıasweb actuales. La herramienta tambi´enofrece interacci´on con el usuario para la exploraci´onde los datos y la integraci´oncon un motor de an´alisisde datos donde se potencia la facilidad de uso de la herramienta. Tambi´en tiene como objetivo ofrecer esa misma escena 3D en un entorno de realidad vir- tual para tener experiencia m´asinmersiva. Todo el codigo y sus ejemplos son c´odigoabierto. La informaci´onest´aen la web especifica del proyecto2. 2https://fran-aguilar.github.io/ xi Contents Acknowledgements vii Abstract ix Resumen xi Contents xiii Figure index xvii Acronyms xix 1 Introduction1 1.1 Current context............................. 1 1.2 Objetives ................................ 2 2 Used Technologies5 2.1 HTML.................................. 5 2.2 JavaScript................................ 6 2.3 WebGL ................................. 9 2.4 Virtual Reality ............................. 12 2.5 WebVR ................................. 13 2.6 Three.js................................. 14 2.7 A-Frame................................. 14 2.8 Crossfilter................................ 16 xiii xiv CONTENTS 2.9 dc.js................................... 18 2.10 THREEDC ............................... 18 2.11 VBoard-UI ............................... 19 3 Development 21 3.1 SCRUM Methodology ......................... 21 3.2 Iteration 0: Investigation and preliminary study........... 23 3.3 Iteration 1: First demo (chart) .................... 25 3.4 Iteration 2: Interactivity with the user and filtering......... 28 3.4.1 Mouse interactions....................... 28 3.4.2 Add crossfilter as data source................. 30 3.4.3 filtering in the charts...................... 31 3.5 Iteration 3: 3D visualizations..................... 31 3.6 Iteration 4: Library architecture ................... 33 3.7 Iteration 5: Integration with a data dashboard............ 37 3.7.1 VBoard-UI Integration..................... 38 3.7.2 Stacked Barchart........................ 39 3.7.3 Bundling js file......................... 39 3.7.4 Including src option in charts................. 40 4 Design and results 43 4.1 Software Description.......................... 43 4.2 Use of the library............................ 45 4.3 A complex example........................... 51 5 Conclusions 55 5.1 Results.................................. 56 5.2 Application of lessons earned ..................... 56 5.3 Lessons learned............................. 56 5.4 Future work............................... 57 A README.md on GitHub 59 PROYECTO FIN DE CARRERA CONTENTS xv B Demo with Controller 63 Bibliography 65 FRANCISCO AGUILAR HIDALGO Figure index 2.1 OpenGL ES primitives........................... 10 2.2 Implementation of WebGL in web browsers............... 11 2.3 Basic Example of WebGL......................... 12 2.4 VR Headsets ................................ 13 2.5 Three.js examples ............................. 14 2.6 Abstract representation of Entity-Component Pattern......... 16 2.7 dc.js example with interaction....................... 18 2.8 THREEDC Scenes............................. 19 2.9 Creating a chart in VBoard-UI...................... 20 3.1 SCRUM Methodology........................... 23 3.2 Three.js WebVR example ......................... 24 3.3 A-frame WebVR example......................... 24 3.4 Barchart built with A-Frame ....................... 26 3.5 Piechart built with A-Frame ....................... 28 3.6 Ray-picking technique........................... 29 3.7 Different Cursor component behavior comparison: A-Frame's built-in cursor and mouse-cursor.......................... 29 3.8 Piechart with mouse over interaction................... 30 3.9 Piechart is filtering the barchart ..................... 31 3.10 3D Barchart................................. 32 3.11 Bubble chart ................................ 33 xvii xviii Figure index 3.12 PieChart starting a dashboard with our library aframedc . 36 3.13 Two Charts inside a Panel with our library aframedc.......... 37 3.14 Creating an A-Frame chart with VBoard-UI............... 38 3.15 Stacked Barchart.............................. 39 3.16 Current file structure............................ 40 4.1 Piechart component: class structure ................... 44 4.2 Different charts in a-framedc ....................... 50 4.3 Initial state of the demo with OPNFV git repository statistics . 52 4.4 Interacting with the charts and editing the scene with A-Frame inspector 52 4.5 The OPNFV demo when we enter on VR ................ 53 B.1 Step 1: accessing the scene on the phone................. 64 B.2 Step 2: Server Side Connection...................... 64 PROYECTO FIN DE CARRERA Acronyms API Application Programming Interface VR Virtual Reality UI User Interface 3D ThreeDimensional URJC Universidad Rey Juan Carlos I HTML HyperText Markup Language xix Chapter 1 Introduction In this chapter we will describe the problem and introduce the project objetives and its context, in order to clarify its basis before diving into technical details. 1.1 Current context Today's society is generating more and more data. The analysis of data is there- fore more complex and the transformation process is difficult to highlight useful information in order to support decision making. One of the most common ways of facilitating data analysis has been through charts of different types such as pie, bar, or network diagrams. With modern operating systems, it facilitated the creation of simple visualizations from data with programs like Microsoft Excel. Then with the rise of the internet and better web browsers new libraries that allowed the visualization of charts of data appeared. These libraries were multi- platform, they did not need the installation of any software in our computer and they allowed a greater interaction with the user, examples of this are dc.js, 3d.js or highchart. In recent years, with the bursting of the