Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 513 lines (347 sloc) 34.983 kB
08598ba Init.
Michael Aufreiter authored
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
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
23
24
e447a15 Minor fixes.
Michael Aufreiter authored
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
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
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
63
e447a15 Minor fixes.
Michael Aufreiter authored
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
65
e447a15 Minor fixes.
Michael Aufreiter authored
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
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
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
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
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
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
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
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
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
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
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
147
148 \begin{center}
149 \begin{tabular}{ | l | l | l | p{2.3cm} |}
150 \hline
e447a15 Minor fixes.
Michael Aufreiter authored
151 \emph{Title} & \emph{Authors} & \emph{Technolgies used} \\
152 \hline\hline
08598ba Init.
Michael Aufreiter authored
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
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
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
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
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
283 % \pagebreak
08598ba Init.
Michael Aufreiter authored
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
304 \pagebreak
08598ba Init.
Michael Aufreiter authored
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
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
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
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
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
354 % \item Understanding the current position and orientation when viewing objects
08598ba Init.
Michael Aufreiter authored
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
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
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
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
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
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
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
450 \pagebreak
08598ba Init.
Michael Aufreiter authored
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
458 % \pagebreak
08598ba Init.
Michael Aufreiter authored
459 \SuperPar Examples:
460
461 \begin{itemize}
e447a15 Minor fixes.
Michael Aufreiter authored
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
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
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
498 \end{itemize}
499
b7422b6 Use fancy code listings.
Michael Aufreiter authored
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
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}
Something went wrong with that request. Please try again.