The goal of the thesis was to research the field of data visualization and develop a web application that visualizes the movement of rigid objects from data received in real time.
The first part of the thesis examines the fields of data visualization and computer graphics. This part explains the role of graphic elements, interactivity and animations in visualizations, and presents some established types of data visualizations. The chapter of computer graphics analyzes the process of building a virtual three dimensional space and rendering it to a two dimensional projection. It explains the presentation of virtual three dimensional objects, influences of light on the surfaces of objects, projections of three dimensional spaces to two dimensional images and creation of animated graphics.
The second part of the thesis describes the development of a web application which enables users to create multiple two and three dimensional visualizations from a real time stream of data. Firstly, the chapter describes the development of the graphical user interface with the JavaScript framework Vue.js. Secondly, it presents the implementation of a real time data stream from a server to the visualization application using the WebSocket protocol. Next described is the centralized state management system of the developed application, which is used to control the application from a single point, no matter where the source of a state mutating event occurs (it can be caused either by new data in the data stream or by user interaction). Finally, we use code examples to explain the development of a tennis racket movement visualization using a JavaScript library Three.js, and development of a dynamic line diagram which visualizes the speed of a moving tennis ball using the external library Plotly.js.
|
