Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
46 lines (26 sloc) 6.1 KB
\begin{english}
\chapter{Introduction and Context}
\label{cha:introduction}
With the progression of web-technology the field of Information Visualization is no longer restricted to desktop environments. Native support for computer graphics in web browsers has now reached a level that suffices to implement interactive, computation-intensive visualizations without the need for third party software, such as Adobe Flash or Microsoft Silverlight.
With the availability of web-based visualization technologies, users are able to access visual interfaces through their web-browsers. This allows internet users to use visualization software, which was so far restricted to local environments through native desktop applications. Because of the distributed nature of the web, \emph{collaborative interfaces} became possible where users can \emph{analyze}, \emph{discuss} and \emph{make sense} of data \emph{together}. Data can be accessed through web-services~\cite{Fielding_2000}, which are always up to date, rather than relying on static files as the primary data source.
In this thesis, different approaches related to web-native Information Visualization are explored. Web-native technologies include vector graphics (SVG) and 2-dimensional raster graphics through the HTML5 Canvas element. Moreover, there is a 3D-context for the HTML5 Canvas API, mostly referred to as WebGL. The focus, however, lies on the examination of 2D-graphic systems, as they are most relevant to Information Visualization. Also, concepts that work in 2D mode can easily be adapted to work in a 3D context.
% citation needed
\section{Problem Description and Motivation}
%%%-----------------------------------------------------------------------------
The field of Information Visualization has been around since quite a long time in Computer Science. While mainly practiced in proprietary environments, the web browser as a graphical environment is gaining momentum. As a result, web-based Information Visualization becomes more and more important. In response to that, this thesis takes a closer look at the technical backgrounds of the quite young discipline of web-native Information Visualization.
A key challenge in this area is the representation and transformation of data that forms the essential basis of visualizations. Visualization designers are facing a vast amount of heterogenous data issued by different domains. This data needs to be represented in some way in order to allow programs to operate on it. While desktop applications typically use \emph{files} as their data-source, web applications usually obtain data from \emph{web-services}. Although not limited to web-applications, using data directly from web-services is a great benefit with regards to the immediate availability of information. However, these web-services come in different ways. While there are some standards and protocols to allow data exchange between different peers, the delivered data is structured differently. Hence, designers need to develop strategies to deal with heterogenous data.
Another crucial aspect for a functioning visual interface is \emph{interaction}. Interaction, that often requires \emph{animation}, demands a high amount of computational power from the client, yet visualizations running in the browser should aim to consume as little computation power as possible, which is challenging.
\section{Crucial Questions}
The transition from dedicated software tools, which work in local environments, to web-based visual interfaces poses a number of questions:
\begin{itemize}
\item Can the newly introduced graphical systems (such as HTML5 Canvas or SVG) replace classical visualization environments~\cite{Johnson08}? When is it applicable to build visualizations on top of web technology and when should designers rather stick with classical approaches?
\item How does the utilization of web-native technologies differ from that of traditional graphical programming environments? Can familiar programming patterns be applied or does the nature of the web require different approaches and techniques~\cite{Crockford:2008}?
\item Having low-level graphical systems available, how can we build \emph{higher level interfaces} to ease the process of creating visualizations? Building a higher level interface typically goes along with introducing limitations with respect to the result~\cite{Protovis09}. Thus, the question arises what \emph{level of abstraction} is suitable for most types of visualizations that can be made.
\item Which tools and frameworks are already available? What do they offer and where are the limitations?
\end{itemize}
\section{Goals}
The goal of this thesis is to analyze existing approaches, techniques and tools for creating interactive visualizations in a web-based environment. It needs to be clarified which level of abstraction is suitable to ensure both \emph{high reusability} and \emph{easy customization}.
In addition to the examination of existing tools, a visualization toolkit (Unveil.js) will be developed with the overall goal of making \emph{analyzing} and \emph{visualizing} data a repeatable process. The quality of the resulting library will then be evaluated based on a set of requirements.
An important challenge is to find flexible \emph{data abstractions}, enabling visualizations to work with differing datasets without the need of manual rework to support additional use-cases. Data abstractions should not only make the task of data-processing easier, but also that of exchanging data. This enables systems to agree on a suitable format in order to operate on shared datasets. With a focus on the web as a platform, this thesis is dedicated to discover methods for building interactive, high-performance visualizations involving interaction and animation.
After taking a closer look on Information Visualization in general (Chapter~\ref{cha:infovis}), web-based technologies will be examined (Chapter~\ref{cha:web_based_visualization}). A set of requirements, identified in Chapter~\ref{cha:requirements}, will be used for later evaluation (Chapter~\ref{cha:evaluation}) of Unveil.js (Chapter~\ref{cha:unveil}).
\end{english}