Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8 - Aufgabe 2: Difference between revisions

From InfoVis:Wiki
Jump to navigation Jump to search
(Removed SPAM)
(Removed SPAM)
 
Line 1: Line 1:
==Evolution==
== Poor Graphic ==
[[Image:Few05snowfall.gif|none|thumb|400px|Idaho Ski Resort Annual Snowfall (click on image for larger version)]]


=== General Developments (similar for all) ===
----
 
* Changing the intervalls of the scale to a equidistant one with 5 classes.
* Taking a (more or less) calm background for the graphic ba using a map without any saturation (referring to Data Ink Ration).
* Setting the background on a lower saturation to keep the focus on the symbols and the text naming the spots.
* Frameing the legend to give a clear idea about its position and size.
* Providing an (obligatory) measurement of the size of the land (lower right corner) which is necessary.
* By taking an additional color we wanted to rise the aestethic aspect of the graphic. Additionally this helps viewers to distinguish between symbols and text.
 
* Unterschiedlich grosse Mengen können durch verschieden grosse Symbole sehr gut (meiner Meinung nach am besten) dargestellt werden. Diese 'Kodierung' ist wirklich intuitiv zu verstehen (egal welches Symbol verwendet wird).
* Farben sind sinnvoll wenn sie notwendig sind, d.h. wenn dadurch ''zusätzliche'' Information gegeben wird. Ansonsten machen sie die Graphik "unruhig".
* 'Tortendiagramme' zeigen 'Anteile'. Sie suggerieren z.B. in diesem Beispiel das 500 inches 100 Prozent sind, und das sich alle anderen daran zu messen haben.
* Ich kann noch immer nicht sehen das Schwarz viel, und Rot wenig Schnee ist, und Hellrot noch weniger Schnee.
* Helle Flächen treten vor dunklen in den Vordergrund und umgekehrt (betrifft die Einfärbung des Hintergrunds).
* Eine Überschrift in einer anderen Farbe und Schrift macht die Graphik unnötig unruhig. Durch die gleiche (wenn auch größere) Schriftart der Überschrift wird die Zugehörigkeit zur Graphik betont (wenn man bedenkt, dass die Graphik eingebettet in andere, teilweise graphische, Elemente sein wird). Prinzip der Ähnlichkeit.
 
=== GRAFIK 1 ===
{|
|[[Image:SnowfallIdaho.jpg|100px|width=100px Idaho Snowfall - Snowflake 1]]
|align="left" valign="top"|Our first approach was to identify the users. We assumed the graphic to come from a touristic background. Therefore we provided a map of the shape of the land beneath the spots. The symboly mapping the classes of snow where developed in quite an effort, according to consistency and the rules for representing classified data.
|}


=== GRAFIK 2 ===
== Resulting Graphic ==


{|
<!--
|[[Image:SnowfallIdaho6.jpg|100px|Idaho Snowfall - Blue Snowflake Substitute Legend]]
[[Image:SnowfallIdaho7.jpg|Annual Average Snowfall in Idaho - corrected graphic]]<br>
|align="left" valign="top"|The discussions about the snowflakes from above would not stop, so we made up for a different mapping. We thought that it might be useful to keep the symbol itself the same size for all classes, but map the rise in snow through saturation in color. Additionally we made up lines in the circle to stress the quantity is rising by more lines. These lines had the form of a star, which schould understraigt the snow measurement.<br>There is also a similarity to the '''Sunflower Plot''' as known from Exploratory Data Analysis (used for scatterplot with discrete values).
[Seyfang, Fritz, Baldass, Schnabl, 2005]
|}
-->


=== GRAFIK 3 ===
[[Image:SnowfallIdaho9.jpg|Annual Average Snowfall in Idaho - corrected graphic]]<br>
[Seyfang, Fritz, Schnabl, 2005]


{|
== Comparison ==
|[[Image:Idaho_Snowfall.png|100px|Idaho Snowfall - Piechart Legend]]
|align="left" valign="top"|Even another approach to the legend, and thus the mapping of the spots to the classes was apartially filled circle. This can be seen as a '''Pie Chart'''. In addition the color saturation should represent the amount of snow as well.
|}


=== GRAFIK 4 ===
{|border=0px cellpadding=3px cellspacing=3px|
{|
!Element
|[[Image:Idaho04.gif|100px|Idaho Snowfall - Bar Legend]]
!Poor Graphic
|align="left" valign="top"|After finding out the exact values (internet research), we also wanted to look at a barplot approach. This turned out to not give a good overview about the situation as a whole.  
!Worked Graphic
|-
|valign="top" bgcolor="#eeeeee"|'''legend'''
|valign="top" bgcolor="#eeeeee"|The legend is inconsistent in its symbols and in its ranges (not continuous).
|valign="top" bgcolor="#eeeeee"|The symbols are continuous and follow the rules for representing non-metric but ordinary classes of ranges [1][Miksch, 2005]<br>Moreover the ranges which are represented by the symbols were made to descend into one another.  
|-
|valign="top"|'''legend (symbols)'''
|valign="top"|The root version, even though its symbols are inconsitent in shape and color, gives a rough impression where snow can be expected in a major amount. It provides the user with some sort of a rough overview about Idaho and the snowfall. This is information we thought is very useful.
|valign="top"|The symbols now give a good impression where high amounts of snowfall can be expected. They are kept simple and easy to read [6] [Muster et. al., 2005].
|-
|valign="top" bgcolor="#eeeeee"|'''legend (background)'''
|valign="top" bgcolor="#eeeeee"|The legend has no explicit bakground.
|valign="top" bgcolor="#eeeeee"|The background of the legend is in white, keeping it seperated from the grey overall bacground and maximizing the contrast to the symbols and the text in the legend. We have also tried some backgrounds giving the shape of the country, or color coding, but we choose the simplest one [6] [Muster et. al., 2005].
|-
|valign="top"|'''background (map, the image)'''
|valign="top"|Keeps no information (for the data of snowfall)
|valign="top"|Was exchanged by a satellite view of Idaho, giving just the outer bounds of the state and the inner borders of the different districts. By that we reached a higher data ink ration [3] [Schwarz et. al., 2005].
|-
|valign="top" bgcolor="#eeeeee"|'''background (radial gradient)'''
|valign="top" bgcolor="#eeeeee"|Is distracting the viewer, keeps no additional information.
|valign="top" bgcolor="#eeeeee"|Was changed to a very light gray background to keep a contrast between the shape of the land (which is white in large parts as well). Helps to raise the data ink ratio as well [3] [Schwarz et. al., 2005]
|-
|valign="top"|'''spot indicators (color)'''
|valign="top"|The spot indicators are all of a different color, which can not at all be related to the amount of snow it should represent.
|valign="top"|The color keeps no informations, so all symbols are of one color. Due to the rules of preattentive processing we used a color which has a very high amount of contrast but still is not distorting the viewer [5] [Kargl et. al.,2005]. We chose blue for the symbols.
|-
|valign="top" bgcolor="#eeeeee"|'''spot indicators (form)'''
|valign="top" bgcolor="#eeeeee"|Are inconsistent and the fourth one does not give a good idea where the center actually is (asymetric).
|valign="top" bgcolor="#eeeeee"|The new symbol has a clear center point, representing the spot on the map where the viewer can expect the place named. This goes in common with the ''location'' hat-rack from the five-hat-racks. [4] [Kargl et.al.,2005]
|-
|valign="top"|'''spot description (text)'''
|valign="top"|The text is in white, which has a too low contrast most of the time due to the irregular color of the background image.
|valign="top"|The text is written in simple black color [6] [Muster et. al., 2005].
|}
|}


----


==Empirical Study==
[1] [Miksch, 2005] Basic Understanding of Information Visualisation, Course Transparencies, p.29, Retrieved at: October 2005.<br>
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-0-Defs.pdf


For the reason of finding a decision for taking one of the above placed graphics, we made a survey with not involved persons. All of them had a technic related background and therefor some knowledge and experience with reading graphics.
[2] [Miksch, 2005] Focus + Kontext, Course Transparencies, p.5 ff, Retrieved at: October 2005.<br>
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-1.pdf


1. Grafik (s/w mit Symbolen)<br>
[3] [Schwarz et. al., 2005] Harald Schwarz, Simon Ledinek, Thomas Gamper, Gerold Mosizer, ''Data Ink Ratio'', Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_01_-_Aufgabe_1_-_Data-Ink_Ratio
6


2. Grafik (blaue Symbole)<br>
[4] [Kargl et.al., 2005] Horst Kargl, Muhammad Suhaib Karim, Andreas Rainer, Ali Akcaglayan, '' The Five Hat Racks'', Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G3_-_Aufgabe_1_-_Five_Hat_Racks
3


3. Grafik (rote Symbole)<br>
[4] [Kargl et.al., 2005] Horst Kargl, Muhammad Suhaib Karim, Andreas Rainer, Ali Akcaglayan, ''Preattentive Processing'', Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G3_-_Aufgabe_1_-_Preattentive_Processing
3


----
[6] [Muster et. al., 2005] Anna Muster, Jürgen Puchts, Christian Rainer, Christoph Sölder, ''The Principle of Simplicity'', Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G4_-_Aufgabe_1_-_Ockham%27s_Razor_/_Occam%27s_Razor_/_Principle_of_Simplicity
Bitte um Erhöhung des Zählers um 1 bei einer Stimme für die jeweilige Grafik als "beste".


----
----
 
< [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G8|G8]]<br>
== Bewertung ==
<< [[Teaching:TUW_-_UE_InfoVis_WS_2005/06|overview]]
'''Punkte NEU: 19''' (Begründung siehe unten)
 
'''Punkte: 16'''
 
'''Begründung:'''
*Die Analyse der Grafik ist OK (allerdings habt ihr keine Bezüge zu den Designprinzipien hergestellt)
*Eure Verbesserung ist gut gelungen<br>
Hier noch einige Kommentare:
**Verbesserung des Hintergrundes ist sehr gut gelungen
**Umrandung der Legende könnte entfallen (ist ausserdem sehr dominant, weil eine dicke schwarze Linie verwendet wurde)
**Hintergrundverlauf bei Legende ist meiner Meinung nach nicht nötig bzw. kaum sichtbar.
**Veränderung der Skala in eine lineare ist sehr gut
**Die Snowflake Symbole sollten komplett weggelassen werden. (Die Information ist ohnehin in der Größe des Kreises kodiert. Die Symbole lenken eher davon ab - ausserdem stören sie den Eindruck der Flächenverhältnismäßigkeiten.)
**Was mir allerdings noch besser gefallen hat, ist euer Ansatz mit Balkendiagrammen. Denn in der jetzigen Form ist der Vergleich zwischein einzelnen Orten eher schwierig, weil sie über die Grafik verteilt sind. Mein Vorschlag wäre evt. eine Kombination mit einer Balkengrafikanzeige, die diese Vergleiche wesentlich vereinfachen würde.
 
 
Ihr habt die Möglichkeit, eure Ausarbeitung bis 16.11.2005 zu überarbeiten, um die derzeitigen Unzulänglichkeiten auszubessern. Wird das gemacht, so werden die Punkte danach klarerweise aufgewertet.
 
-- [[User:Iwolf|Wolfgang Aigner]] 18:58, 5 November 2005 (CET)
 
'''Begründung NEU:'''
* Verbesserung ist super!
* Eine Kleinigkeit: Ihr habt zwar eine Numerierung/Reihung beim Balkendiagramm, aber die Nummern finden sich in der Grafik unten nicht wieder...
* Warum sind bei euch die Balkendiagramme von rechts nach links aufgetragen und nicht von links nach rechts (normale Leserichtung)?
* Hinweis: Es gäbe noch eine Möglichkeit die Balkendiagramme lesbarer zu machen: (von E. Tufte [Tufte, 1991])
 
[[Image:Tufte-bar chart-redesign.gif|none|thumb|300px|Bar chart redesign.|[Tufte, 1991]]]
 
-- [[User:Iwolf|Wolfgang Aigner]] 11:04, 25 November 2005 (CET)
 
'''Comments'''
* The proposed changes are now applied in the graphic. Its revision is 11. - Stefan Schnabl, 25.11.2005
:'''''--> Nice work, thank you! A very good illustrating example for "How to redesign a graphic"!''''' -- [[User:Iwolf|Wolfgang Aigner]] 13:00, 26 November 2005 (CET)

Latest revision as of 10:30, 27 August 2007

Poor Graphic[edit]

Idaho Ski Resort Annual Snowfall (click on image for larger version)

Resulting Graphic[edit]

Annual Average Snowfall in Idaho - corrected graphic
[Seyfang, Fritz, Schnabl, 2005]

Comparison[edit]

Element Poor Graphic Worked Graphic
legend The legend is inconsistent in its symbols and in its ranges (not continuous). The symbols are continuous and follow the rules for representing non-metric but ordinary classes of ranges [1][Miksch, 2005]
Moreover the ranges which are represented by the symbols were made to descend into one another.
legend (symbols) The root version, even though its symbols are inconsitent in shape and color, gives a rough impression where snow can be expected in a major amount. It provides the user with some sort of a rough overview about Idaho and the snowfall. This is information we thought is very useful. The symbols now give a good impression where high amounts of snowfall can be expected. They are kept simple and easy to read [6] [Muster et. al., 2005].
legend (background) The legend has no explicit bakground. The background of the legend is in white, keeping it seperated from the grey overall bacground and maximizing the contrast to the symbols and the text in the legend. We have also tried some backgrounds giving the shape of the country, or color coding, but we choose the simplest one [6] [Muster et. al., 2005].
background (map, the image) Keeps no information (for the data of snowfall) Was exchanged by a satellite view of Idaho, giving just the outer bounds of the state and the inner borders of the different districts. By that we reached a higher data ink ration [3] [Schwarz et. al., 2005].
background (radial gradient) Is distracting the viewer, keeps no additional information. Was changed to a very light gray background to keep a contrast between the shape of the land (which is white in large parts as well). Helps to raise the data ink ratio as well [3] [Schwarz et. al., 2005]
spot indicators (color) The spot indicators are all of a different color, which can not at all be related to the amount of snow it should represent. The color keeps no informations, so all symbols are of one color. Due to the rules of preattentive processing we used a color which has a very high amount of contrast but still is not distorting the viewer [5] [Kargl et. al.,2005]. We chose blue for the symbols.
spot indicators (form) Are inconsistent and the fourth one does not give a good idea where the center actually is (asymetric). The new symbol has a clear center point, representing the spot on the map where the viewer can expect the place named. This goes in common with the location hat-rack from the five-hat-racks. [4] [Kargl et.al.,2005]
spot description (text) The text is in white, which has a too low contrast most of the time due to the irregular color of the background image. The text is written in simple black color [6] [Muster et. al., 2005].


[1] [Miksch, 2005] Basic Understanding of Information Visualisation, Course Transparencies, p.29, Retrieved at: October 2005.
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-0-Defs.pdf

[2] [Miksch, 2005] Focus + Kontext, Course Transparencies, p.5 ff, Retrieved at: October 2005.
http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-1.pdf

[3] [Schwarz et. al., 2005] Harald Schwarz, Simon Ledinek, Thomas Gamper, Gerold Mosizer, Data Ink Ratio, Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_01_-_Aufgabe_1_-_Data-Ink_Ratio

[4] [Kargl et.al., 2005] Horst Kargl, Muhammad Suhaib Karim, Andreas Rainer, Ali Akcaglayan, The Five Hat Racks, Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G3_-_Aufgabe_1_-_Five_Hat_Racks

[4] [Kargl et.al., 2005] Horst Kargl, Muhammad Suhaib Karim, Andreas Rainer, Ali Akcaglayan, Preattentive Processing, Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G3_-_Aufgabe_1_-_Preattentive_Processing

[6] [Muster et. al., 2005] Anna Muster, Jürgen Puchts, Christian Rainer, Christoph Sölder, The Principle of Simplicity, Created at: 10.10.2005, Retrieved at: 10.11.2005, http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G4_-_Aufgabe_1_-_Ockham%27s_Razor_/_Occam%27s_Razor_/_Principle_of_Simplicity

< G8
<< overview

Retrieved from "https://infovis-wiki.net/w/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G8_-_Aufgabe_2&oldid=16386"