InfoVis:Wiki - User contributions [en]

File:Folie11.jpg

2005-12-02T11:50:00Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==
(c) Horst Kargl
== Source ==

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-12-02T11:48:37Z

UE-InfoVis0506 9825503: /* Designproposal */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==

We have derived four parameters of capital import.
*the IP adress
*the time
*the requested page
*the referer page

Our first approach was to visualize this data via a scatter plott:
[[Image:Folie4.JPG|none|thumb|400px| First approach (click on image for larger version)]]

Our second approach was to visualize the access of the pages as a kind
of notwork.

*Every Page is a node
*The node size and colour depends on the amount of visitors (clients which have requested this page)
*References from external are represented with green squares and a line to the referred Page.
*References between pages are represented with a line
*The thickness and the closeness of the line and nodes represent the amount of references between those pages.

[[Image:Folie8.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie9.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie10.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie11.JPG|none|thumb|400px| First approach (click on image for larger version)]]

==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8][Gutwenger, 2000] Carsten Gutwenger, ''Sugiyama's Algorithm ( SugiyamaLayout )'' Created at: Feb. 2, 2000. Retrieved at: November 28, 2005 http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-12-02T11:48:19Z

UE-InfoVis0506 9825503: /* Designproposal */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==

We have derived four parameters of capital import.
*the IP adress
*the time
*the requested page
*the referer page

Our first approach was to visualize this data via a scatter plott:
[[Image:Folie4.JPG|none|thumb|400px| First approach (click on image for larger version)]]

Our second approach was to visualize the access of the pages as a kind
of notwork.

*Every Page is a node
*The node size and colour depends on the amount of visitors (clients which have requested this page)
*References from external are represented with green squares and a line to the referred Page.
*References between pages are represented with a line
*The thickness and the closeness of the line and nodes represent the amount of references between those pages.

[[Image:Folie8.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie9.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie10.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:LogVisulisierungsEntwurf.JPG|none|thumb|400px| First approach (click on image for larger version)]]

==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8][Gutwenger, 2000] Carsten Gutwenger, ''Sugiyama's Algorithm ( SugiyamaLayout )'' Created at: Feb. 2, 2000. Retrieved at: November 28, 2005 http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

File:LogVisulisierungsEntwurf.jpg

2005-12-02T11:47:58Z

UE-InfoVis0506 9825503: /* Copyright status */

== Summary ==

== Copyright status ==
(c) Horst Kargl

== Source ==

File:LogVisulisierungsEntwurf.jpg

2005-12-02T11:47:45Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-12-02T11:41:45Z

UE-InfoVis0506 9825503: /* Designproposal */

File:Folie11.JPG

2005-12-02T11:41:25Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==
(c) Kargl Horst
== Source ==

File:Folie8.JPG

2005-12-02T11:40:57Z

UE-InfoVis0506 9825503: /* Copyright status */

== Summary ==

== Copyright status ==
(c) Kargl Horst

== Source ==

File:Folie9.JPG

2005-12-02T11:40:45Z

UE-InfoVis0506 9825503: /* Copyright status */

== Summary ==

== Copyright status ==
(c) Kargl Horst

== Source ==

File:Folie10.JPG

2005-12-02T11:40:19Z

UE-InfoVis0506 9825503: /* Copyright status */

== Summary ==

== Copyright status ==

(c) Kargl Horst

== Source ==

File:Folie10.JPG

2005-12-02T11:40:00Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==

== Source ==

File:Folie9.JPG

2005-12-02T11:39:53Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-12-02T11:39:42Z

UE-InfoVis0506 9825503: /* Designproposal */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==

We have derived four parameters of capital import.
*the IP adress
*the time
*the requested page
*the referer page

Our first approach was to visualize this data via a scatter plott:
[[Image:Folie4.JPG|none|thumb|400px| First approach (click on image for larger version)]]

Our second approach was to visualize the access of the pages as a kind
of notwork.

*Every Page is a node
*The node size and colour depends on the amount of visitors (clients which have requested this page)
*References from external are represented with green squares and a line to the referred Page.
*References between pages are represented with a line
*The thickness and the closeness of the line and nodes represent the amount of references between those pages.

[[Image:Folie8.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie9.JPG|none|thumb|400px| First approach (click on image for larger version)]]
[[Image:Folie10.JPG|none|thumb|400px| First approach (click on image for larger version)]]

==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8][Gutwenger, 2000] Carsten Gutwenger, ''Sugiyama's Algorithm ( SugiyamaLayout )'' Created at: Feb. 2, 2000. Retrieved at: November 28, 2005 http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-12-02T11:39:23Z

UE-InfoVis0506 9825503: /* Designproposal */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==

We have derived four parameters of capital import.
*the IP adress
*the time
*the requested page
*the referer page

Our first approach was to visualize this data via a scatter plott:
[[Image:Folie4.JPG|none|thumb|400px| First approach (click on image for larger version)]]

Our second approach was to visualize the access of the pages as a kind
of notwork.

*Every Page is a node
*The node size and colour depends on the amount of visitors (clients which have requested this page)
*References from external are represented with green squares and a line to the referred Page.
*References between pages are represented with a line
*The thickness and the closeness of the line and nodes represent the amount of references between those pages.

[[Image:Folie8.JPG|none|thumb|400px| First approach (click on image for larger version)]]

==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8][Gutwenger, 2000] Carsten Gutwenger, ''Sugiyama's Algorithm ( SugiyamaLayout )'' Created at: Feb. 2, 2000. Retrieved at: November 28, 2005 http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

File:Folie8.JPG

2005-12-02T11:37:55Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==

== Source ==

File:Folie4.JPG

2005-12-02T11:35:36Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-11-28T11:29:54Z

UE-InfoVis0506 9825503: /* References */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==
==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8][Gutwenger, 2000] Carsten Gutwenger, ''Sugiyama's Algorithm ( SugiyamaLayout )'' Created at: Feb. 2, 2000. Retrieved at: November 28, 2005 http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-11-28T11:27:25Z

UE-InfoVis0506 9825503: /* References */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==
==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

[8] http://www.ads.tuwien.ac.at/AGD/MANUAL/SugiyamaLayout.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-11-28T11:26:50Z

UE-InfoVis0506 9825503: /* Known Solutions / Methods */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)[8]

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==
==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-11-28T11:05:13Z

UE-InfoVis0506 9825503: /* Known Solutions / Methods */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner and find the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==
==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3

2005-11-28T11:00:56Z

UE-InfoVis0506 9825503: /* Target Groups of Visualization */

==Topic: Webserver Logfile Visualization==
{{Quotation |Knowing the way the users utilise our website is instrumental to understand if we are providing the appropriate service, if our products are easily found and eventually, to what extent it accomplishes the goal we pursue. One of the common ways to get this knowledge is logfile analysis, a very useful yet not trouble free method. |[6][Duersteler, 2005]}}

==Application Area Analysis==
The logfiles webservers create, save information about every single request brought forward to the webserver. Data about the remotehost, date and time of the request, the request itself as well as a status report and the file size are only some of the data saved. Such logfiles can be enormous in size if the related webpage is visited often. The data stored in the logfiles contains valuable information about the visitors of the webpage, where they click on the page, from where they come from and indirect what they think is interesting or not. As mentioned below, this information can be used by Administrators, Web users, Web designers, Advertising companies, Software companies, Security centres and many more. Each of them has different interests, which often can be matched with data from the webserver logfiles. However, the data needs to be prepared according to the target group. 
So far the webservers deliver huge textfiles where the datasets are separated by blanks. There are several different statistical tools which can filter the data and draw graphs and diagrams out of the logfiles. However, Most of them barely utilize the potential of the information given.[6][Duerstler, 2005] and [7][Aigner, 2005]

==Dataset Analysis==
The Dataset we are analysing is a Webserver Logfile; Specifically an Apache Webserver Access Logfile. Originally there as been no commonly accepted standard for logfiles which made statistics, comparison and visualisation of logfile data very complicated [1][W3C]. Today there exist several different defined logfile standards. Two important formats shall be described below.
===The Common Logfile Format===
According to the World Wide Web Consortium [1][W3C] the Common Logfile Format is as follows:
''remotehost rfc931 authuser [date] "request" status bytes''
{|
|''remotehost'': ||Remote hostname (or IP number if DNS hostname is not available, or if DNSLookup is Off.
|-
|||remotehost is a one-dimensional discreet datatype. The IP Adress however carries different kinds of information. For a detailed describtion see [http://en.wikipedia.org/wiki/Ip_address Wikipedia].
|-
|''rfc931'':||The remote logname of the user.
|-
|||rfc931 is a one-dimensional discreet datatype.
|-
|''authuser'':||The username as which the user has authenticated himself.
|-
|||authuser is a one-dimensional discreet datatype.
|-
|''[date]'':||Date and time of the request.
|-
|||date has seven dimensions in the following format: [day/month/year:hour:minute:second zone] 
Day: ordinal, 2 digits 
Month: nominal, 3 letters 
year = ordinal, 4 digits 
hour = ordinal, 2 digits 
minute = ordinal, 2 digits 
second = ordinal, 2 digits 
zone = nominal, + or - and 4*digits
|-
||''"request"'':||The request line exactly as it came from the client.
|-
|||request has three dimensions in the following format: "request method /filename HTTP/version] 
The request method is nominal, there are eight defined [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - request methods| methods]]. 
The filename is discrete 
The HTTP version is theoretically ordinal. However, so far there exists only version 0.9, 1.0 and the current version 1.0
|-
|''status'':||The HTTP Status Code returned to the client.
|-
|||status is a one-dimensional nominal datatype. [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| Here]] you will find a description of the [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 3 - HTTP Status Code| HTTP Status Code]] classes.
|-
|''bytes'':||The content-length of the document transferred.
|-
|||bytes is a one-dimensional ordinal datatype.
|}

===Combined Logfile Format===
The Combined Logfile Format adds two further Positions to the Common Logfile Format (see [2][Apache]):
{|
|''referer'':||This gives the site that the client reports having been referred from.
|-
|||referer is a one-dimensional discreet datatype.
|-
|''agent'':||The User-Agent HTTP request header. This is the identifying information that the client browser reports about itself.
|-
|||agent is a one-dimensional discreet datatype.
|}
One entry in the Combined Logfile Format looks as follows:

''remotehost rfc931 authuser [date] "request" status bytes "referer" "agent"''

===Example Data===
The example data we will use for the prototype uses the Combined Logfile Format. One example entry in this file looks as follows:

128.131.167.8 - - [16/Oct/2005:09:56:22 +0200] "GET /skins/monobook/external.png HTTP/1.1" 200 1178 "http://www.infovis-wiki.net/index.php/Main_Page" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

''remotehost'': 128.131.167.8

''rfc931'': -

''authuser'': -

''[date]'': [16/Oct/2005:09:56:22 +0200]

''"request"'': "GET /skins/monobook/external.png HTTP/1.1"

''status'': 200

''bytes'': 1178

''Referer'': "http://www.infovis-wiki.net/index.php/Main_Page"

''Agent'': "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

The whole example data file can be downloaded [http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/data/infovis-wiki_httpd-logs.tgz here].

==Target Group Analysis==
===Target Groups of Visualization===
The usability of visualization in simulation includes visual processing in both static and dynamic form. The simulation database, the experiment process or its results are represented in a static form, e. g. as tables or diagrams. Also interaction with the simulation model and the direct manipulation of the model take place by using a graphical representation. The dynamic illustration of a process by animation makes it easier to understand complex issues. Therefore, the user interface and the visual aspect of our project will be developed and implemented using flash and XML. We think that, it will be better to understand for each user the predictable representations of given data by audio-visual design.
We have identified the following target groups:
#Administrators
#Web users
#Web designers
#Advertising companies
#Software companies (who developed browsers and web based applications)
#Security centers

But we will focus on the target group of Administrators or owner of the web site. The Visualization should give the target group the ability to see which parts of their web site is more often visited.

===Special Interests of Target Groups===
Each log contains different types of logs i.e. Errors, warnings, information, success audit and failure audits. Therefore the visualization of the log file is in each case for each target group different. The website administrators are interested in the popularity and/or usability of certain pages or areas of their website. In the other case, the visualization of logfiles provides information for illegal proceedings. The logfiles may be useful for advertising companies Such as; How many visitors came in a certain period on the web page? From where the visitors came? Which search words have been found or not found? Which pages have been looked at? What is the IP-number of visitor and from which country is he?..

===Known Solutions / Methods ===

*Webtracer (The Webtracer uses a wide range of protocols and databases to retrieve all information on a resource on the internet, such as a domain name, an e-mail address, an IP address, a server name or a web address (URL). The relations between resources are displayed in a tree, allowing recursive analysis.)
*Conetree(Cone trees are 3D interactive visualizations of hierarchically structured information. Each sub-tree associated to a cone; the vertex at the root of the sub-tree is placed at the apex of the cone and its children are arranged around the base cone. Text can be added to give more information about a node(children of the sub-tree)
*Matrix-Visualization(There are several alternative ways for visualizing the links and demand matrices.)
*Hyperspace-View(A graphical view of the hyperspace emerging from a document depicted a tree structure.)
*The Sugiyama algorithm&layout(Sugiyama algorithm draws directed acyclic graphs meeting the basic aesthetic cri-teria, which is very suitable to describe hierarchically temporal relationships amongworkflow entities. It can make visualisation of the workflow cleaner andfind the best structure for the hierarchical type of information representation. Sugiyama-layout has more benefits in more complex projects.)

==Aim of the Visualization==
===The Goals of Visualization===
The visualization of the logfile is intended to:
*alert you to suspicious activity that requires further investigation
*determine the extent of an intruder's activity (if anything has been added, deleted, modified, lost, or stolen)
*help you recover your systems
*provide information required for legal proceedings
*draw conclusions about the popularity and/or usability of certain pages or areas of the site.

==Designproposal==
==References==
[1][W3C] World Wide Web Consortium, Logging Control In W3C httpd. Created at: July, 1995. Retrieved at: November 16, 2005. http://www.w3.org/Daemon/User/Config/Logging.html#common-logfile-format.

[2][Apache] The Apache Software Foundation, ''Apache HTTP Server: Log files''. Retrieved at: November 16, 2005. http://httpd.apache.org/docs/1.3/logs.html

[3][Gershon et al., 1995] Nahum Gershon, Steve Eick, ''Information Visualization Processdings Atlanta'', First Edition, IEEE Computer Society Press, October 1995.

[4][Kreuseler et al., 1999] Matthias Kreuseler, Heidrun Schumann, David S. Elbert et al., ''Work Shop on New Paradigms in Information Visualization and Manipulation'', First Edition, ACM Press, November 1999.

[5][WebTracer] http://forensic.to/webhome/jsavage/www.forensictracer%5B1%5D

[6][Duersteler, 2005] Juan C. Duersteler, ''Logfile Analysis''. InfoVis.net Magazine, Created at: Oktober 17, 2005. Retrieved at: November 20, 2005. http://www.infovis.net/printMag.php?num=174&lang=2

[7][Aigner, 2005] Wolfgang Aigner, ''Webserver Logfile Visualization''. Created at: November 2, 2005. Retrieved at: November 20, 2005. http://asgaard.tuwien.ac.at/%7Eaigner/teaching/infovis_ue/infovis_ue_aufgabe3_webserverLogVis.html

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-08T23:02:07Z

UE-InfoVis0506 9825503: /* Suggestion 1 */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Summary =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusions and suggestions =

== Suggestion 1 ==
The Visualization itself is not so bad, but only good for print version. The diameters of the different circles gives a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [SunBurst] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

This visualization approach reduces the drawback of the original one where the different departments are not so easy to compare.

[[Image:100 0034.JPG|none|thumb|300px|Multiple view approach (click on image for larger version)]]

[[Image:100 0033.JPG|none|thumb|300px|Multiple view approach with expanded sub-node(click on image for larger version)]]

== Suggestion 2 ==

[[Image:Drawing19.jpg|none|thumb|768px]]

[[Image:Drawing1.jpg|none|thumb|768px|(click on image for larger version)]]

== Suggestion 3 ==

Yet another approach for visualizing the "Budget and Taxes" is as follows. It presents the idea, not the whole graphic with actual figures. It uses the tree map approach.

* The big vertical rectangle encapsulates the directly section wise budget allocations (like R&D, Operations, etc.).

* Standard colors (navy blue for Navy, Grey for Air Force, Brown for Army) are used.

* Each horizonontal section is further proportionately divided between the three forces.

* A few sections which are common and hence equivalent to all the forces are drawn at the top (Others DOD and Defence wide). Since they are assumed to contribute equivalently towards other departments, therefore, all forces Navy, Army and Air Force are equally spaced there.

* Within each rectangular block of a force, further small blocks are made for showing small spendings on AEGIS destroyer, Super Hornet etc. Their sizes are also assumed to be proportional to their allocated budget. Due to space limitation, they are given numbers 1,2,3... Upon mouse click these can be further zoomed-in, or their description can be specified in the legend.

* Alongwith actual budget amount, the idea to show it in terms of different percentages, is employed. People are often interested in these kind of percentages when they are looking at budget.

Based upon this approach, rest of the graphic for military and non-military spendings can also be efficiently represented. Although not the perfect one, however it removes some of the defficiencies of the existing visualization. Now the user has a better and quick overview, with details.

[[Image:Death_and_taxes_visualization_-_Modified1.jpg]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[SunBurst] http://www.cc.gatech.edu/gvu/ii/sunburst/

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T18:47:03Z

UE-InfoVis0506 9825503: /* Conclusion and further suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [SunBurst] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

This visualization approach reduces the drawback of the original one where the different departments are not so easy to compare.

[[Image:100 0034.JPG|none|thumb|300px|Multiple view approach (click on image for larger version)]]

[[Image:100 0033.JPG|none|thumb|300px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[SunBurst] http://www.cc.gatech.edu/gvu/ii/sunburst/

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T18:30:38Z

UE-InfoVis0506 9825503: /* Conclusion and further suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [SunBurst] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image:100 0034.JPG|none|thumb|300px|Multiple view approach (click on image for larger version)]]

[[Image:100 0033.JPG|none|thumb|300px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[SunBurst] http://www.cc.gatech.edu/gvu/ii/sunburst/

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T18:30:20Z

UE-InfoVis0506 9825503: /* Resources */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image:100 0034.JPG|none|thumb|300px|Multiple view approach (click on image for larger version)]]

[[Image:100 0033.JPG|none|thumb|300px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[SunBurst] http://www.cc.gatech.edu/gvu/ii/sunburst/

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T18:28:10Z

UE-InfoVis0506 9825503: /* Conclusion and further suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image:100 0034.JPG|none|thumb|300px|Multiple view approach (click on image for larger version)]]

[[Image:100 0033.JPG|none|thumb|300px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T18:27:28Z

UE-InfoVis0506 9825503: /* Conclusion and further suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image:100 0034.JPG|none|thumb|600px|Multiple view approach (click on image for larger version)]]

[[Image: |none|thumb|600px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

File:100 0034.JPG

2005-11-03T17:43:12Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==
(c) Horst Kargl
== Source ==

File:100 0033.JPG

2005-11-03T17:42:58Z

UE-InfoVis0506 9825503:

== Summary ==

== Copyright status ==
(c) Horst Kargl
== Source ==

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T15:28:24Z

UE-InfoVis0506 9825503: /* Conclusion and further suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image: |none|thumb|600px|Multiple view approach (click on image for larger version)]]

[[Image: |none|thumb|600px|Multiple view approach with expandet sub-node(click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-03T15:27:03Z

UE-InfoVis0506 9825503:

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-02T22:31:16Z

UE-InfoVis0506 9825503: /* Conclusion and forther suggestions */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and further suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-02T15:02:09Z

UE-InfoVis0506 9825503: /* Conclusion */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion and forther suggestions =

The Visualization itself is not so bad, but only good for print version. The diameters of the different circles give a good overview of the dispersion of the budget. The problem is that no one can read the name of the different departments. Only when you zoon in the picture you can read it, but then you loos the overview. One approaches to improve the print version is e.g. to change the background colour.

But to improve the understanding of the picture we suggest a dynamic visualization!
The problem of the data set is that there are too many different departments and sub-departments. They can not be displayed in a normal diagram. There are up to 200 departments with nearly the same budget and with a normal diagram e.g. scatter plots there is no chance to distinguish the different departments and there are no specific information which can be derived from that kind of visualization.

Our approach is to use a SunBurst [] like visualization. SunBurst is good to visualize hierarchies with a lot of data. The benefit of this technique is that you can easily compare different departments and sub-departments. The sizes of the different parts represent the budget. The different parts can be labelled with the $ amount or with % from the total budget and/or the Budget of the super-department.

The aim of this visualization is to compare different departments. You can go deeper to one sub-department and then compare two or more of them. It is also possible to get a total overview of all apartments by expanding all of the sub-departments. The drawback of this visualization is that departments with very little budget are nearly invisible in the circle. This disadvantage can be solved by dynamically colour or highlight different parts of the data. Another improvement could be to add a second or third view to the SunBurst visualization. These views could be a simple tree (like the explorer) or a Gaussian distribution of the budget. The data sets are the departments with their budget. With this visualization you can see how many departments have which amount of budget. By selecting a rage of the Gaussian distortion the relevant departments are expanded in the SunBurst and highlited in the explorer-tree. It sould be also possible to show the detail data e.g. name, amount of budger, etc. when you move your mouse over a part of the SunBurst Visualization.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-02T14:34:00Z

UE-InfoVis0506 9825503:

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Conclusion =

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:43:32Z

UE-InfoVis0506 9825503: /* Chart Junk */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 1 - Chart Junk|Chart Junk]] ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:42:35Z

UE-InfoVis0506 9825503: /* Visual clutter */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Visual Clutter|Visual Clutter]] ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== Chart Junk ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:42:00Z

UE-InfoVis0506 9825503: /* Color coding */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== Visual clutter ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== Chart Junk ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 09 - Aufgabe 1 - Color Coding / Color|Color Coding / Color]] ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:40:59Z

UE-InfoVis0506 9825503: /* Gestalt Laws */

= Poor Graphic =
[[Image:Mibi04death-and-taxes.jpg|none|thumb|600px|Death and Taxes: A visual look at where your tax dollars go (click on image for larger version)]]

= Drawbacks / Critical analysis =

Before designing visualization for the “Death and Taxes”, it is important to find what is wrong with the existing one, analyze the missing or wrongly applied essential design principles. Then we will be in a better position to make corrections, and come up with an improved visualization.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Preattentive Processing|Preattentive Processing]] ==

“Tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive [Healey et al., 2005]”. These tasks can be performed without the need of focused attention.

* From the given visualization displayed on a 17” display what we can perceive instantly is that the budget is allocated to a number of departments and further allocated to various sub-departments within those. However, the display is so cluttered that we are unable to perceive more than that.

* Lengthy description in the biggest circle and as a part of legend can’t be treated with preattentive processing.

* The proportionate sizes of circles help a lot in finding instantly which department has the highest or lowest budget.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 1 - Five Hat Racks|Five Hat Racks]]==

There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse) [Truong, 2005]”.

* Category (similarity relatedness): Satisfies as far as the depiction of budget in different departments is concerned. But if you see the sub-departments then this aspect is violated.

* Time (chronological sequence): This aspect is not applicable for the given visualization, because this shows the budget for one year only.

* Location (geographical or spatial references): This aspect is also not applicable for the given visualization. Because the visualization does not show the spending of budget in different states. This might be a missing information. Without this information it is assumed that the depicted spending is same across all the states (expenditures on health, education etc.).

* Alphabet (alphabetical sequence): Arrangement is not alphabetical in the given picture. But it is not necessary that the improvement will be made by introducing alphabetical sequences. Rather some more meaningful sequences should be exploited.

* Continuum (magnitude; highest to lowest, best to worse): This aspect is successfully used in the picture. See the sizes of circles which are proportionate with the allocated budget.

== Visual clutter ==

“Clutter is the state in which excess items, or their representation or organization, lead to a degradation of performance at some task [Rosenholtz et al., 2005]”.

* It is not possible to visualize all the elements of the given picture on a standard display. There are many circles, and associated descriptions. Perhaps the descriptions can be removed as a default. When user focuses or hovers the mouse, then the circle under focus could be displayed with associated description.

* On the initial screen, the circular sub-departments can be hidden. Those can be displayed under user control when the user focuses on one or a group of the bigger circles.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G7 - Aufgabe 1 - Gestalt Laws|Gestalt Laws]]==

"The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts [Pedroza, 2004]”. Often used Gestalt principles are Proximity, Similarity, Closure and Good Continuation.

* Proximity: Elements close to each other tend to form groups. This is evident from the picture. The small circles in vicinity of bigger ones tend to form one group. This also reveals the fact that may be the connecting lines were not necessary and are in fact redundant.

* Similarity: Elements that are similar in some way tend to be grouped together. If we see at the color encodings used, then this aspect seems to be violated. For example, blue parts could be perceived as related, but in fact those are not.
* Closure: How items are grouped together if they tend to complete a pattern. It seems that this design aspect is not used in the given picture. Instead the author has used explicit connecting lines which in turn increase visual clutter.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Lie Factor|Lie Factor]] ==

The “Lie Factor” is a value to describe the relation between the size of effect shown in a graphic and the size of effect shown in the data. "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented [Tufte, 1991]”.

* If you look at the relative sizes of circles and the allocated budgets, this aspect is satisfied.

== Chart Junk ==

"The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies - to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chart junk [Tufte, 1991]”.

* The connecting lines between circles are chart junk.
* The descriptions along with meaningful logos are also perhaps chart junk.
* Black background is making it diffciult to focus the eyes on the graphic.
* Percentages might be more helpful for initial overview instead of writing exact amount in dollars.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Data-Ink Ratio|Data-Ink Ratio]] ==

"A large share of ink on a graphic should present data-information, the ink changing as the data change. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented [Tufte, 1991].”

* Excessive color is used for the background (all black), which is making it difficult to focus the eyes on the useful data.

* Space is wasted by displaying the complete logos mentioning long redundant texts, for example “United States of America” on many logos. It could be mentioned at a single location that the picture is all about USA.

* The description written inside the biggest circle should be moved away from the graphics. This would also make this circle smaller in size, which is not showing any data.

* The non-data ink which is used to elaborate or decorate the picture is also in excess.

== Color coding ==

Colors can be used intelligently to encode information in the picture. In the given picture the color encoding is used extensively but it is intermixed and got confused. For example, the circular sections for army, air force and navy all have different colors in spite of the fact that the sections are interrelated, for example R&D, Personnel, Operations etc. Thus principle of consistency is violated.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 01 - Aufgabe 1 - Aesthetic-Usability Effect|Aesthetic-Usability Effect]] ==

“The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs [markboulton.co.uk]”. Probably, the other design elements also play their part in making a product aesthetic.

* The rule of Golden ratio is apparently violated. This is evident if we look at the proportions of circles to one another. Their sizes are perfectly in proportion to the allocated budget, but their sizes realtive to one another vis-a-vis the rule of Golden Ratio is not observed. Two quantities are said to be in the golden ratio, if "the whole is to the larger as the larger is to the smaller"[Golden ratio].”

* If the black background is removed, then the existing picture is not bad as far as aesthetics are concerned.

== [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1 - Ockham's Razor / Occam's Razor / Principle of Simplicity|Ockham's Razor / Occam's Razor / Principle of Simplicity]] ==

According to rules elaborated by William of Ockham in his works [Hoffmann et al., 1997];

* It is futile to do with more what can be done with fewer. Quite meaningful logos are used, but the descriptions of the departments are also mentioned. One of these could be avoided.

* When a proposition comes out true for things, if two things suffice for its truth, it is superfluous to assume a third. It is related with insight, which is missing or is not easily perceivable from the existing picture.

* Plurality should not be assumed without necessity. ???

* No plurality should be assumed unless it can be proved (a) by reason, or (b) by experience, or (c) by some infallible authority. ???

== Layout ==

An efficient layout can be used to interactively visualize a complex visualization. In the given picture, if we use for example grid layout then its usability can be increased. It can be used to provide focus+context at the same time. In one layout window, whole picture can be shown like the existing one. While on another one, the focused part can be shown in a magnified way. However, the initial overview for the division into military and non/military spending is possible instantly.

= Suggestions =

More than one solutions can be adapted. Either an altogether new and improved visualization could be designed by taking care of existing deficiencies, or the existing picture could be improved by taking into account the following refinements.

* Remove black background

* Remove unnecessary circles

* Remove connecting lines

* Remove redundant descriptions where meaningful logos suffice

* Introduce %ages

* Use consistent color for similar sub-departments

* Make it possible to visulaize the information collectively under separate meaningful heads. For example, budget allocation for R&D, budget allocation for Maintenence etc.

= Resources =

[Golden ratio] http://www.absoluteastronomy.com/encyclopedia/g/go/golden_ratio.htm

[Healey et al., 2005] Christopher G. Healey, Kellog S. Booth and James T. Enns - High-Speed Visual Estimation Using Preattentive Processing - The University of British Columbia, June 1996 - Access Date: 24.October.2005. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf

[Hoffmann et al., 1997] Roald Hoffmann, Vladimir I. Minkin, Barry K. Carpenter, Ockham's Razor and Chemistry, HYLE--International Journal for Philosophy of Chemistry, Vol. 3 (1997), Retrieved at: October 24, 2005, http://www.hyle.org/journal/issues/3/hoffman.htm

[Mark Boulton, March 06, 2005] Journal, Aesthetic-Usability Effect http://www.markboulton.co.uk/journal/comments/aesthetic_usability_effect/

[Pedroza, 2004] Carlos Pedroza, The Encyclopedia of Educational Technology, San Diego State University. Access Date: 21 October 2005, http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

[Rosenholtz et al., 2005] Ruth Rosenholtz, Yuanzhen Li, Jonathan Mansfield, and Zhenlan Jin. Feature Congestion: A Measure of Display Clutter. http://web.mit.edu/rruth/www/Papers/RosenholtzEtAlCHI2005Clutter.pdf

[Truong, 2005] Donny Truong, “Universal Principles of design” Access Date: 21. Oktober 2005 http://www.visualgui.com/index.php?p=1

[Tufte, 1991] Edward Tufte, The Visual Display of Quantitative Information, Second Edition, Graphics Press, USA, 1991.

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:40:26Z

UE-InfoVis0506 9825503: /* Simplicity */

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:39:49Z

UE-InfoVis0506 9825503: /* Lie Factor */

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:39:19Z

UE-InfoVis0506 9825503: /* Aesthetic-usability effect */

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:38:55Z

UE-InfoVis0506 9825503: /* Data-ink ratio */

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:38:13Z

UE-InfoVis0506 9825503: /* Preattentive processing */

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G3 - Aufgabe 2

2005-11-01T17:37:37Z