InfoVis:Wiki - User contributions [en]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Prototype

2006-12-18T17:26:00Z

UE-InfoVis0607 0225451: Initial setup

=Project SpiraClock=

==Authors==
Anton Matzneller and Lambert Frey

==Task description==
Our task was to implement a prototype of the Spiraclock.

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is a combination of the well known time-visualization techniques Timeline and Timeband [Dürsteler, 2006] and an enhancement to regular calenders, timetables or pop-up reminders providing a continuous non-intrusive display of upcoming events. For further info visit this site [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Technique|SpiraClock-Technique]]

== Implementation description ==

The implementation is done in processing an open source programming language and environment for programms with an graphical user interface. This toolkit takes much of the burden of knowing how graphical programming works in java from the user.
This was done do quickly get a working prototyp which shows the really basic of the spiraclock idea. Yet there are no interactions implemented and also the visual style needs a lot of improvement.
At the moment the prototype shows the hour, minute and time hand. And displays up to 3 hours in advance. Appointments within this time are displayed as blue blocks.

== Screenshot ==

[[Image:SpiraClock_Prototyp_Screenshot.png]]

== Used Toolkits bzw. Libraries ==
The Processing Toolkit was used (see Links section)

== Links to further documentations ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Technique|Technique]]
* [http://processing.org/download/index.html Processing Toolkit]

== References ==
:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

File:SpiraClock Prototyp Screenshot.png

2006-12-18T17:02:36Z

UE-InfoVis0607 0225451: A screenshot of the first prototype of the SpiraClock made by group 3

== Summary ==
A screenshot of the first prototype of the SpiraClock made by group 3
== Copyright status ==

== Source ==
Selfmade screenshot (Anton Matzneller)

File:SpiraClock Prototyp Screenshot.gif

2006-12-18T17:01:44Z

UE-InfoVis0607 0225451: A screenshot of the first prototype of the SpiraClock

== Summary ==
A screenshot of the first prototype of the SpiraClock
== Copyright status ==

== Source ==
Selfmade Screenshot

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-12-06T09:29:35Z

UE-InfoVis0607 0225451: /* Description */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is a combination of the well known time-visualization techniques [[Timeline]] and [[Timeband]] and an enhancement to regular calenders, timetables or pop-up reminders providing a continuous non-intrusive display of upcoming events.

[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in the near future (depends on the spiral depth).
* Show information for the selected event.

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above includes:
* The time now is 12:11 (read as a normal analog clock).
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating it is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

Two dimensions are to be displayed simultaneously: Absolute time and events (start + duration)

An analog clock displays the absolute time.
A spiral nested inside the analog clock shows the nearby future. Every revolution of the spiral represents one hour. The outermost branch shows events which occur in less than one hour, the second outermost events one to two hours from now, and so on.
Colored blocks inside the spiral revolutions show the start and duration of events and are also used to display information about the events (tool-tip).

== Possibilities of interaction ==
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.
* Explicitly show time (digital clock) and/or current date.
* Change size of analog clock.
* Display time of day (if it is night or day) by changing background color.

=== Which Interaction for which purpose ===

* Overview/[[Zoom]]: Size of clock and zoom stage (depth of spiral) to select displayed time frame
* Navigation: By turning the minte/hour hands back and forth navigation in time
* Details-on-demand: Hoovering over event block displays event detail info
* Highlighting: Automatically when event come close to "now"-time or by manual select of the user
* Color encoding
** Display time of day
** Differentiate events eventually by category
** Saturation and transparency provides info about imminence of an event

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching talk:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-12-06T09:29:22Z

UE-InfoVis0607 0225451:

* Super Beschreibung der Technik!
* Was ist die von euch angesprochene "Timeband" Technik?
* Der Wiki-Link von "continuous" ist nicht wirklich passend, weil hier Datentypen beschrieben werden - ist ein etwas anderer Kontext.

-- [[User:Iwolf|Wolfgang Aigner]] 09:29, 6 December 2006 (CET)
:Über Timeband kann man unter [Dürsteler, 2006] nachlesen, gemeint sind so Sachen wie Themeriver, usw.. Kombination aus Timeline und Themeband habe ich geschrieben, weil mir die Spirale mehr erscheint als nur Timeline, da sie den Platz auch semi-2-dimensional ausnutzt und durch die Windungen ähnlich den Timebandanwendungen zu lesen ist. Obwohl hier in Wirklichkeit immernoch nur "eine Information" aufgetragen ist --[[User:UE-InfoVis0607 0225451|AntonMatzneller]] 10:29, 6 December 2006 (CET)

Teaching talk:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-12-06T09:29:15Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-12-04T12:29:04Z

UE-InfoVis0607 0225451:

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in the graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it is not easy to see which unit is used on which axis. Therefore a closer analysis is required. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) does not play into the representation at all. As can be easily seen the risk categories are not ordered by the amount of articles. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (low risk is meant to imply high fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which does not exist.
* '''Missing values:''' There a three records missing values for either odds of injury or odds of death, that are still positioned in the graphic, without explanation how these missing values where handled.
* '''No linear correlation:''' As already stated there is no apparent correlation between odds of injury (or odds of death) and number of articles, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance. If further proof for the non-correlation is need, one can calculate the correlation coefficient between e.g. odds of death and number of articles which is close to zero (-0,14).
* '''Fear index:''' Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed, in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

== Improved graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles.

According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore the task to "improve the graphic" is somewhat impossible. Instead we visualize the data in new diagrams just trying to show that the original "more risk, less fear"-thesis is not supported by the data.

Because of the wide spread of the values, we had to use a logarithmic scale on the Y-Axis. The dataelements are ordered by increasing number of articles about the subject. If the original "more risk, less fear"-thesis would hold the image would show three lines which all rise proportionally to each other.

Two examples to illustrate why:

Example 1) High risk and low fear: Low fear implies a low number of articles, therefore the point on the "number of articles"-line would have a low value for the Y-Coordinate. High risk implies the odds for an injury would be high e.g. 1/200, therefore, as 1/(1/200) = 200, also this value would have a low value for the Y-Coordinate.

Example 2) Low risk and high fear: High fear implies a high number of articles, therefore the point on the "number of articles"-line would have a high value for the Y-Coordinate. Low risk implies the odds for an injury would be low e.g. 1/6,000,000, therefore, as 1/(1/6,000,000) = 6,000,000, also this value would have a high value for the Y-Coordinate.

Now you can see why all three lines would be rising proportionally as they are ordered on the X-Axis by the "number of articles" and a higher number of articles would implie a higher value for the Y-Coordinate.

So no connection between the "number of articles" (fear index) and the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying, which isn't really surprising.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|Remarks: Y-Axis is logarithmic; Risk catehories on X-Axis ordered by increasing "number of articles";]]

The same graphic as above with the real distances on the X-Axis instead of the uniform distance used above. First with all data-points then without the two outliers "Drowning (while boating)" and "West Nile Virus" as those are the only two points with an article count > 300.

[[image:Verbessert_Trend_XAchse_V1.png|none|thumb|500px|none;]]

[[image:Verbessert_Trend_XAchse_Klein_V1.png|none|thumb|500px|none;]]

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-12-04T12:28:45Z

UE-InfoVis0607 0225451: /* Improved graphic */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in the graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it is not easy to see which unit is used on which axis. Therefore a closer analysis is required. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) does not play into the representation at all. As can be easily seen the risk categories are not ordered by the amount of articles. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (low risk is meant to imply high fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which does not exist.
* '''Missing values:''' There a three records missing values for either odds of injury or odds of death, that are still positioned in the graphic, without explanation how these missing values where handled.
* '''No linear correlation:''' As already stated there is no apparent correlation between odds of injury (or odds of death) and number of articles, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance. If further proof for the non-correlation is need, one can calculate the correlation coefficient between e.g. odds of death and number of articles which is close to zero (-0,14).
* '''Fear index:''' Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed, in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

== Improved graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles.

According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore the task to "improve the graphic" is somewhat impossible. Instead we visualize the data in new diagrams just trying to show that the original "more risk, less fear"-thesis is not supported by the data.

Because of the wide spread of the values, we had to use a logarithmic scale on the Y-Axis. The dataelements are ordered by increasing number of articles about the subject. If the original "more risk, less fear"-thesis would hold the image would show three lines which all rise proportionally to each other.

Two examples to illustrate why:

Example 1) High risk and low fear: Low fear implies a low number of articles, therefore the point on the "number of articles"-line would have a low value for the Y-Coordinate. High risk implies the odds for an injury would be high e.g. 1/200, therefore, as 1/(1/200) = 200, also this value would have a low value for the Y-Coordinate.

Example 2) Low risk and high fear: High fear implies a high number of articles, therefore the point on the "number of articles"-line would have a high value for the Y-Coordinate. Low risk implies the odds for an injury would be low e.g. 1/6,000,000, therefore, as 1/(1/6,000,000) = 6,000,000, also this value would have a high value for the Y-Coordinate.

Now you can see why all three lines would be rising proportionally as they are ordered on the X-Axis by the "number of articles" and a higher number of articles would implie a higher value for the Y-Coordinate.

So no connection between the "number of articles" (fear index) and the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying, which isn't really surprising.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|Remarks: Y-Axis is logarithmic; Risk catehories on X-Axis ordered by increasing "number of articles";]]

The same graphic as above with the real distances on the X-Axis instead of the uniform distance used above. First with all data-points then without the two outliers "Drowning (while boating)" and "West Nile Virus" as those are the only two points with an article count > 300.

[[image:Verbessert_Trend_XAchse_V1.png|none|thumb|500px|none;]]

[[Verbessert_Trend_XAchse_Klein_V1.png|none|thumb|500px|none;]]

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

File:Verbessert Trend XAchse Klein V1.png

2006-12-04T12:28:36Z

UE-InfoVis0607 0225451:

== Summary ==

== Copyright status ==

== Source ==

File:Verbessert Trend XAchse V1.png

2006-12-04T12:28:29Z

UE-InfoVis0607 0225451:

== Summary ==

== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-12-04T12:05:40Z

UE-InfoVis0607 0225451: /* Improved graphic */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in the graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it is not easy to see which unit is used on which axis. Therefore a closer analysis is required. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) does not play into the representation at all. As can be easily seen the risk categories are not ordered by the amount of articles. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (low risk is meant to imply high fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which does not exist.
* '''Missing values:''' There a three records missing values for either odds of injury or odds of death, that are still positioned in the graphic, without explanation how these missing values where handled.
* '''No linear correlation:''' As already stated there is no apparent correlation between odds of injury (or odds of death) and number of articles, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance. If further proof for the non-correlation is need, one can calculate the correlation coefficient between e.g. odds of death and number of articles which is close to zero (-0,14).
* '''Fear index:''' Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed, in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

== Improved graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles.

According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore the task to "improve the graphic" is somewhat impossible. Instead we visualize the data in new diagrams just trying to show that the original "more risk, less fear"-thesis is not supported by the data.

Because of the wide spread of the values, we had to use a logarithmic scale on the Y-Axis. The dataelements are ordered by increasing number of articles about the subject. If the original "more risk, less fear"-thesis would hold the image would show three lines which all rise proportionally to each other.

Two examples to illustrate why:

Example 1) High risk and low fear: Low fear implies a low number of articles, therefore the point on the "number of articles"-line would have a low value for the Y-Coordinate. High risk implies the odds for an injury would be high e.g. 1/200, therefore, as 1/(1/200) = 200, also this value would have a low value for the Y-Coordinate.

Example 2) Low risk and high fear: High fear implies a high number of articles, therefore the point on the "number of articles"-line would have a high value for the Y-Coordinate. Low risk implies the odds for an injury would be low e.g. 1/6,000,000, therefore, as 1/(1/6,000,000) = 6,000,000, also this value would have a high value for the Y-Coordinate.

Now you can see why all three lines would be rising proportionally as they are ordered on the X-Axis by the "number of articles" and a higher number of articles would implie a higher value for the Y-Coordinate.

So no connection between the "number of articles" (fear index) and the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying, which isn't really surprising.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|Remarks: Y-Axis is logarithmic; Risk catehories on X-Axis ordered by increasing "number of articles";]]

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching talk:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-12-04T11:47:20Z

UE-InfoVis0607 0225451:

== Erste Einträge ==
Für weitere Hints was zu machen ist, siehe den deutschen Text im Artikel. Insbesonders anhand von Korrelation können wir glaubwürdig unterlegen das nicht der inverse Zusammenhang zwischen Verletzungs/Todeswkt und Artikelanzahl besteht wie er in der Graphik dargestellt ist. --[[User:UE-InfoVis0607 0225451|AntonMatzneller]] 20:26, 12 November 2006 (CET)

== Bewertung ==
'''Punkte: 15'''

=== Begründung: ===
*Die Analyse der Grafik ist gut!
*Die Verbesserung allerdings weniger
**Vor allem die erste Version (Liniendiagramm) ist eher eine Verschlimmbesserung...
**Ein Liniendiagramm ist gut dafür geeignet Verläufe (z.B. über Zeit) bzw. Veränderungen und Trends darzustellen. In eurem Fall ist das Verbinden der einzelnen Punkte aber etwas, das überhaupt nicht in den Daten enthalten ist! D.h. eure Darstellung ist nicht [[Expressiveness|expressiv]]!
**Zudem fehlen die Achsenbeschriftungen völlig. Wie kommt die Reihung auf der x-Achse zustande? (Wie mir scheint aufsteigend nach "Fear Factor" - das ist allerdings ein quantitativer Wert - d.h. die Abstände zwischen den Werten dürften eigentlich nicht gleich sein.
**Die zweite Darstellung ist zwar etwas besser, aber auch nicht wirklich geeignet.
** Die Position auf er x-Achse entspricht nicht den angegebenen Werten.
**Wie habt ihr "total risk" berechnet? (Addition der beiden Werte?)
**Die Rahmen rund um die Balken sollten weggelassen werden.
**Der vertikal angeordnete Text ist nur sehr schwer lesbar --> besser wäre eine Drehung der gesamten Grafik um 90°
*Die Erklärung der verbesserten Grafiken ist äusserst knapp gehalten.

'''''Ihr habt wieder die Möglichkeit, die angegebenen Dinge noch zu verbessern - dann wird natürlich eure Punkteanzahl aufgewertet!'''''"

-- [[User:Iwolf|Wolfgang Aigner]] 16:31, 15 November 2006 (CET)

== Antwort zu "Verbesserungsgraphik 1" ==

Es war gar nicht unsere Absicht die Graphik zu "verbessern", da das unserer Ansicht nach nicht möglich ist. Schließlich ist die Aussage die die Graphik transportieren wollte falsch.
Also haben wir uns entschlossen das wir genau das aufzeigen. Was unserer Meinung nach auch aus dem Text hervorgehen sollte.

Deswegen haben wir für die erste Graphik auch ein Liniendiagramm verwendet, das eben genau einen Trend bzw. den eben nicht existenten Trend, den der Autor uns unterjubeln will aufzeigen sollte. Insofern war die Verbindung der Punkte glaub ich richtig. Damit kann man nämlich ersehen das die "Angst" sich nicht proportional zur "Anzahl der Artikel" verhält. Ansonsten müssten alle 3 Linien nach oben zeigen. Auf der X-Achse ist nach "Anzahl der Artikel" geordnet. Wenn man da den quantitativen Wert verwendet kann aufgrund der Datenhäufung um 40-250 aber nichts mehr erkennen. Deswegen haben wir die Intervalle einheitlich gewählt, da uns der Trend wichtig war und der so besser zu erkennen ist.
Ich hab jetzt mal versucht die Graphik auszubessern und auch den Text nochmal überarbeitet und auch 2 Graphiken wo auf der X-Achse die quantitativen Werte verwendet werden upgeloadet.

Erbitte mir wieder ein Kommentar dazu ob das jetzt besser ist. Auch in Anbetracht meiner obigen Erklärung zu unserer Herangehensweise. --[[User:UE-InfoVis0607 0225451|AntonMatzneller]] 12:47, 4 December 2006 (CET)

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T22:50:12Z

UE-InfoVis0607 0225451: /* Possibilities of interaction */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is a combination of the well known time-visualization techniques [[Timeline]] and [[Timeband]] and an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.

[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in the near future (depends on the spiral depth).
* Show information for the selected event.

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above includes:
* The time now is 12:11 (read as a normal analog clock).
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating it is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

Two dimensions are to be displayed simultaneously: Absolute time and events (start + duration)

An analog clock displays the absolute time.
A spiral nested inside the analog clock shows the nearby future. Every revolution of the spiral represents one hour. The outermost branch shows events which occur in less than one hour, the second outermost events one to two hours from now, and so on.
Colored blocks inside the spiral revolutions show the start and duration of events and are also used to display information about the events (tool-tip).

== Possibilities of interaction ==
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.
* Explicitly show time (digital clock) and/or current date.
* Change size of analog clock.
* Display time of day (if it is night or day) by changing background color.

=== Which Interaction for which purpose ===

* Overview/[[Zoom]]: Size of clock and zoom stage (depth of spiral) to select displayed time frame
* Navigation: By turning the minte/hour hands back and forth navigation in time
* Details-on-demand: Hoovering over event block displays event detail info
* Highlighting: Automatically when event come close to "now"-time or by manual select of the user
* Color encoding
** Display time of day
** Differentiate events eventually by category
** Saturation and transparency provides info about imminence of an event

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:59:43Z

UE-InfoVis0607 0225451: /* Visual Mapping */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It's a combination of the well known time-visualization techniques [[Timeline]] and [[Timeband]] and an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in near future (depends on the spiral depth)
* Show info to the selected event

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

Two dimensions are to be displayed simultaneously: Absolute time and events (start + duration)

An analog clock displays the absolute time.
A spiral nested inside the analog clock shows the nearby future. Every revolution of the spiral representing an hour. The outermost branch shows the events which occur in less than one hour. The second outermost those events distant one to two hours from now on. And so on.
Colored blocks inside the spiral revolutions show the starting and duration of an event and are also used to display infos about the event (tool-tip).

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.
* Explicitly show time (digital clock) and/or current date
* Change size of analog clock
* Display time of day (if it's night or day) by changing background color

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:51:51Z

UE-InfoVis0607 0225451: /* How does the user interact with the visualization */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It's a combination of the well known time-visualization techniques [[Timeline]] and [[Timeband]] and an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in near future (depends on the spiral depth)
* Show info to the selected event

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.
* Explicitly show time (digital clock) and/or current date
* Change size of analog clock
* Display time of day (if it's night or day) by changing background color

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:48:24Z

UE-InfoVis0607 0225451: /* Description */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It's a combination of the well known time-visualization techniques [[Timeline]] and [[Timeband]] and an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in near future (depends on the spiral depth)
* Show info to the selected event

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:44:47Z

UE-InfoVis0607 0225451: /* Example questions this visualization solves */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in near future (depends on the spiral depth)
* Show info to the selected event

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:41:53Z

UE-InfoVis0607 0225451: /* Description */

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

=== Example questions this visualization solves ===
* What time is it?
* When does the next event start?
* How long does an event last?
* How many events are in near future (depends on the amount of spiral revolutions displayed)
* Show info to the selected event

'''Example'''

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:35:49Z

UE-InfoVis0607 0225451: /* Intended Purpose */ removed

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:26:58Z

UE-InfoVis0607 0225451: /* Description */: Rewrite

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is an enhancement to regular calenders, timetables or pop-up reminders providing a [[Data_Type|continuous]] non-intrusive display of upcoming events.
[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Intended Purpose ===
* Goals and Objectives (What should be achieved)
* Problems/Tasks to be solved
* Example questions (which this visualization solves)

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-27T21:00:37Z

UE-InfoVis0607 0225451:

== SpiraClock ==

=== Description ===

SpiraClock is a visualization technique using an analog clock. It is used as a non-intrusive addition to regular calenders and timetables and is primarily used to display nearby events.

[[Image:Spiraclock_anim.gif|Animated SpiraClock]]

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

[[Image:Spiraclock_example1.jpg|Example usage of a SpiraClock]]

The information displayed in the SpiraClock example above include:
* The time now is 12:11 (read as a normal analog clock)
* The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
* The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating its is between one and two hours away).

=== Intended Purpose ===
* Goals and Objectives (What should be achieved)
* Problems/Tasks to be solved
* Example questions (which this visualization solves)

=== Target Group ===
* '''Office workers''' usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
* '''Students:''' SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
* '''Anyone using a computer clock as their primary clock''' can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===
Possible interactions with the SpiraClock include:
* Turning the minute and/or hour hands forward and backward to advance or regress in time.
* Zooming the spiral to display a broader or a more narrow time frame.
* Hovering over an event with the mouse to get more information about that event (tool-tip).
* Adding events by clicking the spiral.
* Modifying or deleting events by clicking those events.

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In ''UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology'', pages 29-38, San Francisco, California, 1998.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T19:00:01Z

UE-InfoVis0607 0225451:

== Spiraclock ==

Summary and Description

+

Bilder

=== Intended Purpose ===
* Goals and Objectives (What should be achieved)
* Problems/Tasks to be solved
* Example questions (which this visualization solves)

=== Target Group ===
* Who Why
* Interests
* Known Solutions

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In ''WSC’03: Proceedings of the 2003 Winter Simulation Conference'', Vol. 1, pages 737-745, New Orleans, 2003.

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T18:42:13Z

UE-InfoVis0607 0225451:

== Spiraclock ==

Summary and Description

+

Bilder

=== Intended Purpose ===
* Goals and Objectives (What should be achieved)
* Problems/Tasks to be solved
* Example questions (which this visualization solves)

=== Target Group ===
* Who Why
* Interests
* Known Solutions

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T18:41:58Z

UE-InfoVis0607 0225451: References

== Spiraclock ==

Summary and Description

+

Bilder

=== Intended Purpose ===
* Goals and Objectives (What should be achieved)
* Problems/Tasks to be solved
* Example questions (which this visualization solves)

=== Target Group ===
* Who Why
* Interests
* Known Solutions

== Visual Mapping ==

== Possibilities of interaction ==

=== How does the user interact with the visualization ===

=== Which Interaction for which purpose ===

* Navigation
* Zooming
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* ...

== References ==

:[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In ''CHI '02: CHI '02 extended abstracts on Human factors in computing systems'', pages 604-605, Minneapolis, Minnesota, 2002. ACM Press

:[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.

:[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.

:[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype||Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01|InfoVis:Wiki Gruppe 3 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

User talk:UE-InfoVis0607 0225451

2006-11-26T18:03:10Z

UE-InfoVis0607 0225451:

User talk:UE-InfoVis0607 0225451

2006-11-26T18:00:52Z

UE-InfoVis0607 0225451: asd

Nur ein Test

== asd ==

test2

User talk:UE-InfoVis0607 0225451

2006-11-26T18:00:30Z

UE-InfoVis0607 0225451:

Nur ein Test

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T17:59:46Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T17:59:34Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3

2006-11-26T17:58:54Z

UE-InfoVis0607 0225451:

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Technique|Technique]]

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Prototype|Prototype]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

2006-11-26T17:58:11Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3

2006-11-26T17:57:59Z

UE-InfoVis0607 0225451:

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Technique|Technique]]

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_01_-_Aufgabe_3_-_Technique|Prototype]]

Teaching talk:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3

2006-11-26T17:27:28Z

UE-InfoVis0607 0225451:

Da ausser der Rückmeldung vom Lamprecht keinerlei Präferenz oder Interesse an irgendeiner Technik bekundet wurde und vom Michael gar nix gekommen ist habe ich einfach Spiraclock mal als unsere Technik eingetragen --[[User:UE-InfoVis0607 0225451|AntonMatzneller]] 18:27, 26 November 2006 (CET)

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3

2006-11-26T17:26:16Z

UE-InfoVis0607 0225451:

[[Technique]]

[[Prototype]]

Teaching:TUW - UE InfoVis WS 2006/07 - Aufgabe 3 - Technikauswahl

2006-11-26T17:05:36Z

UE-InfoVis0607 0225451:

{|
|-
|'''Gruppe: '''
|'''Gewählte Technik:'''
|-
|01
|2 SpiraClock
|-
|02
|4 Tile Maps oder Arc Diagram
|-
|03
|?
|-
|08
|3 Perspective Wall oder 6 ThemeRiver
|-
|}

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T21:36:54Z

UE-InfoVis0607 0225451: /* Detailed analysis of the data */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it's not easy to see which unit is used on which axis. Therefore a closer analysis. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen the risk categories aren't ordered by the article numbers. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which isn't there.
* '''Missing values:''' There a three records which missing values for either odds of injury or odds of death, but are still positioned in the graphic. Without explanation how these missing values where handled.
* '''No linear correlation:''' As already stated there is no apparent correlation between odds of injury (or odds of death) and number of articles, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance. If you need further proof for the non-correlation just calculate the correlation coefficient between e.g. odds of death and number of articles which is close to zero (-0,14).
* '''Fear index:''' Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed, in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|none]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T21:31:07Z

UE-InfoVis0607 0225451: /* Detailed analysis of the data */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it's not easy to see which unit is used on which axis. Therefore a closer analysis. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen the risk categories aren't ordered by the article numbers. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which isn't there.
* '''Missing values:''' There a three records which missing values for either odds of injury or odds of death, but are still positioned in the graphic. Without explanation how these missing values where handled.
* '''No linear correlation:''' As already stated there is no apparent correlation between odds of injury (or odds of death) and number of articles, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|none]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T21:28:27Z

UE-InfoVis0607 0225451: /* Detailed analysis of the data */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above it's not easy to see which unit is used on which axis. Therefore a closer analysis. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen the risk categories aren't ordered by the article numbers. Nonetheless the categories are arranged in an ascending order. Additionally the line should be descending independently of the unit assignment: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship which isn't there.
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png|none|thumb|500px|none]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png|none|thumb|500px|none|Total risk of the dangers]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T21:05:59Z

UE-InfoVis0607 0225451: /* Design */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. See below in the "Detailed analysis of the data"-section.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above, the data is only ordered by "odds of injury" and so of course the visual realtion ship seems linear
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T21:03:37Z

UE-InfoVis0607 0225451: /* Detailed analysis of the data */

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen that the risk categories aren't ordered by the article numbers. Nonetheless the categories are arranged in an ascending order. Which is slightly confusing as the line should be descending independently if the unit assignment is: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

The table shows 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* '''Axis order:''' As already stated above, the data is only ordered by "odds of injury" and so of course the visual realtion ship seems linear
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

Another way of presenting the data is to use one total risk value for both the death and the injury odds. In that way we can simplifiy the graphic by using some kind of block diagram. The blocks represent the total risk in percent and are ordered by the number of articles. According to the author of the original graphic, the number of articles written about a risk is equal to the risk's fear index. Because of that, we'll also use the fear index as the x-axis inscription. In that way one can easily see, that there is absolutly no relation between people's fears and the risk of getting involved with the corresponding dangers.

[[Image:FearRisk_Block.png]]

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T20:51:30Z

UE-InfoVis0607 0225451:

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen that the risk categories aren't ordered by the article numbers. Nonetheless the categories are arranged in an ascending order. Which is slightly confusing as the line should be descending independently if the unit assignment is: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

It shows us 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* Order on both the axes seems to be the odds of injury (descending from left to right and bottom to top).
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T20:50:55Z

UE-InfoVis0607 0225451:

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. 
:While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen that the risk categories aren't ordered by the article numbers. 
:Nonetheless the categories are arranged in an ascending order. Which is slightly confusing as the line should be descending independently if the unit assignment is: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. 
So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

It shows us 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* Order on both the axes seems to be the odds of injury (descending from left to right and bottom to top).
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-13T20:50:36Z

UE-InfoVis0607 0225451:

== Poor Graphic ==

[[Image:Ropeik03neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

== Discussion of the original graphic ==

=== First impressions ===

* The first thing one will notice when looking at this diagram is: The shark.

* The next things, that really catch one's eye are the other graphical symbols, arranged from bottom left to top right, which seem to stand in a linear relationship.

* Then you see the horizontal axis, positioned in the middle of the graphic, reading "More risk, less fear" on the left and "More fear, less risk" on the right.

* Then finally you get to notice the actual values and the legend - if you don't get distracted by the nearly unreadable article text in the upper left of the image.

=== Design ===

Before analyzing the actual data in the graphic we try to evaluate the graphic from a design point of view:

* '''Data-Ink-Ratio:''' This image has very bad Data-Ink-Ratio. As there are a huge number of visual elements (e.g. the huge shark) which not only are unnecessary to visualize the data itself, but even prevent/distract you from concentrating on the message of the graphic. They are completely dispensable as they add no information that is not already provided by the textual labels.

* '''Space:''' The image takes up a great amount of space but leaves entire regions of the graphic blank and so without use.

* '''Axis location:''' The location of the only axis in the diagram is somewhat misleading. The axis is placed in the middle of the diagram and suggesting a separation of the risk categories in some way (e.g. into a negative/positive region). There is no logical reason for locating the axis in the middle. A y-axis is not even displayed, although elements are also arranged vertically.

* '''Axis units:''' There is no real way to tell the units and/or the ranges for the x- and y-axes. The only hint is the text on the arrow which reads "More risk, less fear" on the left and "More fear, less risk" on the right. Now you could think the data is ordered from left to right by increasing fear and decreasing risk but that isn't the case. 
While the risk decreases from left to right, which is what the axis says, the fear ranking (number of articles) doesn't play into the representation at all. As it can be easily seen that the risk categories aren't ordered by the article numbers. 
Nonetheless the categories are arranged in an ascending order. Which is slightly confusing as the line should be descending independently if the unit assignment is: x-axis:Amount of risk; y-axis:Amount of fear (Low risk is meant to implie High fear); or the other way around. 
So the reality is: The data is only ordered by the "odds of injury" and then simply placed on an ascending line implying a linear relationship.

* '''Text on graphic:''' The article text in the upper left does not belong in the graphic itself and should be shown separately. As it is it is nearly unreadable due to its small size and distracting the viewer from the information in graphic. Additionally there are some comments (e.g. on missing values or specific conditions under which these values were obtained) directly on the graph which again distract from the its message, as the user has to read them to check if they contain important information (which mostly they don't).

* '''Data density:''' The graphic gets a pretty bad rating here too, as the amount of space (as stated above) used to show information about the dataset is in no relation to the number of elements in the set, which are only 13.

Only to show what can be accomplished by just an improvement of the Data-Ink-Ratio we created this simplification of the original graphic:
[[Image:Better_Data_Ink_Ratio_Ropeik_03_neverbitten.jpg|none|thumb|500px|none|Never Bitten, Twice Shy: The Real Dangers Of Summer]]

=== Detailed analysis of the data ===
The "The real risks of summer" data in table form

{| class="wikitable" style="text-align:center" border="1"
! Risk !! Odds of injury1 !! Odds of dying !! Fear Index2
|-
! Skin cancer
| 1 in 200 || 1 in 29,500 || 102
|-
! Food poisoning
| 1 in 800 || 1 in 55,600 || 257
|-
! Bicycles
| 1 in 1,700 || 1 in 578,000 || 233
|-
! Lawn mowers
| 1 in 5300 || Not available || 53
|-
! Heat exposure
| Not available || 1 in 950,000 || 229
|-
! Children falling out of windows
| 1 in 12,800 || 1 in 2,400,000 || 89
|-
! Lyme disease
| 1 in 18,100 || Not available || 47
|-
! Fireworks
| 1 in 32,400 || 1 in 71,200,000 || 59
|-
! Amusement parks
| 1 in 34,800 || 1 in 72,300,000 || 101
|-
! Snake bites
| 1 in 41,300 || 1 in 19,300,000 || 109
|-
! Drowning (while boating)
| 1 in 64,500 || 1 in 400,900 || 1,688
|-
! West Nile virus
| 1 in 68,500 || 1 in 1,000,000 || 2,240
|-
! Shark attacks
| 1 in 6,000,000 || 1 in 578,000,000 || 276
|-
|}
[1]Full row text: Odds of injury requiring medical treatment 
[2]Fear index means: Number of newspaper articles written last summer about this risk

It shows us 13 risk categories each with three types of information: odds of injury, odds of death and a "fear index", built on the "number of newspaper articles written last summer" about this risk category.

* Order on both the axes seems to be the odds of injury (descending from left to right and bottom to top).
* Three records have no values for either odds of injury or odds of death, but are still positioned in the graphic.
* No apparent correlation between odds of injury and number of articles exists, though the graphic tries to convince the viewer otherwise. The few correlations that do exist can be attributed to chance.
* Is the number of articles written about a subject really a good measure for fear of this subject? Exactly the opposite could be claimed in that the more people know about a subject (i.e. the more articles they read about it), the less they fear it.

* There are three different dimensions of data in the picture, but where does the trend comes from?
** Odds injury
** Odds death
** Number of Articles
'''REM:''' Was ist gemeint mit "where does the trend come from?" Dass der Anstieg nach injuries ist haben wir eh schon. -MM

* Outliers ??? What to write about them
'''REM:''' Ich denk nicht, dass man über die Ausreißer speziell noch was schreiben muss. Dass die keine Korrellation injuries/articles existiert haben wir schon und die outliers können uns eigenlich egal sein. -MM

Das bitte mit Statistikwerten unterlegen. Es gibt zum Beispiel nur eine Korrelation von -0,147886423 zwischen Death und Artikeln. Einen Scatterplot davon mit Trendlinie.
Angeben das es manchmal eine Korrelation zwischen Odds und Artikeln besteht aber nicht immer. Und schon gar nicht so linear wie in der Graphik.
Insbesondere ohne die Outliers "Nile virus" und "drowning" sind die werte der artikel im bereich [53,276] also ziemlich flach und nicht linear ansteigend. Dann eine Graphik wie das ausschaut wenn mann korrekt X:A

'''REM:''' Brauen wir wirklich eine genaue statistische Analyse? Darum gehts doch überhaupt nicht. Dass die Daten nicht zusammenhängen sieht man eh schön, müssen wir das wirklich genauer untermauern? -MM

== Better graphic ==
After taking a closer look at the data, we found out that the main message of the original graphic could not be supported by the actual data. We analyzed the values with several different diagrams and concluded that a rising odds of injury is not related to a lesser (or higher) number of articles. According to this conclusion we can not show the "fear-risk-ratio" in the same way as the source picture does. Therefore we try to visualize the data in a new diagram, not supporting the original "more risk, less fear"-thesis.

Because of the wide spread of the values, we had to use a logarithmic scale. Data are ordered by the number of articles, no connection to the other dimensions can be found. The only correlation that might exist is between the odds of injury and the odds of dying.

[[image:Aufgabe2Diagramm.png]]

'''REM:''' Bitte an denjenigen der die Grafik jetzt gemacht hat: Beschriftungen der Linien ans Ende der Linien setzen. Und wenn möglich einheitliche Symbole für die Punkte nehmen (nicht einmal Karos, einmal Dreiecke, ...). -MM

== References ==

:[Few, 2004] Stephen Few, Intelligent Enterprise Magazine: Elegance through simplicity. Created at: October 16, 2004. Retrieved at: November 12, 2006. http://www.intelligententerprise.com/showArticle.jhtml;jsessionid=N2ATDQWY5VYKSQSNDBGCKHSCJUMEKJVN?articleID=49400920.

:[Mizuno et al., 1999] Yoko Mizuno, Tufte Design Principle Project. Created at: January 26, 1999. Retrieved at: November 12, 2006. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html.

== Links ==
* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01|Gruppe 01 (Lamprecht, Frey, Matzneller, Mueller)]]

Teaching talk:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-12T19:26:49Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-12T19:05:27Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-12T18:59:22Z

UE-InfoVis0607 0225451:

File:Better Data Ink Ratio Ropeik 03 neverbitten.jpg

2006-11-12T18:58:37Z

UE-InfoVis0607 0225451: /* Summary */

File:Better Data Ink Ratio Ropeik 03 neverbitten.jpg

2006-11-12T18:58:06Z

UE-InfoVis0607 0225451: An improved version of Never Bitten, Twice Shy: The Real Dangers Of Summer

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-12T18:42:06Z

UE-InfoVis0607 0225451:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 2

2006-11-12T18:33:12Z

UE-InfoVis0607 0225451: