# michael/master_thesis

### Subversion checkout URL

You can clone with
or
.
 08598ba Init. Michael Aufreiter authored Nov 22, 2011 1 \begin{english} 2 3 \chapter{Information Visualization} 4 \label{cha:infovis} 5 6 %%%%%%%%%%%%%%%%%% 7 %%%%%%%%%%%%%%%%%% 8 9 % Stanford Courses! 10 % https://graphics.stanford.edu/wikis/cs448b-11-fall 11 12 % By: Stanley Smith Stevens http://en.wikipedia.org/wiki/Level_of_measurement 13 14 %%%%%%%%%%%%%%%%%% 15 16 In order to create visualizations, fundamental knowledge (theory) about Information Visualization is necessary. This chapter introduces a number of concepts related to the field of Information Visualization in general. It also highlights their importance with respect to the visualization creation process, which forms the main subject of this thesis. 17 18 19 \section{The Visualization Process} 20 %%%----------------------------------------------------------------------------- 21 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 22 The ultimate purpose of Information Visualization is the acquisition of a mental model of a dataset under investigation. The whole process to reach this goal can be referred to as \emph{The Visualization Process} \cite{WuenscheLobb01}. It involves the creation phase as well as the interpretation of the resulting image by humans in order to gain a mental model and make sense of the data shown. The viewing of a graphical encoding of data should cause an Ah-ha!'' reaction in the viewer in the sense that a useful discovery has been made. Information designers can only control the visualization stage with the goal that interpretation of the result is as easy as possible~\cite{Holmberg06}. More specifically, the creation of visualizations involves the application of methods to map data to suitable structures, which can then be encoded through visual properties, such as height, size, color. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 23 24 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 25 % \begin{figure} 26 % \centering 27 % \includegraphics[width=1\textwidth]{visualization_process} 28 % \caption{The Visualization Process} 29 % \label{fig:visprocess} 30 % \end{figure} 31 08598ba Init. Michael Aufreiter authored Nov 22, 2011 32 33 % We'll examine the respective applicability of interaction for the technologies we investigate. 34 35 \section{Computational Support} 36 %%%----------------------------------------------------------------------------- 37 38 According to Spence~\cite{InformationVisualization07}, computers have been responsible for massive advances in the field of Information Visualization. 39 40 There are three principal reasons why computational support has huge importance. First, because of \emph{inexpensive and fast memory access}, the storage of truly \emph{vast amounts of data} has become affordable for businesses and governments. Second, with powerful and fast computation mechanisms, the processing of data in realtime enables a number of tasks that are helpful for visually investigating data. Data can be \emph{filtered}, \emph{aggregated} and \emph{transformed} interactively for flexible exploration. This interactivity forms a great advantage of computer-aided visualizations when compared to their equivalents in print, which are static. Users may start exploring information by looking at the whole dataset through an aggregated synoptic view and request details on demand. Third, Spence states that the availability of high resolution graphic displays ensures that the presentation of data matches the power of human visual and cognitive systems. 41 42 Computer graphics is not a new subject, neither is Interactive Information Visualization. Many software products have been developed and released in the last 20-30 years. Among these are graphically intensive \emph{Computer Games}, and \emph{Visual Analysis Tools} targeting all imaginable domains of life. However, in this thesis only technologies that are natively supported by current web browsers are examined, while taking into account the special characteristics of this environment when utilized as a medium. Visualization designers are dealing with a client-server scenario that offers a number of capabilities but also introduces limitations that must be considered. 43 44 While the choice of a graphical representation can impact the effectiveness of a visualization, this thesis first and foremost addresses the choice of technology as well as the utilization of suitable methods in terms of software design. A major requirement for all technology options is the support of arbitrary visual representations. Thus, this thesis will give a closer look on both \emph{low level graphical systems} and \emph{higher level visualization frameworks}. It will rather neglect ready-to-use charting libraries which are useful for quickly plotting common data structures but typically lack options for extensive customization. Another key aspect of web-based visualization is the support of interaction, since users can interact with their web-browser using mouse, keyboard or touch surfaces. 45 46 47 \section{The Human User} 48 %%%----------------------------------------------------------------------------- 49 50 With the availability of immense computational power to transform data and create visual output, designers sometimes lose sight of the user being the main consumer of visualizations. As Spence states, visualization is all about how human beings interact with data and how to graphically encode and present data best~\cite{InformationVisualization07}. It is important that the visualization designer is aware of the needs of a user as well as the characteristics of human behavior. This awareness cannot be emphasized enough. A lot of attempts end up in being beautiful, in terms of visually appealing for the eye, but make it hard for the user to make sense of it. Such visualizations are perfectly fine when created in the context of an artistic target, but fail when they are meant to transport information straight away. 51 52 53 \section{The Value of Information Visualization} 54 %%%----------------------------------------------------------------------------- 55 56 Without doubt, the topic of Information Visualization is fascinating, yet the question of its true value is important too~\cite{InformationVisualization07}. This value becomes obvious in many concrete application scenarios. 57 58 59 \subsection{Visual Analytics} 60 %%%----------------------------------------------------------------------------- 61 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 62 Visual Analytics developed out the fields of Information Visualization and Scientific Visualization and has a strong focus on analytical reasoning~\cite{Keim2008}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 63 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 64 According to Ziemkiewicz and Kosara~\cite{Ziemkiewicz10}, it combines classical data analysis techniques with those of Information Visualization. In an analysis scenario with the help of Information Visualization users can explore large amounts of data using visual tools in order to reveal patterns which are not obvious when looking at the raw data. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 65 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 66 The importance of Visual Analytics was also recognized by the U.S. Department of Homeland Security when they chartered the National Visualization and Analytics Center (NVAC) in 2004. The goal was to help avoiding future terrorist attacks in the U.S. and around the globe. A lot of groundwork has been done by the NVAC, not least have they conducted a five year research and development agenda for Visual Analytics. \emph{Illuminating the Path - The Research and Development Agenda for Visual Analytics}~\cite{IlluminatingThePath05} addresses the most important needs in R\&D to gain advanced analytical insight. According to them, Visual Analytics is a multidisciplinary field that includes the following focus areas: 08598ba Init. Michael Aufreiter authored Nov 22, 2011 67 68 \begin{itemize} 69 \item Analytical reasoning techniques that enable users to obtain deep insights that directly support assessment, planning, and decision making. 70 \item Visual representations and interaction techniques that take advantage of the human eye's broad bandwidth pathway into the mind to allow users to \emph{see}, \emph{explore}, and \emph{understand} large amounts of information at once. 71 \item \emph{Data representations} and \emph{transformations} that convert all types of conflicting and dynamic data in ways that support visualization and analysis. 72 \item Techniques to support \emph{production}, \emph{presentation}, and \emph{dissemination} of the results of an analysis to communicate information in the appropriate context to a variety of audiences. 73 \end{itemize} 74 75 \SuperPar Even though Information Visualization is not limited to the field of Visual Analytics, it is without doubt a major field of application. Thus, techniques and approaches described in this thesis were not developed without bearing Visual Analytics as a main application scenario in mind. 76 77 78 \subsection{Exploratory Data Analysis} 79 %%%----------------------------------------------------------------------------- 80 81 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 82 Fluit et. al describe the task of data exploration as a process of information search, that is \emph{not of immediate relevance}~\cite{Fluit05}. The difference between data exploration and querying is that \emph{no particular questions are to be answered}. Instead, users get an \emph{overview} of the complete information available and start to make sense of it by digging deeper into the data and viewing certain aspects, but without losing the overall context~\cite{keren1993handbook}. The goal here is that users become familiar with the dataset and figure out how it is structured and organized. Based on knowledge gained through exploration, users are able to formulate specific questions afterwards. In order to make possible Exploratory Data Analysis, \emph{Filtering}, \emph{Zooming} and \emph{Detail-on-demand} functionality must be supported by the visualization. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 83 84 \subsection{Collaborative Visualization} 85 %%%----------------------------------------------------------------------------- 86 87 \begin{figure} 88 \centering 89 \includegraphics[width=1\textwidth]{manyeyes} 90 \caption{ManyEyes: Showing a visualization of the World Cancer Drug Market } 91 \label{fig:manyeyes} 92 \end{figure} 93 94 According to Heer et. al, visualizations are not just analytic tools but social spaces~\cite{voyagers-and-voyeurs,design-considerations-vast}. Visual systems improve our ability to process large amounts of data and enable visual sense-making. Sense-making is a social process, as people interpret data differently~\cite{card99}. This triggers a collective discourse and eventually either leads to consensus or people learn from their peers. Moreover, some datasets are too large to be examined by one person. Using a collaborative interface, a task can be divided into sub-tasks. 95 96 Discussions about trends are often scattered and disconnected from the actual visualization~\cite{voyagers-and-voyeurs}. Communication still takes place through email or other classic channels. Resulting from this it is getting difficult for newcomers to catch up and even the review process becomes harder. Thus, discussions should take place right at the visualization workspace. 97 98 \begin{figure} 99 \centering 100 \includegraphics[width=1\textwidth]{dejavis} e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 101 \caption{Dejavis: Showing an analysis of the world's countries by various numerical indicators, such as GDP per capita, life expectancy and infant mortality rate.} 08598ba Init. Michael Aufreiter authored Nov 22, 2011 102 \label{fig:dejavis} 103 \end{figure} 104 105 In order to ease the task of exchanging insight discovered on a particular dataset, application bookmarks are important. If the current application state (user settings, data-source) could be stored and made available using a public URL, knowledge can be shared easily with others. This is referred to as \emph{View Sharing} in literature~\cite{clark91}. 106 107 A prominent example for such a social data analysis tool is ManyEyes\footnote{http://many-eyes.com}, shown in Figure~\ref{fig:manyeyes}, an IBM research experiment~\cite{manyeyes}. Dejavis\footnote{http://beta.dejavis.org}, as shown in Figure~\ref{fig:dejavis}, is another example, contributed by the author. It supports \emph{View Sharing} \cite{clark91} and \emph{Contextual Data Transformations} \cite{manyeyes}. 108 109 110 \begin{figure} 111 \centering 112 \includegraphics[width=1\textwidth]{horn} 113 \caption{Where is the Hunger: Mapping the famine in the Horn of Africa.} 114 \label{fig:horn} 115 \end{figure} 116 117 \subsection{Narrative Visualization} 118 %%%----------------------------------------------------------------------------- 119 120 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 121 One promising new field is called Narrative Visualization, which can be described as \emph{telling stories with data}. Information Visualization, with its ability to reveal narratives within data, is a great way to communicate stories in new different ways~\cite{NarrativeVis10,Gershon:2001}. Story tellers, like online journalists increasingly start adapting visualizations into their online stories. In some cases the visualization may entirely replace a written story. Where is the hunger?'' (Figure~\ref{fig:horn}), visually tells the story of the famine in the Horn of Africa\footnote{http://one.org/us/actnow/horn.html}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 122 123 124 \section{The Information Seeking Mantra} 125 %%%----------------------------------------------------------------------------- 126 127 According to Shneiderman~\cite{shneiderman96eyes} the bandwidth of information presentation is potentially higher in the visual domain than in any other media. After having completed many projects, he has identified the following principle that applies to the majority of visualization scenarios: 128 129 \begin{quotation} 130 Overview first, zoom and filter, then details-on-demand'' 131 \end{quotation} 132 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 133 \SuperPar This principle is referred to as \emph{The Information Seeking Mantra} and serves as a starting point for creating visualizations. Based on that, Shneiderman also proposes a Task by Data Type Taxonomy (TTT) with seven data types (1-, 2-, 3-dimensional data, temporal data, multi-dimensional data, and tree and network data) and seven tasks (overview, zoom, filter, details-on-demand, relate, history, and extract). In response to Shneiderman, the following sections will introduce these \emph{Tasks} and \emph{Data Types} using illustrative examples. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 134 135 \section{The Tasks} % originally the Issues 136 \label{sec:tasks} 137 %%%----------------------------------------------------------------------------- 138 139 140 Based on a particular problem scope, namely the examination of a set of documents, Shneiderman's \emph{Tasks}~\cite{shneiderman96eyes} are identified and described. Documents under investigation are associated with a set of terms mentioned in these documents. The goal is to find relevant documents according to one or more selected terms. Instead of using a full text search (fuzzy information retrieval), a method called \emph{Faceted Navigation}~\cite{Huynh09} is used to explore the set of available documents interactively. Since the documents are annotated with categorized entities that belong to those documents, users can easily ask for the values of a specific entity type (like authors). Only values (entities) that are mentioned within the set of documents are displayed. In other words, there is always at least one document match per entity. 141 142 143 % \subsection{The data} 144 %%%----------------------------------------------------------------------------- 145 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 146 The example dataset shows a number of documents that are related to visualization libraries. Each document is annotated with attributes which are specific for this particular one. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 147 148 \begin{center} 149 \begin{tabular}{ | l | l | l | p{2.3cm} |} 150 \hline e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 151 \emph{Title} & \emph{Authors} & \emph{Technolgies used} \\ 152 \hline\hline 08598ba Init. Michael Aufreiter authored Nov 22, 2011 153 Protovis & Michael Bostock, Jeffery Heer & SVG, Javascript \\ \hline 154 D3.js & Michael Bostock & SVG, Javascript, CSS \\ \hline 155 Processing.js & John Resig & Canvas, Javascript \\ \hline 156 Unveil.js & Michael Aufreiter & Canvas, Javascript, JSON \\ \hline 157 Raphael & Dmitry Baranovskiy & SVG, Javascript \\ \hline 158 Paper.js & J\"urg Lehni, Jonathan Puckey & Canvas, Javascript \\ \hline 159 \end{tabular} 160 \end{center} 161 162 \SuperPar \textbf{Table Presentation} 163 164 \SuperPar Although most people are familiar with tables, they often are of limited help, especially when they contain many rows and columns. It is hard for the viewer to find rows that match a particular set of criteria. The viewer has to step through the entire table, row by row, checking if the wanted criteria is met. At least some facility to rearrange table rows according to some criterion would be helpful \cite{InformationVisualization07}. 165 166 \SuperPar \textbf{Graphical Abstraction} 167 168 \SuperPar Since the table representation is hard to read, a suitable graphical abstraction is needed in order to encode documents visually. Figure \ref{fig:overview} shows the same set of documents, but this time arranged on a matrix-grid. 169 170 171 \subsection{Overview} 172 %%%----------------------------------------------------------------------------- 173 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 174 As Spence states, the term \emph{overview} cannot be defined easily with precision~\cite{InformationVisualization07}. However, the goal of an overview is to serve as an entry point, preparing the way for further examinations based on a dataset of interest. The user should be able to answer questions like: How many items are in the collection? Adequate overview strategies plus detail (also called context plus focus) are an important criterion to look for~\cite{shneiderman96eyes}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 175 176 The visualization, as shown in Figure~\ref{fig:overview}, not only displays available documents in a collection, but also a list of entities that are mentioned within those. 177 178 \begin{figure} 179 \centering 180 \includegraphics[width=1\textwidth]{doc_explorer/master_thesis_illustrations_2-01} 181 \caption{Overview: Shows all documents, along with a list of associated entities} 182 \label{fig:overview} 183 \end{figure} 184 185 186 \subsection{Zoom} 187 %%%----------------------------------------------------------------------------- 188 189 \begin{figure} 190 \centering 191 \includegraphics[width=1\textwidth]{doc_explorer/master_thesis_illustrations_2-02} 192 \caption{Zoom: Focus on the upper left area of the matrix plot} 193 \label{fig:zoom} 194 \end{figure} 195 196 A user might want to zoom in on items of interest. The user is likely to be interested in some portion of a collection. In order to focus on a particular area, control over the \emph{zoom focus} and \emph{zoom level} is needed. In Figure~\ref{fig:zoom} a user has zoomed into the upper left area. The increased zoom level unveils more details about the documents in focus, such as the author and a short abstract. 197 198 \subsection{Filter} 199 %%%----------------------------------------------------------------------------- 200 201 \begin{figure} 202 \centering 203 \includegraphics[width=1\textwidth]{doc_explorer/master_thesis_illustrations_2-05} 204 \caption{Filter: Filtering restricts the number of documents based on selected attributes} 205 \label{fig:filtering} 206 \end{figure} 207 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 208 Filtering allows the reduction of a dataset based on a user-defined set of criteria~\cite{Ahlberg92dynamicqueries}. Objects that do not match will no longer be included in the result. Filtering is an important tool for data exploration. It enables analysts to reveal facts that are not obvious when looking at the full dataset. Also implicit coherences can be discovered more easily. Thus, the quality of an interactive visualization depends to a high degree on the availability of advanced filtering options. Figure \ref{fig:filtering} shows a reduced set of documents based on a particular selection of entities. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 209 210 211 \subsection{Details-on-demand} 212 %%%----------------------------------------------------------------------------- 213 214 \begin{figure} 215 \centering 216 \includegraphics[width=1\textwidth]{doc_explorer/master_thesis_illustrations_2-03} 217 \caption{Detail-on-demand: For a certain object additional details, like associated entities are displayed} 218 \label{fig:detail} 219 \end{figure} 220 221 Users usually want to find out details for a selected object. This is usually done by providing a popup window containing the values of each attribute~\cite{shneiderman96eyes}. However, there are other options such as displaying contextual information based on the currently selected item, as shown in Figure~\ref{fig:detail}. 222 223 224 \subsection{Relate} 225 %%%----------------------------------------------------------------------------- 226 227 Viewing relationships between data items is also an important task. Based on an attribute selection, as shown in Figure \ref{fig:relate}, users can find out which documents are associated with both Michael Bostock'' and Jeffery Heer''. Color coding is used to connect documents with concrete attributes. In addition to that, size is used to encode relevance. Documents that contain all selected entities are displayed at maximum size while others, which only match one entity, appear smaller. Documents that do not match are greyed out. 228 229 \begin{figure} 230 \centering 231 \includegraphics[width=1\textwidth]{doc_explorer/master_thesis_illustrations_2-04} 232 \caption{Relate: Based on a selection of entities relationships among documents are revealed} 233 \label{fig:relate} 234 \end{figure} 235 236 237 \subsection{History} 238 %%%----------------------------------------------------------------------------- 239 240 It is useful to keep a history of actions performed by the user to support \emph{undo}, \emph{replay} and \emph{progressive refinement}. Information Exploration is a task which involves many steps. In order to support the user, it should be possible to retrace the steps performed~\cite{shneiderman96eyes}. 241 242 243 \subsection{Extract} 244 %%%----------------------------------------------------------------------------- 245 246 Based on the current application state, users should be able to store a snapshot of the current context. Later they are either able to restore that context or to share their explorations with others. In a web-based context shareable URL's can be used for state extraction, which is called \emph{View Sharing}~\cite{clark91}. 247 248 249 \section{Data Types} 250 %%%----------------------------------------------------------------------------- 251 252 The following classification by \emph{Data Type}, adapted from Shneiderman \cite{shneiderman96eyes}, is not meant to be seen as strict, but can be helpful to organize visual designs mentally into classes. The \emph{Data Types} described are closely related to how an item of a collection suits a corresponding graphical representation. Based on the explanations of Shneiderman, user problems as well as possible graphical representations are identified for each type. 253 254 255 \subsection{1-dimensional} 256 %%%----------------------------------------------------------------------------- 257 258 % \begin{figure} 259 % \centering 260 % \includegraphics[width=1\textwidth]{tablelens} 261 % \caption{Table Lens} 262 % \label{fig:tablelens} 263 % \end{figure} 264 265 1-dimensional data refers to \emph{linear} data types which are organized in a \emph{sequential} manner, such as documents, program source code or an alphabetical list of names~\cite{shneiderman96eyes}. Users usually want to access global information about the characteristics of the data they are viewing as well as how a particular element in the list compares to others. Sometimes users might want to search for specific results within the full dataset based on user defined criteria. This is commonly solved by applying methods for \emph{scrolling} to pick up desired elements. To improve the effectiveness of navigation, compact visual presentations are used, which encode certain properties (such as the number of characters of a line) to represent individual items in the collection. 266 267 268 \SuperPar User problems: 269 270 \begin{itemize} 271 \item Find the total number of items 272 \item Find items, e.g. a line in a document, that match particular attributes (e.g. if the line is a section) 273 \end{itemize} 274 275 276 \begin{figure} 277 \centering 278 \includegraphics[width=1\textwidth]{tilebars} 279 \caption{Tilebars visualizing the output of a query to a medical database with three terms: osteoporosis, prevention and research. While Tilebars on the left show relationships between those terms, corresponding documents appear on the right.} 280 \label{fig:tilebars} 281 \end{figure} 282 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 283 % \pagebreak 08598ba Init. Michael Aufreiter authored Nov 22, 2011 284 \SuperPar Examples: 285 286 \begin{itemize} 287 \item \textbf{Tilebars}~\cite{Hearst95tilebars} encode contents of documents using bars. As shown in Figure~\ref{fig:tilebars}, rectangle shading is used to indicate absence or presence of topics within a document. 288 \item \textbf{The Table Lens}~\cite{tablelens97} is an example for a Bifocal Display~\cite{Spence82} that shows detailed information in focus and less information in the surrounding area. 289 \end{itemize} 290 291 292 \subsection{2-dimensional} 293 %%%----------------------------------------------------------------------------- 294 295 Planar or map data, such as geographic maps, floor plans or computer chip designs are examples for 2-dimensional data. It is characterized by items in a collection that cover some part of the total area available. A dataset can be considered 2-dimensional if questions about \emph{direction}, \emph{location}, \emph{size} and \emph{distance} can be answered. For a collection of countries including geo information, possible questions could be: How close is Prague to Vienna? How big is Prague compared to Vienna? 2-dimensional data contains a number of attributes that will be used in the visual environment. Examples for such attributes are longitude and latitude, width and height, etc. In reality, all data visualization environments are displayed on a 2D surface, which sometimes leads to confusion regarding classifying data as 2-dimensional. 296 297 \begin{figure} 298 \centering 299 \includegraphics[width=1\textwidth]{map} 300 \caption{Graduated Symbol Map of Obesity in the U.S., 2008} 301 \label{fig:map} 302 \end{figure} 303 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 304 \pagebreak 08598ba Init. Michael Aufreiter authored Nov 22, 2011 305 \SuperPar User Problems: 306 307 \begin{itemize} 308 \item Find adjacent items 309 \item Containment of one item by another 310 \item Paths between items 311 \end{itemize} 312 313 \SuperPar Examples: 314 315 \begin{itemize} 316 \item \textbf{Graduated Symbol Maps}, as shown in Figure~\ref{fig:map}, place symbols over an underlying map that are used to encode a variable associated with a geographic region~\cite{VisualizationZoo:2010}. e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 317 \item \textbf{Cartograms} distort the shape of a geographic region, so that the area directly encodes an associated data variable. Figure~\ref{fig:cartogram} shows a Dorling Cartogram, which represents each geographic region with a sized circle~\cite{Dorling96,VisualizationZoo:2010}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 318 \end{itemize} 319 320 \begin{figure} 321 \centering 322 \includegraphics[width=1\textwidth]{cartogram} 323 \caption{Dorling Cartogram of Obesity in the U.S., 2008} 324 \label{fig:cartogram} 325 \end{figure} 326 327 328 329 \subsection{3-dimensional} 330 %%%----------------------------------------------------------------------------- 331 332 \begin{figure} 333 \centering 334 \includegraphics[width=1\textwidth]{maya} 335 \caption{Autodesk Maya utilized for character animation} 336 \label{fig:maya} 337 \end{figure} 338 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 339 3-dimensional data involves real-world objects like landscapes, the human body or buildings. Such objects are typically composed of lower level objects, involving volume and complex relationships between each other~\cite{shneiderman96eyes}. Computer-assisted design systems (CAD) for architects or 3D animation software are designed to handle 3-dimensional relationships. While 3D computer graphics and computer assisted design are employed frequently, Information Visualization in three dimensions is still novel. 3D representation in the context of Information Visualization should be applied with care. If a dataset can effectively be represented in two dimensions, plotting them in 3D space does not add any value. What the presenter creates here was called chart chunk'' by Edward Tufte~\cite{tufte09}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 340 341 342 \begin{figure} 343 \centering 344 \includegraphics[width=1\textwidth]{cloudkick} 345 \caption{Cloudkick Vis: Monitored Servers of a cloud infrastructure are plotted in 3-dimensional space, according to performance metrics like CPU usage, Memory usage, and Ping latency.} 346 \label{fig:cloudkick} 347 \end{figure} 348 349 350 \SuperPar User Problems: 351 352 \begin{itemize} 353 \item Find adjacent items e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 354 % \item Understanding the current position and orientation when viewing objects 08598ba Init. Michael Aufreiter authored Nov 22, 2011 355 \item Detecting occlusion 356 \item Containment issues 357 \end{itemize} 358 359 360 \SuperPar Examples: 361 362 \begin{itemize} e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 363 \item \textbf{Autodesk Maya}\footnote{http://usa.autodesk.com/maya} (Figure~\ref{fig:maya}) is a 3D composition software offering tools for \emph{animation}, \emph{modeling}, \emph{visual effects} and \emph{rendering}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 364 \item \textbf{Cloudkick Vis}\footnote{https://www.cloudkick.com/viz/mozilla/} (Figure~\ref{fig:cloudkick}) is a visual server monitoring workspace that displays server status information in realtime. 365 \end{itemize} 366 367 368 \subsection{Temporal} 369 %%%----------------------------------------------------------------------------- 370 371 Temporal data involves values changing over time and is one of the most common forms of recorded data. Time-varying phenomena are important to many domains such as finance, science and public policy. Time series data often needs to be compared simultaneously and demands suitable visualizations. Shneiderman~\cite{shneiderman96eyes} draws a distinction to 1-dimensional data as soon as data items have a start and finish time (which may overlap). 372 373 374 \begin{figure} 375 \centering 376 \includegraphics[width=1\textwidth]{timeseries} 377 \caption{Index Chart of Selected Technology Stocks, 2000-2010} 378 \label{fig:timeseries} 379 \end{figure} 380 381 \SuperPar User Problems: 382 383 \begin{itemize} 384 \item Get a chronologic overview about events that happened 385 \item Find events during a specific time period 386 \end{itemize} 387 388 \SuperPar Examples: 389 390 \begin{itemize} 391 \item \textbf{Index Charts} are used to display relative changes over time~\cite{VisualizationZoo:2010}. Figure~\ref{fig:timeseries} shows the gain/loss factors of selected technology stocks. e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 392 \item \textbf{Stacked Graphs} show time series as an aggregation by stacking area charts on top of each other~\cite{Byron:2008,VisualizationZoo:2010}. As shown in Figure~\ref{fig:stackedgraph}, the result is a visual summation of time-series values. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 393 \end{itemize} 394 395 396 \begin{figure} 397 \centering 398 \includegraphics[width=1\textwidth]{stackedgraph} 399 \caption{Stacked Graph of Unemployment U.S. Workers by Industry, 2000-2010} 400 \label{fig:stackedgraph} 401 \end{figure} 402 403 404 \subsection{Multi-dimensional} 405 %%%----------------------------------------------------------------------------- 406 407 \begin{figure} 408 \centering 409 \includegraphics[width=1\textwidth]{scatterplot-matrix} 410 \caption{Scatter Plot Matrix of Automobile Data} 411 \label{fig:scatterplot-matrix} 412 \end{figure} 413 414 Multi-dimensional data, characterized by items with n-attributes, occurs frequently and is hard to represent, since it is difficult to picture data mentally in more than three dimensions. An example dataset for this would be a collection of cars, involving multiple numeric attributes such as price, weight, length and speed. 415 416 \SuperPar User Problems: 417 418 \begin{itemize} 419 \item Finding relationships among multiple variables 420 \item Finding patterns, clusters, correlations among pairs of variables 421 \item Testing hypotheses and predicting future values 422 \end{itemize} 423 424 \SuperPar Examples: 425 426 \begin{itemize} e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 427 \item \textbf{Scatterplot Matrices} (Figure~\ref{fig:scatterplot-matrix}) enable visual inspection of correlations between any pair of variables~\cite{ScatterplotMatrix2008,VisualizationZoo:2010}. 428 \item \textbf{Parallel Coordinates} (Figure~\ref{fig:parallel-coordinates}) plot data on parallel axes and connect corresponding points with lines~\cite{Inselberg:1990,VisualizationZoo:2010}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 429 \end{itemize} 430 431 \begin{figure} 432 \centering 433 \includegraphics[width=1\textwidth]{parallel_coordinates} 434 \caption{Parallel Coordinates of Automobile Data} 435 \label{fig:parallel-coordinates} 436 \end{figure} 437 438 \subsection{Tree} 439 %%%----------------------------------------------------------------------------- 440 441 Tree structures or hierarchies describe parent-child relationships and are composed out of nodes that are connected through links. The topmost node in a tree (which will not have a parent) is called the root node, whereas lower level ones (which have no children) are called leaf nodes. Example tree datasets include spatial entities such as countries, software package hierarchies and genealogies. 442 443 \begin{figure} 444 \centering 445 \includegraphics[width=1\textwidth]{nested_circles} 446 \caption{Nested Circles Layout of the Flare Package Hierarchy} 447 \label{fig:nested_circles} 448 \end{figure} 449 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 450 \pagebreak 08598ba Init. Michael Aufreiter authored Nov 22, 2011 451 \SuperPar User Problems: 452 453 \begin{itemize} 454 \item How many levels does the tree have? 455 \item How many children does an item have? 456 \end{itemize} 457 e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 458 % \pagebreak 08598ba Init. Michael Aufreiter authored Nov 22, 2011 459 \SuperPar Examples: 460 461 \begin{itemize} e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 462 \item \textbf{Sunbursts} (Figure~\ref{fig:sunburst}) are radial space-filling layouts for tree structures~\cite{Stasko:2000,VisualizationZoo:2010}. 463 \item \textbf{Nested Circles} (Figure~\ref{fig:nested_circles}) can also be used to visualize tree hierarchies by employing a \emph{circle-packing algorithm}~\cite{Wang:2006,VisualizationZoo:2010}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 464 \end{itemize} 465 466 \begin{figure} 467 \centering 468 \includegraphics[width=1\textwidth]{sunburst} 469 \caption{Sunburst Layout of the Flare Package Hierarchy} 470 \label{fig:sunburst} 471 \end{figure} 472 473 474 \subsection{Network} 475 %%%----------------------------------------------------------------------------- 476 477 \begin{figure} 478 \centering 479 \includegraphics[width=1\textwidth]{matrix-view} 480 \caption{Matrix View of Les Miserables Character Co-occurrences} 481 \label{fig:matrix-view} 482 \end{figure} 483 484 One aspect of data that users wish to explore through visualization is \emph{relationship}. Networks are a data structure that capture such relationships using nodes that are connected through edges. Networks are also referred to as graphs in mathematical terminology. Social Networks (who is friend of whom) or workflow descriptions are examples for network datasets. Networks are hard to visualize because of their arbitrary complex structure. The central challenge is the computation of an effective layout, including tasks such as reducing the number of edge-crossings in order to be easily readable by the viewer. 485 486 \SuperPar User Problems: 487 488 \begin{itemize} 489 \item Which items are related to a particular item of interest? 490 \item Which is the shortest or least costly path connecting two items? 491 \end{itemize} 492 493 \SuperPar Examples: 494 495 \begin{itemize} e447a15 Minor fixes. Michael Aufreiter authored Nov 23, 2011 496 \item \textbf{Force directed layouts} (Figure~\ref{fig:force-directed-layout}) are a common approach to network visualization by modeling the graph as a physical system. This is achieved by assigning forces among the set of edges and the set of nodes~\cite{Fruchterman91,VisualizationZoo:2010}. 497 \item \textbf{Matrix Views} (Figure~\ref{fig:matrix-view}) represent linked data according to a graph's adjacency matrix~\cite{Henry:2007,VisualizationZoo:2010}. 08598ba Init. Michael Aufreiter authored Nov 22, 2011 498 \end{itemize} 499 b7422b6 Use fancy code listings. Michael Aufreiter authored Nov 22, 2011 500 \begin{figure} 501 \centering 502 \includegraphics[width=1\textwidth]{force-directed-layout} 503 \caption{Force Directed Layout of Les Miserables Character Co-occurrences} 504 \label{fig:force-directed-layout} 505 \end{figure} 506 08598ba Init. Michael Aufreiter authored Nov 22, 2011 507 508 \section{Summary} 509 %%%----------------------------------------------------------------------------- 510 511 The basic concepts of Information Visualization were introduced in this chapter. After taking a look at the \emph{Visualization Process} in general, illustrative examples were used to describe the \emph{Tasks} and \emph{Data Types} of Information Visualization according to Shneiderman~\cite{shneiderman96eyes}. Based on that fundamental knowledge, the next chapter is dedicated to the application of Information Visualization within web-based environments. 512 513 \end{english}