A Comparative Study of web-based Visualization Technologies on Mobile Devices

Team

Matthias KRUG (Contact Person)
Vienna University of Technology, Student, Vienna, Austria
Bilal ALSALLAKH
Vienna University of Technology, Institute of Software Technology and Interactive System, Vienna, Austria

Project

Smartphones and tablets become widespread computing devices, both for personal users, and in business domains. In many cases, these applications involve displaying visual representations of data, as well as interactivity features to explore these visualization.

Due to the varying operating systems used by these handheld devices, it becomes cumber- some to provide native applications (apps) for a large spectrum of devices. To overcome this problem, one alternative is to develop these applications using web-based technologies that are supported and standardized for multiple platforms. Various web-based technologies have been developed for displaying graphical elements, such as Scaleable Vector Graphics and WebGL. This poses a challenge for web developers who aim to select suited technologies for their appli- cations.

This thesis surveys state-of-the art tehnologies for creating interactive web-based visualiza- tions for mobile applications. Furthermore, the thesis reports a quantiative performance com- parison of three main technologies: SVG, Canvas, and WebGL.

For each technology a representative library was selected and three pre-defined visualization scenarios were implemented using these libraries to enable the comparison of these technolo- gies in a unified way. The three test prototypes of each technology were executed on multiple platforms and using different: a desktop computer, a tablet, and a mobile device, using three different browser: Safari, Chrome, and Internet Explorer. The corresponding execution times needed to create the respective visualizations are measured and reported. Furthermore, the three technologies are compared with respect to their support of interactivitiy and the extensibility to create new chart types.

These results show that every framework has its merits and short-comings, depending on the application. By this, the thesis provides a guidance for developers who in choosing an appropri- ate technology for their applications. Furthermore, our open-source prototypical implementation of three types of visualizations using three different technologies help conducting further com- parisons between these technologies.

Paper

State of the Art in HTML, JavaScript, and SVG for Information Visualization on Mobile Devices

Downloads

Scenario Implementations
Data/Results of the 1st Scenario

Images

1st Scenario / SVG
1st Scenario / Canvas
1st Scenario / WebGL
1st Scenario Results / SVG
1st Scenario Results / Canvas
1st Scenario Results / WebGL
2nd Scenario / SVG
2nd Scenario / Canvas
2nd Scenario / WebGL
3rd Scenario / SVG
3rd Scenario / Canvas
3rd Scenario / WebGL