PDF iconMy Master’s Thesis

FluidDiagrams: A Cross-Platform, Web-Based Information Visualisation Framework using JavaScript and WebGL


Information visualisation is the process of transforming data and information into a graphical represen-
tation. Visualisation helps the human mind understanding and interacting with large data sets. The aim
of this thesis was to create an information visualisation framework using WebGL as its rendering en-
gine. The benefit of using WebGL is to take advantage of the computing power of any installed graphics
hardware increase the performance of visualisations.
Creating web-based interactive information visualisations can be very cumbersome when not using
specialised libraries and toolkits. This thesis first analyses current best practice when creating general
web-based applications using JavaScript. The second part looks at current technologies for creating web-
based graphics, and using short examples, shows the usage and benefits of current JavaScript libraries.
Four existing information visualisation toolkits, JIT, D3, Aperture, and Highcharts are discussed, before
introducing FluidDiagrams.
FluidDiagrams is a web-based information visualisation framework which uses WebGL for rendering
the graphics to the browser. FluidDiagrams was created during this thesis and is based on Three.JS which
provides WebGL, Canvas, and SVG rendering engines, depending on the technologies supported by the
browser and the underlying operating system and hardware. This enables faster and richer visualisations,
since the rendering process is shifted to the graphics card wherever possible. FluidDiagrams was used
during the course Information Visualisation [706.057] in SS2013 at Graz University of Technology,
where multiple visualisations for FluidDiagrams were created. Finally, this thesis gives a brief outlook
into possible adaptations and refinements to the FluidDiagrams framework.


Examples can be found on the projects website :

Related Publications

Keith Andrews and Benedict Wright;
FluidDiagrams:Web-Based Information Visualisation using JavaScript and WebGL;
Proc. Eurographics Conference on Visualization (EuroVis 2014),
Swansea, UK.

Benedict Wright;
FluidDiagrams: A Cross-Platform, Web-Based Information Visualisation Framework using JavaScript and WebGL;
Master’s Thesis, Graz University of Technology,
Austria, 24 Jan 2014.