InfoVis:Wiki - User contributions [en]

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 4

2010-01-07T19:09:10Z

UE-InfoVis0910 0626117: some additional notes

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]
=== Zu erstellende Visualisierung ===
-------------------------------
* Stammbaum der Nachkommen von Lisa und Bart Simpson*

...Visualisierung der Nachkommen von Lisa Simpson sowie der Nachkommen von Bart Simpson. Dabei sollen zwei Stammbäume entstehen - einer von Bart und einer von Lisa - die dann miteinander verglichen werden können. Zuerst kommen Lisa und Bart, dann deren Kinder, ihre Enkel, etc. (mind 4 Generationen). Da es noch keine Nachkommen gibt, können diese frei erfunden werden.

Die Visualisierung soll folgende Informationen darstellen:

- Verwandtschaftsverhältnisse (zumindest Eltern-Kinder),

- Unterscheidung zwischen Blutsverwandtschaft und angeheirateten Familienmitgliedern,

- Geburts- und Todestag sowie Lebensdauer von allen Familienmitgliedern,

- wichtige Ereignisse im Leben jedes Familienmitglieds (z.B., Anzeigen, Gefängnisaufenthalte, Schulzeit, Studienzeit, Nobelpreise, Arbeitslosigkeit etc.)

- Zufriedenheit jedes Familienmitglieds (Skala: sehr niedrig - niedrig - mittel - hoch - sehr hoch); kann sich im Laufe des Lebens ändern.

Die Visualisierung soll die interaktive Auseinandersetzung mit den Daten ermöglichen.
Verpflichtend:
Möglichkeiten zum besseren Vergleich von einzelnen Abschnitten der Stammbäume bzw. Vergleich von Ausschnitten aus Lisas und Barts Stammbäumen.
+ mind. 2 weitere Interaktionsmöglichkeiten (z.B., Details on Demand, Filteroptionen)

Allgemein:

- Die Daten sollen zur Analyse von Zusammenhängen zwischen Familienverhältnissen, wichtigen Ereignissen und Zufriedenheit visualisiert werden (die Anwendungsgebiets- und Zielgruppenanalyse kann kurz gehalten werden).

- Die bisher erlernten Design-Prinzipien sollen umgesetzt werden z.B.: Optimierung der Data-ink ratio (keine Comics!), visuelle Attribute (Größe, Farbe, Position, etc.) sollen sinnvoll eingesetzt werden (Information darstellen).

- Die Mockups sollten zumindest 1) die beiden Stammbäume im Überblick und 2) eine detaillierte Vergleichsansicht von 2 Teil-Stammbäumen wiedergeben.

- Alle nicht angeführten Daten können frei erfunden werden.

------------------------------

=== Analysis ===
==== Field of Application and Analysis of the Data Set ====
===== Field of Application =====
Family trees were originally used to show how certain royal families are intertwined and to show whom a person in the tree is heir to. Nowadays they are mostly used for genealogical research. The most common visualization of a family tree is, as the name suggests, a tree which displays various persons as nodes and those relations by edges connecting the respective nodes. The current generation is usually represented by the leaves of the tree. In order to visualize a marriage, either both persons are represented by a node, or a special marriage edge connecting the respective persons and the eventually resulting children is used.

The main drawback of a family tree is the incapability to display temporal data. For this reason special considerations have been made to display the temporal data just as well as the relational data, while maintaining the advantages of a conventional family tree.
===== Analysis of the Data Set=====
{|cellpadding="2" border="1"
! Variable !! Granularity !! Scale !! Data type
|-
|Family relationship || Discrete || Nominal || Tree
|-
|Consanguinity || Discrete || Nominal || Tree
|-
|Events or periods of life || Discrete || Interval || Temporal
|-
|Satisfaction level || Discrete || Ordinal || 1-dimensional
|}
The data set is subject to an one dimensional, multivariate data structure. The family relationships, consanguinities, events, periods of life and satisfaction levels are dependent on the temporal dimension and for this reason multivariate.
==== Analysis of the Target Audience ====
The target audience mainly consists of genealogical researchers, either professionals or hobbyists. Additionally the visualization can even be of use for psychological, social and medical research due to the additional level of information which is offered by the time-dependent satisfaction level. The research of inheritable diseases or rather the risk to be affected by those or more generally the genetic research seems also conceivable.

The variety of possible application areas demands a visualization which is designed in such a way that it can be used by inexperienced hobbyists, as well as sophisticated professionals from all areas in an intuitive, yet powerful manner.
==== Purpose of the Visualization ====
The visualization provides a representation of the genealogies of several persons by enriching the conventional family tree with interactive features. It's main purpose is the detailed depiction, just as well the comparison of family relationships which can be of use for genealogical research.

The visualization is furthermore capable to display important events (such as birthdays, days of death, etc.), life periods (such as schooldays) and the satisfaction level dependent on the period of life offering an additional depth of information which can be of interest for psychological, medical and social researchers (like mentioned above).
=== Concept ===
==== Type of Visualization ====
The main view of the visualization consists of time-lines, each visualizing the personal history (including important events, periods of life and the satisfaction level) of a person dependent on time. The integration of relational data has been realized with relational events, such as marriages and births. These can be regarded as the edges of the time-lines, comparable to the edges of a conventional tree. Related time-lines (comparable to nodes), and therefore persons, are connected by those relational events implying the temporal occurrence of the event in question.

The visualization can be regarded as conventional hierarchical family tree rotated by 90 degrees with its nodes and edges positioned and shaped according to the temporal data of the respective persons and events.

The comparison of multiple family trees is realized in a straightforward manner. It is possible to display multiple trees one below the other, each having it's own timescale.

Additionally it is possible to switch to or open a ''traditional'' tree view as an additional navigation view or simply for familiarities sake.
==== Visual Mapping ====
{|cellpadding="2" border="1"
!Variable !! Visual attribute
|-
! colspan="2" | Person attributes
|-
|Name || Text
|-
|Details || Text (when interactively invoked)
|-
|Gender || Color of timeline
|-
|Date of birth || Begin position of timeline
|-
|Date of death || End position of timeline
|-
|Lifespan || Length of timeline
|-
|Satisfaction level || Height of bar
|-
! colspan="2" | Event attributes
|-
|Event type || Icon
|-
|Relational event || Icon and vertical line (e.g. implies parent child relation)
|-
|Event Details || Text (when interactively invoked)
|}
==== Applied Techniques ====
===== Non-interactive Techniques =====
* '''Time-lines''' [Aigner, 2009a] representing the personal history of a person.
* '''Hierarchical trees''' [Aigner, 2009b] implied by relational events.
* '''Symbols''' [Miksch, 2009a] for the recognition of major event types.
* '''Bar charts''' representing the satisfaction level of a person dependent on time.
===== Interactive Techniques =====
* '''Zooming and panning''' [Aigner, 2009c] enabling the user to view the data at a higher resolution.
* '''Details on demand''' [Aigner, 2009d] enable the user to display detailed information about a data case.
* '''Semantic depth of field''' [Miksch, 2009b] for the highlighting of time-lines and events on demand.
* '''Filter options''' [Aigner, 2009e] to show the user only the data he or she's interested in.
==== Interactivity ====
{|cellpadding="2" border="1"
!Interaction !! Purpose
|-
|Mouse over timeline || Shows detailed information about the respective person
|-
|Mouse out timeline || Hides detailed information about the respective person
|-
|Mouse over event || Shows detailed information about the respective event
|-
|Mouse out event || Hides detailed information about the respective event
|-
|Click on timeline || Highlights the person, aligns the birthday of the respective person to the jump mark, enlarges the satisfaction bar chart, highlights the consanguinity path.
|-
|Click on event || Shows detailed information about the respective event
|-
|Click on relational event || Applies a semantic depth of field on the related persons and the respective event
|-
|Clicking somewhere else || Deselects selected persons or events
|-
|Drag and drop timeline || Allows to manually sort a timeline vertically
|-
|Filter || Allows the selection of relevant data (e.g. certain names, event types, etc.)
|-
|Sort || Allows the (vertical) sorting of the time-lines (e.g. after name, birthday, etc.)
|-
|Compare || Displays an additional canvas for an additional tree
|-
|Scrubber || Configurable to show certain details at its current position in the timeline. (e.g. Satisfaction level as shown in the comparison mockup)
|}
The interactive features above should be regarded as the default behaviour of the visualization. A settings dialog where the users can change this behaviour is conceivable.
==== Mockups ====
===== Timeline View =====
<div>
[[Image:Mockup_overview_lisa.png|thumb|200px|left|Overview Lisa]]
[[Image:Mockup_overview_bart.png|thumb|200px|left|Overview Bart]]
[[Image:Mockup_eventdetail.png|thumb|200px|left|Eventdetail]]
[[Image:Mockup_bloodline.png|thumb|200px|left|Bloodline]]
[[Image:Mockup_comparison.png|thumb|200px|none|Comparison view]]
</div>
<div style="clear:both;"></div>
===== Tree View =====
<div>
[[Image:Lisa-blood.png|thumb|200px|left|Bloodline Lisa]]
[[Image:Bart-blood.png|thumb|200px|left|Bloodline Bart]]
[[Image:Lisa-info.png|thumb|200px|left|Detail Lisa]]
[[Image:Bart-info.png|thumb|200px|left|Detail Bart]]
[[Image:Vergleich.png|thumb|200px|none|Comparison view]]
</div>
<div style="clear:both;"></div>
==== Features ====
The main view of the visualization is relatively clutter-less since only essential information is shown. The user has nevertheless the possibility to filter the data according to his personal relevance and to improve the visual appeal of the visualization by manually sorting the time-lines vertically. The visualization furthermore assist the user to keep focus by applying techniques such as semantic depth of field and highlighting.
==== Advantages ====
* Implicit and well known representation of temporal data
* Simple representation of hierarchical data
* Precise display of satisfaction levels
* Avoidance of visual clutter by features such as details on demand and filters
* Relatively easy to comprehend
==== Possible Improvements and Extensions ====
* The possibility to attach media files to persons or events to offer an additional depth of information (e.g. photos, video clips, documents, etc.).
* The possibility to display global events and periods (such as depressions, climate changes, pandemics, etc.) to offer more insights.
== References ==
* [Aigner, 2009a] Wolfgang Aigner. Visualization of Time-Oriented Data: Visualization Techniques. Created at: December 15, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091214_timevis_techniques_1up.pdf. pages 33-36.
* [Aigner, 2009b] Wolfgang Aigner. Hierarchical Techniques. Created at: November 30, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091130_hierarchical-techniques_1up.pdf. pages 16-17.
* [Miksch, 2009a] Silvia Miksch. Icon-based Techniques. Created at: November 9, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-3.1up.pdf. page 8.
* [Miksch, 2009b] Silvia Miksch. Focus+Context & Distortion Techniques. Created at: November 24, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-5_1up.pdf. page 84-110.
* [Aigner, 2009c] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 28.
* [Aigner, 2009d] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 37.
* [Aigner, 2009e] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. pages 38-47.

------------------------------

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2009/10|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/ UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12|Gruppe 12]]

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 4

2010-01-07T19:01:41Z

UE-InfoVis0910 0626117: layout fix

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]
=== Zu erstellende Visualisierung ===
-------------------------------
* Stammbaum der Nachkommen von Lisa und Bart Simpson*

...Visualisierung der Nachkommen von Lisa Simpson sowie der Nachkommen von Bart Simpson. Dabei sollen zwei Stammbäume entstehen - einer von Bart und einer von Lisa - die dann miteinander verglichen werden können. Zuerst kommen Lisa und Bart, dann deren Kinder, ihre Enkel, etc. (mind 4 Generationen). Da es noch keine Nachkommen gibt, können diese frei erfunden werden.

Die Visualisierung soll folgende Informationen darstellen:

- Verwandtschaftsverhältnisse (zumindest Eltern-Kinder),

- Unterscheidung zwischen Blutsverwandtschaft und angeheirateten Familienmitgliedern,

- Geburts- und Todestag sowie Lebensdauer von allen Familienmitgliedern,

- wichtige Ereignisse im Leben jedes Familienmitglieds (z.B., Anzeigen, Gefängnisaufenthalte, Schulzeit, Studienzeit, Nobelpreise, Arbeitslosigkeit etc.)

- Zufriedenheit jedes Familienmitglieds (Skala: sehr niedrig - niedrig - mittel - hoch - sehr hoch); kann sich im Laufe des Lebens ändern.

Die Visualisierung soll die interaktive Auseinandersetzung mit den Daten ermöglichen.
Verpflichtend:
Möglichkeiten zum besseren Vergleich von einzelnen Abschnitten der Stammbäume bzw. Vergleich von Ausschnitten aus Lisas und Barts Stammbäumen.
+ mind. 2 weitere Interaktionsmöglichkeiten (z.B., Details on Demand, Filteroptionen)

Allgemein:

- Die Daten sollen zur Analyse von Zusammenhängen zwischen Familienverhältnissen, wichtigen Ereignissen und Zufriedenheit visualisiert werden (die Anwendungsgebiets- und Zielgruppenanalyse kann kurz gehalten werden).

- Die bisher erlernten Design-Prinzipien sollen umgesetzt werden z.B.: Optimierung der Data-ink ratio (keine Comics!), visuelle Attribute (Größe, Farbe, Position, etc.) sollen sinnvoll eingesetzt werden (Information darstellen).

- Die Mockups sollten zumindest 1) die beiden Stammbäume im Überblick und 2) eine detaillierte Vergleichsansicht von 2 Teil-Stammbäumen wiedergeben.

- Alle nicht angeführten Daten können frei erfunden werden.

------------------------------

=== Analysis ===
==== Field of Application and Analysis of the Data Set ====
===== Field of Application =====
Family trees were originally used to show how certain royal families are intertwined and to show whom a person in the tree is heir to. Nowadays they are mostly used for genealogical research. The most common visualization of a family tree is, as the name suggests, a tree which displays various persons as nodes and those relations by edges connecting the respective nodes. The current generation is usually represented by the leaves of the tree. In order to visualize a marriage, either both persons are represented by a node, or a special marriage edge connecting the respective persons and the eventually resulting children is used.

The main drawback of a family tree is the incapability to display temporal data. For this reason special considerations have been made to display the temporal data just as well as the relational data, while maintaining the advantages of a conventional family tree.
===== Analysis of the Data Set=====
{|cellpadding="2" border="1"
! Variable !! Granularity !! Scale !! Data type
|-
|Family relationship || Discrete || Nominal || Tree
|-
|Consanguinity || Discrete || Nominal || Tree
|-
|Events or periods of life || Discrete || Interval || Temporal
|-
|Satisfaction level || Discrete || Ordinal || 1-dimensional
|}
The data set is subject to an one dimensional, multivariate data structure. The family relationships, consanguinities, events, periods of life and satisfaction levels are dependent on the temporal dimension and for this reason multivariate.
==== Analysis of the Target Audience ====
The target audience mainly consists of genealogical researchers, either professionals or hobbyists. Additionally the visualization can even be of use for psychological, social and medical research due to the additional level of information which is offered by the time-dependent satisfaction level. The research of inheritable diseases or rather the risk to be affected by those or more generally the genetic research seems also conceivable.

The variety of possible application areas demands a visualization which is designed in such a way that it can be used by inexperienced hobbyists, as well as sophisticated professionals from all areas in an intuitive, yet powerful manner.
==== Purpose of the Visualization ====
The visualization provides a representation of the genealogies of several persons by enriching the conventional family tree with interactive features. It's main purpose is the detailed depiction, just as well the comparison of family relationships which can be of use for genealogical research.

The visualization is furthermore capable to display important events (such as birthdays, days of death, etc.), life periods (such as schooldays) and the satisfaction level dependent on the period of life offering an additional depth of information which can be of interest for psychological, medical and social researchers (like mentioned above).
=== Concept ===
==== Type of Visualization ====
The main view of the visualization consists of time-lines, each visualizing the personal history (including important events, periods of life and the satisfaction level) of a person dependent on time. The integration of relational data has been realized with relational events, such as marriages and births. These can be regarded as the edges of the time-lines, comparable to the edges of a conventional tree. Related time-lines (comparable to nodes), and therefore persons, are connected by those relational events implying the temporal occurrence of the event in question.

The visualization can be regarded as conventional hierarchical family tree rotated by 90 degrees with its nodes and edges positioned and shaped according to the temporal data of the respective persons and events.

The comparison of multiple family trees is realized in a straightforward manner. It is possible to display multiple trees one below the other, each having it's own timescale.
==== Visual Mapping ====
{|cellpadding="2" border="1"
!Variable !! Visual attribute
|-
! colspan="2" | Person attributes
|-
|Name || Text
|-
|Details || Text (when interactively invoked)
|-
|Gender || Color of timeline
|-
|Date of birth || Begin position of timeline
|-
|Date of death || End position of timeline
|-
|Lifespan || Length of timeline
|-
|Satisfaction level || Height of bar
|-
! colspan="2" | Event attributes
|-
|Event type || Icon
|-
|Relational event || Icon and vertical line (e.g. implies parent child relation)
|-
|Event Details || Text (when interactively invoked)
|}
==== Applied Techniques ====
===== Non-interactive Techniques =====
* '''Time-lines''' [Aigner, 2009a] representing the personal history of a person.
* '''Hierarchical trees''' [Aigner, 2009b] implied by relational events.
* '''Symbols''' [Miksch, 2009a] for the recognition of major event types.
* '''Bar charts''' representing the satisfaction level of a person dependent on time.
===== Interactive Techniques =====
* '''Zooming and panning''' [Aigner, 2009c] enabling the user to view the data at a higher resolution.
* '''Details on demand''' [Aigner, 2009d] enable the user to display detailed information about a data case.
* '''Semantic depth of field''' [Miksch, 2009b] for the highlighting of time-lines and events on demand.
* '''Filter options''' [Aigner, 2009e] to show the user only the data he or she's interested in.
==== Interactivity ====
{|cellpadding="2" border="1"
!Interaction !! Purpose
|-
|Mouse over timeline || Shows detailed information about the respective person
|-
|Mouse out timeline || Hides detailed information about the respective person
|-
|Mouse over event || Shows detailed information about the respective event
|-
|Mouse out event || Hides detailed information about the respective event
|-
|Click on timeline || Highlights the person, aligns the birthday of the respective person to the jump mark, enlarges the satisfaction bar chart, highlights the consanguinity path.
|-
|Click on event || Shows detailed information about the respective event
|-
|Click on relational event || Applies a semantic depth of field on the related persons and the respective event
|-
|Clicking somewhere else || Deselects selected persons or events
|-
|Drag and drop timeline || Allows to manually sort a timeline vertically
|-
|Filter || Allows the selection of relevant data (e.g. certain names, event types, etc.)
|-
|Sort || Allows the (vertical) sorting of the time-lines (e.g. after name, birthday, etc.)
|-
|Compare || Displays an additional canvas for an additional tree
|}
The interactive features above should be regarded as the default behaviour of the visualization. A settings dialog where the users can change this behaviour is conceivable.
==== Mockups ====
===== Timeline View =====
<div>
[[Image:Mockup_overview_lisa.png|thumb|200px|left|Overview Lisa]]
[[Image:Mockup_overview_bart.png|thumb|200px|left|Overview Bart]]
[[Image:Mockup_eventdetail.png|thumb|200px|left|Eventdetail]]
[[Image:Mockup_bloodline.png|thumb|200px|left|Bloodline]]
[[Image:Mockup_comparison.png|thumb|200px|none|Comparison view]]
</div>
<div style="clear:both;"></div>
===== Tree View =====
<div>
[[Image:Lisa-blood.png|thumb|200px|left|Bloodline Lisa]]
[[Image:Bart-blood.png|thumb|200px|left|Bloodline Bart]]
[[Image:Lisa-info.png|thumb|200px|left|Detail Lisa]]
[[Image:Bart-info.png|thumb|200px|left|Detail Bart]]
[[Image:Vergleich.png|thumb|200px|none|Comparison view]]
</div>
<div style="clear:both;"></div>
==== Features ====
The main view of the visualization is relatively clutter-less since only essential information is shown. The user has nevertheless the possibility to filter the data according to his personal relevance and to improve the visual appeal of the visualization by manually sorting the time-lines vertically. The visualization furthermore assist the user to keep focus by applying techniques such as semantic depth of field and highlighting.
==== Advantages ====
* Implicit and well known representation of temporal data
* Simple representation of hierarchical data
* Precise display of satisfaction levels
* Avoidance of visual clutter by features such as details on demand and filters
* Relatively easy to comprehend
==== Possible Improvements and Extensions ====
* The possibility to attach media files to persons or events to offer an additional depth of information (e.g. photos, video clips, documents, etc.).
* The possibility to display global events and periods (such as depressions, climate changes, pandemics, etc.) to offer more insights.
== References ==
* [Aigner, 2009a] Wolfgang Aigner. Visualization of Time-Oriented Data: Visualization Techniques. Created at: December 15, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091214_timevis_techniques_1up.pdf. pages 33-36.
* [Aigner, 2009b] Wolfgang Aigner. Hierarchical Techniques. Created at: November 30, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091130_hierarchical-techniques_1up.pdf. pages 16-17.
* [Miksch, 2009a] Silvia Miksch. Icon-based Techniques. Created at: November 9, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-3.1up.pdf. page 8.
* [Miksch, 2009b] Silvia Miksch. Focus+Context & Distortion Techniques. Created at: November 24, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-5_1up.pdf. page 84-110.
* [Aigner, 2009c] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 28.
* [Aigner, 2009d] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 37.
* [Aigner, 2009e] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. pages 38-47.

------------------------------

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2009/10|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/ UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12|Gruppe 12]]

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 4

2010-01-07T18:47:31Z

UE-InfoVis0910 0626117: Added Timline view Mockups

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]
=== Zu erstellende Visualisierung ===
-------------------------------
* Stammbaum der Nachkommen von Lisa und Bart Simpson*

...Visualisierung der Nachkommen von Lisa Simpson sowie der Nachkommen von Bart Simpson. Dabei sollen zwei Stammbäume entstehen - einer von Bart und einer von Lisa - die dann miteinander verglichen werden können. Zuerst kommen Lisa und Bart, dann deren Kinder, ihre Enkel, etc. (mind 4 Generationen). Da es noch keine Nachkommen gibt, können diese frei erfunden werden.

Die Visualisierung soll folgende Informationen darstellen:

- Verwandtschaftsverhältnisse (zumindest Eltern-Kinder),

- Unterscheidung zwischen Blutsverwandtschaft und angeheirateten Familienmitgliedern,

- Geburts- und Todestag sowie Lebensdauer von allen Familienmitgliedern,

- wichtige Ereignisse im Leben jedes Familienmitglieds (z.B., Anzeigen, Gefängnisaufenthalte, Schulzeit, Studienzeit, Nobelpreise, Arbeitslosigkeit etc.)

- Zufriedenheit jedes Familienmitglieds (Skala: sehr niedrig - niedrig - mittel - hoch - sehr hoch); kann sich im Laufe des Lebens ändern.

Die Visualisierung soll die interaktive Auseinandersetzung mit den Daten ermöglichen.
Verpflichtend:
Möglichkeiten zum besseren Vergleich von einzelnen Abschnitten der Stammbäume bzw. Vergleich von Ausschnitten aus Lisas und Barts Stammbäumen.
+ mind. 2 weitere Interaktionsmöglichkeiten (z.B., Details on Demand, Filteroptionen)

Allgemein:

- Die Daten sollen zur Analyse von Zusammenhängen zwischen Familienverhältnissen, wichtigen Ereignissen und Zufriedenheit visualisiert werden (die Anwendungsgebiets- und Zielgruppenanalyse kann kurz gehalten werden).

- Die bisher erlernten Design-Prinzipien sollen umgesetzt werden z.B.: Optimierung der Data-ink ratio (keine Comics!), visuelle Attribute (Größe, Farbe, Position, etc.) sollen sinnvoll eingesetzt werden (Information darstellen).

- Die Mockups sollten zumindest 1) die beiden Stammbäume im Überblick und 2) eine detaillierte Vergleichsansicht von 2 Teil-Stammbäumen wiedergeben.

- Alle nicht angeführten Daten können frei erfunden werden.

------------------------------

=== Analysis ===
==== Field of Application and Analysis of the Data Set ====
===== Field of Application =====
Family trees were originally used to show how certain royal families are intertwined and to show whom a person in the tree is heir to. Nowadays they are mostly used for genealogical research. The most common visualization of a family tree is, as the name suggests, a tree which displays various persons as nodes and those relations by edges connecting the respective nodes. The current generation is usually represented by the leaves of the tree. In order to visualize a marriage, either both persons are represented by a node, or a special marriage edge connecting the respective persons and the eventually resulting children is used.

The main drawback of a family tree is the incapability to display temporal data. For this reason special considerations have been made to display the temporal data just as well as the relational data, while maintaining the advantages of a conventional family tree.
===== Analysis of the Data Set=====
{|cellpadding="2" border="1"
! Variable !! Granularity !! Scale !! Data type
|-
|Family relationship || Discrete || Nominal || Tree
|-
|Consanguinity || Discrete || Nominal || Tree
|-
|Events or periods of life || Discrete || Interval || Temporal
|-
|Satisfaction level || Discrete || Ordinal || 1-dimensional
|}
The data set is subject to an one dimensional, multivariate data structure. The family relationships, consanguinities, events, periods of life and satisfaction levels are dependent on the temporal dimension and for this reason multivariate.
==== Analysis of the Target Audience ====
The target audience mainly consists of genealogical researchers, either professionals or hobbyists. Additionally the visualization can even be of use for psychological, social and medical research due to the additional level of information which is offered by the time-dependent satisfaction level. The research of inheritable diseases or rather the risk to be affected by those or more generally the genetic research seems also conceivable.

The variety of possible application areas demands a visualization which is designed in such a way that it can be used by inexperienced hobbyists, as well as sophisticated professionals from all areas in an intuitive, yet powerful manner.
==== Purpose of the Visualization ====
The visualization provides a representation of the genealogies of several persons by enriching the conventional family tree with interactive features. It's main purpose is the detailed depiction, just as well the comparison of family relationships which can be of use for genealogical research.

The visualization is furthermore capable to display important events (such as birthdays, days of death, etc.), life periods (such as schooldays) and the satisfaction level dependent on the period of life offering an additional depth of information which can be of interest for psychological, medical and social researchers (like mentioned above).
=== Concept ===
==== Type of Visualization ====
The main view of the visualization consists of time-lines, each visualizing the personal history (including important events, periods of life and the satisfaction level) of a person dependent on time. The integration of relational data has been realized with relational events, such as marriages and births. These can be regarded as the edges of the time-lines, comparable to the edges of a conventional tree. Related time-lines (comparable to nodes), and therefore persons, are connected by those relational events implying the temporal occurrence of the event in question.

The visualization can be regarded as conventional hierarchical family tree rotated by 90 degrees with its nodes and edges positioned and shaped according to the temporal data of the respective persons and events.

The comparison of multiple family trees is realized in a straightforward manner. It is possible to display multiple trees one below the other, each having it's own timescale.
==== Visual Mapping ====
{|cellpadding="2" border="1"
!Variable !! Visual attribute
|-
! colspan="2" | Person attributes
|-
|Name || Text
|-
|Details || Text (when interactively invoked)
|-
|Gender || Color of timeline
|-
|Date of birth || Begin position of timeline
|-
|Date of death || End position of timeline
|-
|Lifespan || Length of timeline
|-
|Satisfaction level || Height of bar
|-
! colspan="2" | Event attributes
|-
|Event type || Icon
|-
|Relational event || Icon and vertical line (e.g. implies parent child relation)
|-
|Event Details || Text (when interactively invoked)
|}
==== Applied Techniques ====
===== Non-interactive Techniques =====
* '''Time-lines''' [Aigner, 2009a] representing the personal history of a person.
* '''Hierarchical trees''' [Aigner, 2009b] implied by relational events.
* '''Symbols''' [Miksch, 2009a] for the recognition of major event types.
* '''Bar charts''' representing the satisfaction level of a person dependent on time.
===== Interactive Techniques =====
* '''Zooming and panning''' [Aigner, 2009c] enabling the user to view the data at a higher resolution.
* '''Details on demand''' [Aigner, 2009d] enable the user to display detailed information about a data case.
* '''Semantic depth of field''' [Miksch, 2009b] for the highlighting of time-lines and events on demand.
* '''Filter options''' [Aigner, 2009e] to show the user only the data he or she's interested in.
==== Interactivity ====
{|cellpadding="2" border="1"
!Interaction !! Purpose
|-
|Mouse over timeline || Shows detailed information about the respective person
|-
|Mouse out timeline || Hides detailed information about the respective person
|-
|Mouse over event || Shows detailed information about the respective event
|-
|Mouse out event || Hides detailed information about the respective event
|-
|Click on timeline || Highlights the person, aligns the birthday of the respective person to the jump mark, enlarges the satisfaction bar chart, highlights the consanguinity path.
|-
|Click on event || Shows detailed information about the respective event
|-
|Click on relational event || Applies a semantic depth of field on the related persons and the respective event
|-
|Clicking somewhere else || Deselects selected persons or events
|-
|Drag and drop timeline || Allows to manually sort a timeline vertically
|-
|Filter || Allows the selection of relevant data (e.g. certain names, event types, etc.)
|-
|Sort || Allows the (vertical) sorting of the time-lines (e.g. after name, birthday, etc.)
|-
|Compare || Displays an additional canvas for an additional tree
|}
The interactive features above should be regarded as the default behaviour of the visualization. A settings dialog where the users can change this behaviour is conceivable.
==== Mockups ====
===== Timeline View =====
<div>
[[Image:Mockup_overview_lisa.png|thumb|200px|left|Overview Lisa]]
[[Image:Mockup_overview_bart.png|thumb|200px|left|Overview Bart]]
[[Image:Mockup_eventdetail.png|thumb|200px|left|Eventdetail]]
[[Image:Mockup_bloodline.png|thumb|200px|left|Bloodline]]
[[Image:Mockup_comparison.png|thumb|200px|Comparison view]]
</div>
<div style="clear:both;"></div>
==== Features ====
The main view of the visualization is relatively clutter-less since only essential information is shown. The user has nevertheless the possibility to filter the data according to his personal relevance and to improve the visual appeal of the visualization by manually sorting the time-lines vertically. The visualization furthermore assist the user to keep focus by applying techniques such as semantic depth of field and highlighting.
==== Advantages ====
* Implicit and well known representation of temporal data
* Simple representation of hierarchical data
* Precise display of satisfaction levels
* Avoidance of visual clutter by features such as details on demand and filters
* Relatively easy to comprehend
==== Possible Improvements and Extensions ====
* The possibility to attach media files to persons or events to offer an additional depth of information (e.g. photos, video clips, documents, etc.).
* The possibility to display global events and periods (such as depressions, climate changes, pandemics, etc.) to offer more insights.
== References ==
* [Aigner, 2009a] Wolfgang Aigner. Visualization of Time-Oriented Data: Visualization Techniques. Created at: December 15, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091214_timevis_techniques_1up.pdf. pages 33-36.
* [Aigner, 2009b] Wolfgang Aigner. Hierarchical Techniques. Created at: November 30, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091130_hierarchical-techniques_1up.pdf. pages 16-17.
* [Miksch, 2009a] Silvia Miksch. Icon-based Techniques. Created at: November 9, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-3.1up.pdf. page 8.
* [Miksch, 2009b] Silvia Miksch. Focus+Context & Distortion Techniques. Created at: November 24, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-5_1up.pdf. page 84-110.
* [Aigner, 2009c] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 28.
* [Aigner, 2009d] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 37.
* [Aigner, 2009e] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. pages 38-47.

------------------------------

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2009/10|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/ UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12|Gruppe 12]]

File:Mockup comparison.png

2010-01-07T18:35:29Z

UE-InfoVis0910 0626117: A Mockup of a timelinebased family tree detailed comparison view.

== Summary ==
A Mockup of a timelinebased family tree detailed comparison view.
== Copyright status ==

== Source ==

File:Mockup bloodline.png

2010-01-07T18:33:41Z

UE-InfoVis0910 0626117: A Mockup of a timelinebased family tree overview with added blurf effect to highlight a bloodline.

== Summary ==
A Mockup of a timelinebased family tree overview with added blurf effect to highlight a bloodline.
== Copyright status ==

== Source ==

File:Mockup eventdetail.png

2010-01-07T18:32:31Z

UE-InfoVis0910 0626117: A Mockup of a timelinebased family tree overview with detail on demand -> in this case event details.

== Summary ==
A Mockup of a timelinebased family tree overview with detail on demand -> in this case event details.
== Copyright status ==

== Source ==

File:Mockup overview bart.png

2010-01-07T18:31:39Z

UE-InfoVis0910 0626117: A Mockup of a timelinebased family tree overview. -> dataset "Bart Simpson"

== Summary ==
A Mockup of a timelinebased family tree overview. -> dataset "Bart Simpson"
== Copyright status ==

== Source ==

File:Mockup overview lisa.png

2010-01-07T18:29:33Z

UE-InfoVis0910 0626117: A Mockup of a timelinebased family tree overview. -> data set "Lisa Simpson"

== Summary ==
A Mockup of a timelinebased family tree overview. -> data set "Lisa Simpson"
== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 4

2010-01-07T18:24:11Z

UE-InfoVis0910 0626117: commited near final revision of submission text

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]
=== Zu erstellende Visualisierung ===
-------------------------------
* Stammbaum der Nachkommen von Lisa und Bart Simpson*

...Visualisierung der Nachkommen von Lisa Simpson sowie der Nachkommen von Bart Simpson. Dabei sollen zwei Stammbäume entstehen - einer von Bart und einer von Lisa - die dann miteinander verglichen werden können. Zuerst kommen Lisa und Bart, dann deren Kinder, ihre Enkel, etc. (mind 4 Generationen). Da es noch keine Nachkommen gibt, können diese frei erfunden werden.

Die Visualisierung soll folgende Informationen darstellen:

- Verwandtschaftsverhältnisse (zumindest Eltern-Kinder),

- Unterscheidung zwischen Blutsverwandtschaft und angeheirateten Familienmitgliedern,

- Geburts- und Todestag sowie Lebensdauer von allen Familienmitgliedern,

- wichtige Ereignisse im Leben jedes Familienmitglieds (z.B., Anzeigen, Gefängnisaufenthalte, Schulzeit, Studienzeit, Nobelpreise, Arbeitslosigkeit etc.)

- Zufriedenheit jedes Familienmitglieds (Skala: sehr niedrig - niedrig - mittel - hoch - sehr hoch); kann sich im Laufe des Lebens ändern.

Die Visualisierung soll die interaktive Auseinandersetzung mit den Daten ermöglichen.
Verpflichtend:
Möglichkeiten zum besseren Vergleich von einzelnen Abschnitten der Stammbäume bzw. Vergleich von Ausschnitten aus Lisas und Barts Stammbäumen.
+ mind. 2 weitere Interaktionsmöglichkeiten (z.B., Details on Demand, Filteroptionen)

Allgemein:

- Die Daten sollen zur Analyse von Zusammenhängen zwischen Familienverhältnissen, wichtigen Ereignissen und Zufriedenheit visualisiert werden (die Anwendungsgebiets- und Zielgruppenanalyse kann kurz gehalten werden).

- Die bisher erlernten Design-Prinzipien sollen umgesetzt werden z.B.: Optimierung der Data-ink ratio (keine Comics!), visuelle Attribute (Größe, Farbe, Position, etc.) sollen sinnvoll eingesetzt werden (Information darstellen).

- Die Mockups sollten zumindest 1) die beiden Stammbäume im Überblick und 2) eine detaillierte Vergleichsansicht von 2 Teil-Stammbäumen wiedergeben.

- Alle nicht angeführten Daten können frei erfunden werden.

------------------------------

=== Analysis ===
==== Field of Application and Analysis of the Data Set ====
===== Field of Application =====
Family trees were originally used to show how certain royal families are intertwined and to show whom a person in the tree is heir to. Nowadays they are mostly used for genealogical research. The most common visualization of a family tree is, as the name suggests, a tree which displays various persons as nodes and those relations by edges connecting the respective nodes. The current generation is usually represented by the leaves of the tree. In order to visualize a marriage, either both persons are represented by a node, or a special marriage edge connecting the respective persons and the eventually resulting children is used.

The main drawback of a family tree is the incapability to display temporal data. For this reason special considerations have been made to display the temporal data just as well as the relational data, while maintaining the advantages of a conventional family tree.
===== Analysis of the Data Set=====
{|cellpadding="2" border="1"
! Variable !! Granularity !! Scale !! Data type
|-
|Family relationship || Discrete || Nominal || Tree
|-
|Consanguinity || Discrete || Nominal || Tree
|-
|Events or periods of life || Discrete || Interval || Temporal
|-
|Satisfaction level || Discrete || Ordinal || 1-dimensional
|}
The data set is subject to an one dimensional, multivariate data structure. The family relationships, consanguinities, events, periods of life and satisfaction levels are dependent on the temporal dimension and for this reason multivariate.
==== Analysis of the Target Audience ====
The target audience mainly consists of genealogical researchers, either professionals or hobbyists. Additionally the visualization can even be of use for psychological, social and medical research due to the additional level of information which is offered by the time-dependent satisfaction level. The research of inheritable diseases or rather the risk to be affected by those or more generally the genetic research seems also conceivable.

The variety of possible application areas demands a visualization which is designed in such a way that it can be used by inexperienced hobbyists, as well as sophisticated professionals from all areas in an intuitive, yet powerful manner.
==== Purpose of the Visualization ====
The visualization provides a representation of the genealogies of several persons by enriching the conventional family tree with interactive features. It's main purpose is the detailed depiction, just as well the comparison of family relationships which can be of use for genealogical research.

The visualization is furthermore capable to display important events (such as birthdays, days of death, etc.), life periods (such as schooldays) and the satisfaction level dependent on the period of life offering an additional depth of information which can be of interest for psychological, medical and social researchers (like mentioned above).
=== Concept ===
==== Type of Visualization ====
The main view of the visualization consists of time-lines, each visualizing the personal history (including important events, periods of life and the satisfaction level) of a person dependent on time. The integration of relational data has been realized with relational events, such as marriages and births. These can be regarded as the edges of the time-lines, comparable to the edges of a conventional tree. Related time-lines (comparable to nodes), and therefore persons, are connected by those relational events implying the temporal occurrence of the event in question.

The visualization can be regarded as conventional hierarchical family tree rotated by 90 degrees with its nodes and edges positioned and shaped according to the temporal data of the respective persons and events.

The comparison of multiple family trees is realized in a straightforward manner. It is possible to display multiple trees one below the other, each having it's own timescale.
==== Visual Mapping ====
{|cellpadding="2" border="1"
!Variable !! Visual attribute
|-
! colspan="2" | Person attributes
|-
|Name || Text
|-
|Details || Text (when interactively invoked)
|-
|Gender || Color of timeline
|-
|Date of birth || Begin position of timeline
|-
|Date of death || End position of timeline
|-
|Lifespan || Length of timeline
|-
|Satisfaction level || Height of bar
|-
! colspan="2" | Event attributes
|-
|Event type || Icon
|-
|Relational event || Icon and vertical line (e.g. implies parent child relation)
|-
|Event Details || Text (when interactively invoked)
|}
==== Applied Techniques ====
===== Non-interactive Techniques =====
* '''Time-lines''' [Aigner, 2009a] representing the personal history of a person.
* '''Hierarchical trees''' [Aigner, 2009b] implied by relational events.
* '''Symbols''' [Miksch, 2009a] for the recognition of major event types.
* '''Bar charts''' representing the satisfaction level of a person dependent on time.
===== Interactive Techniques =====
* '''Zooming and panning''' [Aigner, 2009c] enabling the user to view the data at a higher resolution.
* '''Details on demand''' [Aigner, 2009d] enable the user to display detailed information about a data case.
* '''Semantic depth of field''' [Miksch, 2009b] for the highlighting of time-lines and events on demand.
* '''Filter options''' [Aigner, 2009e] to show the user only the data he or she's interested in.
==== Interactivity ====
{|cellpadding="2" border="1"
!Interaction !! Purpose
|-
|Mouse over timeline || Shows detailed information about the respective person
|-
|Mouse out timeline || Hides detailed information about the respective person
|-
|Mouse over event || Shows detailed information about the respective event
|-
|Mouse out event || Hides detailed information about the respective event
|-
|Click on timeline || Highlights the person, aligns the birthday of the respective person to the jump mark, enlarges the satisfaction bar chart, highlights the consanguinity path.
|-
|Click on event || Shows detailed information about the respective event
|-
|Click on relational event || Applies a semantic depth of field on the related persons and the respective event
|-
|Clicking somewhere else || Deselects selected persons or events
|-
|Drag and drop timeline || Allows to manually sort a timeline vertically
|-
|Filter || Allows the selection of relevant data (e.g. certain names, event types, etc.)
|-
|Sort || Allows the (vertical) sorting of the time-lines (e.g. after name, birthday, etc.)
|-
|Compare || Displays an additional canvas for an additional tree
|}
The interactive features above should be regarded as the default behaviour of the visualization. A settings dialog where the users can change this behaviour is conceivable.
==== Mock ups ====
==== Features ====
The main view of the visualization is relatively clutter-less since only essential information is shown. The user has nevertheless the possibility to filter the data according to his personal relevance and to improve the visual appeal of the visualization by manually sorting the time-lines vertically. The visualization furthermore assist the user to keep focus by applying techniques such as semantic depth of field and highlighting.
==== Advantages ====
* Implicit and well known representation of temporal data
* Simple representation of hierarchical data
* Precise display of satisfaction levels
* Avoidance of visual clutter by features such as details on demand and filters
* Relatively easy to comprehend
==== Possible Improvements and Extensions ====
* The possibility to attach media files to persons or events to offer an additional depth of information (e.g. photos, video clips, documents, etc.).
* The possibility to display global events and periods (such as depressions, climate changes, pandemics, etc.) to offer more insights.
== References ==
* [Aigner, 2009a] Wolfgang Aigner. Visualization of Time-Oriented Data: Visualization Techniques. Created at: December 15, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091214_timevis_techniques_1up.pdf. pages 33-36.
* [Aigner, 2009b] Wolfgang Aigner. Hierarchical Techniques. Created at: November 30, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091130_hierarchical-techniques_1up.pdf. pages 16-17.
* [Miksch, 2009a] Silvia Miksch. Icon-based Techniques. Created at: November 9, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-3.1up.pdf. page 8.
* [Miksch, 2009b] Silvia Miksch. Focus+Context & Distortion Techniques. Created at: November 24, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-5_1up.pdf. page 84-110.
* [Aigner, 2009c] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 28.
* [Aigner, 2009d] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. page 37.
* [Aigner, 2009e] Wolfgang Aigner. Interaction and Visual Analytics. Created at: December 10, 2009. Retrieved at: January 4, 2010. http://www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/20091210_interaction-va_1up.pdf. pages 38-47.

------------------------------

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2009/10|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/ UE InfoVis]

*[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12|Gruppe 12]]

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Preattentive Processing

2009-11-10T20:01:30Z

UE-InfoVis0910 0626117:

==Bearbeitungen Gruppe 12==

==Bearbeitung: 03.11.2009==

* Markup der Definition zu "Quotations" geändert, da es sich bei diesen um Quotes handelt.
* Tablegrafik in Wikitable umgewandelt, um dessen Inhalt verwertbarer zu machen.
* Referenzen and Formatierungsvorgaben angepasst

== Bearbeitung 06.11.2009 ==

* Tabelle erweitert und mit Grafiken und Beschreibungen versehen: verständlicher
* Referenzen aus Originalliste weggelassen, da diese in der Healey-Referenz bereits angegeben sind.
* Quote unter der Tabelle hinzugefügt: für zusätzliche Information zu Preattentive Features
* Rechtschreibfehler ausgebessert

== Bearbeitung 10.11.2009 ==

* Englisch und Rechtschreibfehler vebessert
* Beispielgrafiken durch optisch schönere equivalente aus den resourcen ersetzt, da die originalgrafiken äusserst unansehnlich waren
* Beispielgrafiken in thumbs umgewandelt um platz zu sparen und damit die realitv kurzen erläuterungen nicht zu sehr untergehen

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Preattentive Processing

2009-11-10T20:00:37Z

UE-InfoVis0910 0626117: added two tasks

==Bearbeitungen Gruppe 12==

==Bearbeitung: 03.11.2009==

* Markup der Definition zu "Quotations" geändert, da es sich bei diesen um Quotes handelt.
* Tablegrafik in Wikitable umgewandelt, um dessen Inhalt verwertbarer zu machen.
* Referenzen and Formatierungsvorgaben angepasst

== Bearbeitung 06.11.2009 ==

* Tabelle erweitert und mit Grafiken und Beschreibungen versehen: verständlicher
* Referenzen aus Originalliste weggelassen, da diese in der Healey-Referenz bereits angegeben sind.
* Quote unter der Tabelle hinzugefügt: für zusätzliche Information zu Preattentive Features
* Rechtschreibfehler ausgebessert

== Bearbeitung 10.11.2009 ==

* Englisch und Rechtschreibfehler vebessert
* Beispielgrafiken durch optisch schönere equivalente aus den resourcen ersetzt, da die originalgrafiken äusserst unansehnlich waren
* beispiel grafiken in thumbs umgewandelt um platz zu sparen und damit die realitv kurzen erläuterungen nicht zu sehr untergehen

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Preattentive Processing

2009-11-10T19:57:02Z

UE-InfoVis0910 0626117: Converted example images into thumbs, extended example explanation

= Preattentive processing =
{{Quotation|Visualization is so effective and useful because it utilizes one of the channels to our brain that have the highest bandwidths: our eyes. But even this channel can be used more or less efficiently. One special property of our visual system is preattentive processing. |[Kosara, 2002]}}

{{Quotation|One very interesting result of vision research over the past 20 years has been the discovery of a limited set of visual properties that are processed preattentively (i.e. without the need for focused attention). Typically, tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive.This is because eye movements take at least 200 milliseconds to initiate. Any perception that is possible within this time frame involves only the information available in a single glimpse. Random placement of the elements in the displays ensures that attention cannot be prefocused on any particular location. Observers report that these tasks can be completed with very little effort. |[Healey et al., 1996]}}

== Preattentive features==

{| border="1" cellpadding="3"
|width="400"| '''Feature'''
| '''Picture'''
|width="400" | '''Feature'''
| '''Picture'''
|-
|'''orientation'''<br>A different orientation of a certain object can be used to distinguish it from the other objects preattentively.
|[[Image:Tg_orient.gif|100px]]
|'''length, width, size'''<br>Differences in size can be used for the preattentive distinction of various objects.
|[[Image:Tg_len.gif|100px]]
|-
|'''closure'''<br>A closed object in a pool of unclosed objects can be detected preattentively.
|[[Image:Tg_closure.gif|100px]]
|'''curvature'''<br>The curvature of an object can be considered to detect it preattentively.
|[[Image:Tg_curve.gif|100px]]
|-
|'''density, contrast'''<br>The difference of the density of certain objects to the density of the surrounding objects can be detected preattentively.
|[[Image:Tg_den.gif|100px]]
|'''number, estimation'''<br>A group of objects with a certain feature can be detected preattentively dependent on the number of objects.
|[[Image:Tg_num.gif|100px]]
|-
|'''colour (hue)'''<br>The hue of the objects is used to divide the elements into two groups (i.e. a red group and a blue group) though the form varies randomly from object to object. Tests did show that it is easy for subjects to identify the hue boundary as either vertical or horizontal.
|[[Image:Tg_hue.gif|100px]]
|'''intensity, binocular lustre'''<br>The intensity of an attribute (in this case brightness) can be used for the preattentive detection of an object.
|[[Image:Tg_lum.gif|100px]]
|-
|'''intersection'''<br>
|[[Image:Tg_isect.gif|100px]]
|'''terminators'''<br>
|[[Image:Tg_term.gif|100px]]
|-
|'''3-D depth cues, stereoscopic depth'''<br>Describe attributes of objects that are used to distinguish between objects in 3D space. In this example the distance of the shadow which implies that the further the shadow is away from the oject the greater is the distance between the object and the plane it casts its shadow on.
|[[Image:Tg_3d_depth.gif|100px]]
|'''flicker'''<br>Describes the abrubt change between two different states of the same attribute. In this example visiblity.
|[[Image:Tg_flick.gif|100px]]
|-
|'''direction of motion'''<br>Differences in the direction of motion can be detected preattentively especially if the motion is directed against the flow of general motion.
|[[Image:Tg_dir.gif|100px]]
|'''velocity of motion'''<br>Another motion related cue for preattentive processing is the difference of the continuity of a certain motion speed between an object and its environment.
|[[Image:Tg_vel.gif|100px]]
|-
|'''lighting direction'''<br>The lightning is normally constant for all objects in a certain scene so variations in the lightning of a single object can be used a preattentiv cue.
|[[Image:Tg_3d_light.gif|100px]]
|'''3D orientation'''<br>The orientation in a 3D space can also be used as a cue for preattentive processing.
|[[Image:Tg_orient_3d.gif|100px]]
|-
|'''artistic properties'''<br>
|[[Image:Tg_npr.gif|100px]]
| 
| 
|-
|}
Compiled list from [Healey, 2005], [Chipman, 1996]

{{Quotation|It is important to note that some of these features are asymmetric. For example, a sloped line in a sea of vertical lines can be detected preattentively. However, a vertical line in a sea of sloped lines cannot be detected preattentively. Another important consideration is the effect of different types of background distractors on the target feature. These factors must often be addressed when trying to design display techniques that rely on preattentive processing.|[Healey, 2005]}}

== Examples for preattentive processing ==

[[Image:Bild_302.png|thumb|200px|left]]
<div style="clear:both; height:0px;"> </div>
Detecting an red object within similar shaped blue ones [Chipman, 1996]<br>
Since color is a very good preattentive feature the red circle can be found very easily.

[[Image:Bild_303.png|thumb|200px|left]]
<div style="clear:both; height:0px;"> </div>
Detecting the circle preattentively. [Chipman, 1996]<br>
This is more challenging because the similar color is a stronger feature than the deviant shape but a preattentive identification is still possible.

[[Image:Terget_detection.png|thumb|200px|left|(a)]]
[[Image:Terget_detection1.png|thumb|200px|left|(b)]]
<div style="clear:both; height:0px;"> </div>
Examples of two target detection tasks: (a) target can be detected preattentively because it possesses the feature “filled”; (b) target cannot be detected preattentively because it has no visual feature that is unique from its distractors. [Healey et al., 1996]

[[Image:Hue_shape_P.gif|thumb|200px|left|(a)]]
[[Image:Shape_hue_P.gif|thumb|200px|left|(b)]]
<div style="clear:both; height:0px;"> </div>
Region segregation by form and hue: (a) hue boundary is identified preattentively, even though form varies randomly in the two regions; (b) random hue variations interfere with the identification of a region boundary based on form. [Healey et al., 1996]

==Conclusion==
Any visual processing of that item prior to the act of selection can be called preattentive. [Wolfe, Treisma, 2003]

Preattentive processing can help to rapidly draw the focus of attention to a target with a unique visual feature (i.e., little or no searching is required in the preattentive case). [Healey, 2005]

==References==

*[Kosara et al., 2002] Robert Kosara, Silvia Miksch, Helwig Hauser. Focus+Context Taken Literally ''IEEE Computer Graphics & Applications (CG&A), Special Issue on Information Visualization'', 22(1), pages 22-29. Created at: January/February, 2002. http://www.kosara.net/papers/Kosara_CGA_2002.pdf .

*[Healey et al., 1996] Healey, C. G., Booth, K. S., and Enns, J. T.. High-Speed Visual Estimation Using Preattentive Processing. ''ACM Transactions on Human Computer Interaction'' 3(2), pages 107-135, Created at: 1996. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf .

*[Wolfe, Treisma, 2003] Jeremy M Wolfe, Anne Treisma. What shall we do with the preattentive processing stage: Use it or lose it?, ''Todd S Horowitz poster presented at the Third Annual Meeting of the Vision Sciences Society''. Sarasota. Created at: May, 2003. http://search.bwh.harvard.edu/links/talks/VSS03-JMW.pdf .

*[Healey, 2005] Christopher G. Healey. Perception in Visualization. Department of Computer Science, North Carolina State University. Created at: May, 2005. http://www.csc.ncsu.edu/faculty/healey/PP/index.html#Tri_Cog_Psych:80 .

*[Chipman, 1996] Gene Chipman. Review of High Speed Visual Estimation Using Preattantive Processing (Healy, Booth and Enns). Created at: 1996, Retrieved at: October 24, 2005. http://www.cs.umd.edu/class/spring2002/cmsc838f/preattentive.ppt#267 .

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Preattentive Processing

2009-11-09T19:02:37Z

UE-InfoVis0910 0626117:

= Preattentive processing =
{{Quotation|Visualization is so effective and useful because it utilizes one of the channels to our brain that have the highest bandwidths: our eyes. But even this channel can be used more or less efficiently. One special property of our visual system is preattentive processing. |[Kosara, 2002]}}

{{Quotation|One very interesting result of vision research over the past 20 years has been the discovery of a limited set of visual properties that are processed preattentively (i.e. without the need for focused attention). Typically, tasks that can be performed on large multi-element displays in 200 milliseconds or less are considered preattentive.This is because eye movements take at least 200 milliseconds to initiate. Any perception that is possible within this time frame involves only the information available in a single glimpse. Random placement of the elements in the displays ensures that attention cannot be prefocused on any particular location. Observers report that these tasks can be completed with very little effort. |[Healey et al., 1996]}}

== Preattentive features==

{| border="1" cellpadding="3"
|width="400"| '''Feature'''
| '''Picture'''
|width="400" | '''Feature'''
| '''Picture'''
|-
|'''orientation'''<br>A different orientation of a certain object can be used to distinguish it from the other objects preattentively.
|[[Image:Tg_orient.gif|100px]]
|'''length, width, size'''<br>Differences in size can be used for the preattentive distinction of various objects.
|[[Image:Tg_len.gif|100px]]
|-
|'''closure'''<br>A closed object in a pool of unclosed objects can be detected preattentively.
|[[Image:Tg_closure.gif|100px]]
|'''curvature'''<br>The curvature of an object can be considered to detect it preattentively.
|[[Image:Tg_curve.gif|100px]]
|-
|'''density, contrast'''<br>The difference of the density of certain objects to the density of the surrounding objects can be detected preattentively.
|[[Image:Tg_den.gif|100px]]
|'''number, estimation'''<br>A group of objects with a certain feature can be detected preattentively dependent on the number of objects.
|[[Image:Tg_num.gif|100px]]
|-
|'''colour (hue)'''<br>The hue of the objects is used to divide the elements into two groups (i.e. a red group and a blue group) though the form varies randomly from object to object. Tests did show that it is easy for subjects to identify the hue boundary as either vertical or horizontal.
|[[Image:Tg_hue.gif|100px]]
|'''intensity, binocular lustre'''<br>The intensity of an attribute (in this case brightness) can be used for the preattentive detection of an object.
|[[Image:Tg_lum.gif|100px]]
|-
|'''intersection'''<br>
|[[Image:Tg_isect.gif|100px]]
|'''terminators'''<br>
|[[Image:Tg_term.gif|100px]]
|-
|'''3-D depth cues, stereoscopic depth'''<br>Describe attributes of objects that are used to distinguish between objects in 3D space. In this example the distance of the shadow which implies that the further the shadow is away from the oject the greater is the distance between the object and the plane it casts its shadow on.
|[[Image:Tg_3d_depth.gif|100px]]
|'''flicker'''<br>Describes the abrubt change between two different states of the same attribute. In this example visiblity.
|[[Image:Tg_flick.gif|100px]]
|-
|'''direction of motion'''<br>Differences in the direction of motion can be detected preattentively especially if the motion is directed against the flow of general motion.
|[[Image:Tg_dir.gif|100px]]
|'''velocity of motion'''<br>Another motion related cue for preattentive processing is the difference of the continuity of a certain motion speed between an object and its environment.
|[[Image:Tg_vel.gif|100px]]
|-
|'''lighting direction'''<br>The lightning is normally constant for all objects in a certain scene so variations in the lightning of a single object can be used a preattentiv cue.
|[[Image:Tg_3d_light.gif|100px]]
|'''3D orientation'''<br>The orientation in a 3D space can also be used as a cue for preattentive processing.
|[[Image:Tg_orient_3d.gif|100px]]
|-
|'''artistic properties'''<br>
|[[Image:Tg_npr.gif|100px]]
| 
| 
|-
|}
Compiled list from [Healey, 2005], [Chipman, 1996]

{{Quotation|It is important to note that some of these features are asymmetric. For example, a sloped line in a sea of vertical lines can be detected preattentively. However, a vertical line in a sea of sloped lines cannot be detected preattentively. Another important consideration is the effect of different types of background distractors on the target feature. These factors must often be addressed when trying to design display techniques that rely on preattentive processing.|[Healey, 2005]}}

== Examples for preattentive processing ==

[[Image:Preattantive_1.jpg]]

Detecting the Red Object preattentively.[Healey et al., 1996] One visual variable and very easy to find it.

[[Image:Preattantive_2.jpg]]

Detecting the Circle preattentively.[Chipman, 1996] It is more difficult but still preantentiv.

[[Image:Preattentive_4.JPG]]

Examples of two target detection tasks: (a) target can be detected preattentively because it possess the feature “filled”; (b) target cannot be detected preattentively because it has no visual feature that is unique from its distractors.[Healey et al., 1996]

[[Image:Preattentive_3.JPG]]

Region segregation by form and hue: (a) hue boundary is identified preattentively, even though form varies randomly in the two regions; (b) random hue variations interfere with the identification of a region boundary based on form.[Healey et al., 1996]

==Conclusion==
Any visual processing of that item prior to the act of selection can be called “preattentive”.[Wolfe, Treisma, 2003]

Preattentive processing can help to rapidly draw the focus of attention to a target with a unique visual feature (i.e., little or no searching is required in the preattentive case). [Healey, 2005]

==References==

*[Kosara et al., 2002] Robert Kosara, Silvia Miksch, Helwig Hauser. Focus+Context Taken Literally ''IEEE Computer Graphics & Applications (CG&A), Special Issue on Information Visualization'', 22(1), pages 22-29. Created at: January/February, 2002. http://www.kosara.net/papers/Kosara_CGA_2002.pdf .

*[Healey et al., 1996] Healey, C. G., Booth, K. S., and Enns, J. T.. High-Speed Visual Estimation Using Preattentive Processing. ''ACM Transactions on Human Computer Interaction'' 3(2), pages 107-135, Created at: 1996. http://www.csc.ncsu.edu/faculty/healey/download/tochi.96.pdf .

*[Wolfe, Treisma, 2003] Jeremy M Wolfe, Anne Treisma. What shall we do with the preattentive processing stage: Use it or lose it?, ''Todd S Horowitz poster presented at the Third Annual Meeting of the Vision Sciences Society''. Sarasota. Created at: May, 2003. http://search.bwh.harvard.edu/links/talks/VSS03-JMW.pdf .

*[Healey, 2005] Christopher G. Healey. Perception in Visualization. Department of Computer Science, North Carolina State University. Created at: May, 2005. http://www.csc.ncsu.edu/faculty/healey/PP/index.html#Tri_Cog_Psych:80 .

*[Chipman, 1996] Gene Chipman. Review of High Speed Visual Estimation Using Preattantive Processing (Healy, Booth and Enns). Created at: 1996, Retrieved at: October 24, 2005. http://www.cs.umd.edu/class/spring2002/cmsc838f/preattentive.ppt#267 .

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Preattentive Processing

2009-11-09T18:57:44Z

UE-InfoVis0910 0626117:

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Color space

2009-11-09T18:53:13Z

UE-InfoVis0910 0626117:

== Bearbeitungen Gruppe 12 ==
* Artikel umbenannt, da der Inhalt eher zu dem Thema Color Space / Color als zu Color Coding passt.
* Neue Referenz [Marko Tkalčič, 2003] für weitere Abdeckung zu Color space definitionen hinzugefügt.
* Coding definition herausgenommen: Da diese irrrelevant für das neue Thema "Color space" ist.
* Quellenformatierung richtiggestellt, da sie teilweise nicht den Vorgaben entsprochen hat.
* RGB allgemeiner geschrieben, da die Funktionsweise von Shadow Mask CRT's nicht sehr allgemein ist
* CMY(K) Teil neu geschrieben, da das verwendete Zitat teilweise zu detailiert auf den Begriff eingegangen ist.
* YIQ/YUV Teil neu geschrieben, da auch hier zu sehr ins Detail gegangen wurde bzw. nur ein Zitat verwendet wurde.
* Sahler Zitat sowie dazu gehörige Referenz entfernt, da nicht relevant für den neuen Titel "Color space"
* HSL und HSV Artikel neu geschrieben
* Neue HSL und HSV Abbildung hinaufgeladen und eingefügt
* Einleitung neu geschrieben, um besser auf das neue Thema "Color space" einzugehen
* Hufeisen CIE Farbraumgrafik hinzugefügt, um neues Thema visuell zusätzlich zu unterstützen.

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Color space

2009-11-09T18:52:54Z

UE-InfoVis0910 0626117:

== Bearbeitunge Gruppe 12 ==
* Artikel umbenannt, da der Inhalt eher zu dem Thema Color Space / Color als zu Color Coding passt.
* Neue Referenz [Marko Tkalčič, 2003] für weitere Abdeckung zu Color space definitionen hinzugefügt.
* Coding definition herausgenommen: Da diese irrrelevant für das neue Thema "Color space" ist.
* Quellenformatierung richtiggestellt, da sie teilweise nicht den Vorgaben entsprochen hat.
* RGB allgemeiner geschrieben, da die Funktionsweise von Shadow Mask CRT's nicht sehr allgemein ist
* CMY(K) Teil neu geschrieben, da das verwendete Zitat teilweise zu detailiert auf den Begriff eingegangen ist.
* YIQ/YUV Teil neu geschrieben, da auch hier zu sehr ins Detail gegangen wurde bzw. nur ein Zitat verwendet wurde.
* Sahler Zitat sowie dazu gehörige Referenz entfernt, da nicht relevant für den neuen Titel "Color space"
* HSL und HSV Artikel neu geschrieben
* Neue HSL und HSV Abbildung hinaufgeladen und eingefügt
* Einleitung neu geschrieben, um besser auf das neue Thema "Color space" einzugehen
* Hufeisen CIE Farbraumgrafik hinzugefügt, um neues Thema visuell zusätzlich zu unterstützen.

Teaching talk:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Color space

2009-11-05T21:19:40Z

UE-InfoVis0910 0626117:

== Bearbeitunge Gruppe 12 ==
* Neue Referenz [Marko Tkalčič, 2003] für weitere Abdeckung zu Color space definitionen.

== Bearbeitung von Hiro 05.11.2009 ==
* RGB allgemeiner geschrieben: da die Funktionsweise von Shadow Mask CRT's nicht sehr allgemein ist

== Bearbeitung von Immanuel 05.11.2009 ==
* CMY(K) Teil neu geschrieben
* YIQ/YUV Teil neu geschrieben
* Sahler Zitat sowie dazu gehörige Referenz entfernt, da nicht relevant für den neuen Titel "color spaces"

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe G12 - Aufgabe 1 - Color space

2009-11-05T21:09:32Z

UE-InfoVis0910 0626117: redone CMY(K) and YIQ/YUV, Added link to [Marko Tkalčič, 2003], Removed [Sahler, 2005] reference and quote, resized image thumbs to uniform width, changed sub title to "Examples for Color spaces"

==Color==
[[Image:Intro.JPG|thumb|400px|none|Light is electromagnetic radiation with wavelength between 380 nm = blue and 780 nm = red.
Unit 1 nm = 1 billionth of a meter.|right]]
[[Image:Colorspace.png|thumb|200px|none|Colorspaces and Horseshoe Shape of visible Color
|right]]
{{Quotation|Color is the perceptual result of light in the visible region of the spectrum, having wavelengths in the region of 400 nm to 700 nm, incident upon the retina. |[Poynton, 1999]}}

The complexity of all kinds of different color mixtures was substantially simplified in 1931 by Commission Internationale de l'Éclairage CIE, who defined a two-dimensional, horseshoe-like color space, that allows easy definition and description of color mixtures. The edge of the horseshoe includes all the pure spectral colors. The inside region contains the mixtures.
<br><br><br>
The human visual perception is too complex to be quantified in a more than approximate manner. One practical approach is to define 2,3 or more spectral colors and create mixed colors by adjusting the relative proportions of the said spectral colors and colorless (i.e. white/black) component,. Or one defines first the mixed color, quantifies first its colorless (brightness/darkness) component and then codes the color information as deviation in the direction of 2, 3 or more spectral colors. Typical examples would be the RGB and YIQ systems respectively. [Miszalok and Smolej, 2001]

==Examples for Color spaces==

===RGB===

[[Image:3DVecModelRGB.JPG|thumb|300px|right|3D-vector space of the RGB-color model]]

The RGB color model is an additive color model, forming its gamut from various mixtures of the primary additive colors red, green and blue. The main idea behind the RGB color model is the human perception of color, furthermore the trichromatic theory which states that there are three types of cones, which are referred to as L, M, and S cones (long, middle and short wavelength sensitivity), approximately sensitive to the red, green and blue region of the visible spectrum.

The main purpose of the RGB color model is the sensing and reproduction of color on electronic devices such as computers, televisions. Typical RGB input devices are color TV and video cameras, image scanners, and digital cameras
<div style="clear:both;"> </div>
===CMY(K)===

[[Image:3DVecModeCMY.JPG|thumb|300px|right|3D-vector model of the CMY color space]]
[[Image:CMY.JPG|thumb|300px|right|Composed image and its seperate channels]]

Other than RGB, CMY doesn't add light but rather removes it much like the color of reflected light is composed in the real world hence it is also called a subtractive color space. To achieve this subtractive characteristic the CMY color space uses the three primary colors Cyan, Magenta and Yellow and adds those to white. The higher the values of the primary colors the darker is the represented color. The CMY color space is basically an inverted RGB color space and therefore values can be converted very easily.<br>
The CMY color space is primarily used in printing applications were mostly a fourth primary color K (Key, Black) is added which is then called CMYK color space. The reason for the use of the additional Key is that printing black with CMY in real life doesn't result in really deep black, is very costly and needs more time to dry than a single black color.<br>
The conversion between RGB and CMYK isn't as trivial as the conversion between RGB and CMY.<br>
Although the CMY space is closer to how we use colors in dying or painting scenarios it is still non-intuitive since the percepted difference between colors isn't linear as the CMY values might suggest.
<div style="clear:both"> </div>
===YIQ and YUV===

The YIQ and the YUV color spaces are basically transformations of the RGB color space where at first the three channels of RGB and composed into a single luminance (Y) channel and two difference channels that basically contain the difference between either R - Y or B - Y.<br>
This color space was developed because of the growing demand of color television and the need to e still backwards compatible to old black&white television sets that worked with a single luminance channel.<br>
Though the concept behind YIQ and YUV is the same the actual conversion of RGB into luminance and weighted difference channels is implemented differently.
<br><br>
'''YIQ''': is used in the color TV norm NTSC which is used in America and Japan.

'''YUV''': is the color space of the PAL color TV norm used in Europe, Africa, Asia except for Japan, Australia. It is also used in digital video.<br>
Though YIQ and YUV signals are very similar YUV has a higher bandwidth and correspondingly higher quality.
<div style="clear:both;"> </div>
===HSL and HSV===
[[Image:Hsl-hsv.png|thumb|300px|none|HSV and HSL Colorspaces|right]]
HSL and HSV are color models wich describe the color relationships better than RGB. HSL stands for hue, saturation and lightness while HSV stands for hue, saturation and value. These color models reflect the human color vision better than the RGB, CMY, YUV and YIQ models, which are targeted primarily for hardware applications.

The color space of HSL and HSV can be thought of cylinders. Each point in this cylinder describes a color.

The three coordinates H, L and S of this system can be easily visualized as follows: Pure colors are found at the outer border of a horizontal color circle. The hue can be interpreted as the polar angle, going from red (0 degrees), green (120), blue (240) back to red.
The closer to the center of the circle the higher the proportion of the white color. The center of the circle is colorless white. Below this level other color circles are positioned in a cylindrical fashion. The lower they are, the darker they get.
<div style="clear:both;"> </div>
==Bibliography==
*[Poynton, 1999] Charles Poynton. Frequently Asked Questions about Color. Created at: Dec 30, 1999. http://www.miszalok.de/Lectures/L11_ColorCoding/ColorFAQ.pdf .

*[Miszalok and Smolej, 2001] V. Miszalok, V. Smolej. Color Coding. Jan 13, 2001. http://www.miszalok.de/Lectures/L11_ColorCoding/ColorCoding_english.htm#a1

*[Marko Tkalčič, 2003] Marko Tkalčič. Colour spaces - perceptual, historical and applicational background. 2003. http://ldos.fe.uni-lj.si/docs/documents/20030929092037_markot.pdf

[[Category:Glossary]]

User:UE-InfoVis0910 0626117

2009-10-27T16:05:17Z

UE-InfoVis0910 0626117:

* Name: Bauer, Immanuel

[[Image:UE-InfoVis0910_0626117_userpagepic.png]]

Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12

2009-10-24T17:17:14Z

UE-InfoVis0910 0626117: New page: === Gruppenmitglieder === * Bauer, Immanuel * Eigner, Matthias * ??? === Aufgaben === * [[Teaching:TUW - UE InfoVis WS 2009...

=== Gruppenmitglieder ===
* [[User:UE-InfoVis0910_0626117|Bauer, Immanuel]]
* [[User:UE-InfoVis0910_0625203|Eigner, Matthias]]
* ???

=== Aufgaben ===
* [[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 0|Aufgabe 0]]
* [[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 1|Aufgabe 1]]
* [[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 2|Aufgabe 2]]
* [[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 3|Aufgabe 3]]
* [[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12 - Aufgabe 4|Aufgabe 4]]

Teaching:TUW - UE InfoVis WS 2009/10

2009-10-24T17:10:25Z

UE-InfoVis0910 0626117: Gruppe 12 stub added

[[Image:Aigner03infovis ue.gif]] <big>WS 2009/10</big>

'''LVA Nr:''' 188.308 ([http://tuwis.tuwien.ac.at/lva/tuwien/188308 TUWIS++ Seite])

'''LVA Homepage:''' http://ieg.ifs.tuwien.ac.at/~gschwand/teaching/infovis_ue_ws09/index.html

'''Leitung:''' [[Gschwandtner, Theresia|Theresia Gschwandtner]] [gschwandtner (at) ifs.tuwien.ac.at]<br>
'''Tutorin:''' [[User:Katharina-Anna Wendelin|Katharina-Anna Wendelin]] [e0425160 (at) student.tuwien.ac.at]

== Gruppen ==


[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 01|Gruppe 01 (Sakai, Sverak, <frei>)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 02|Gruppe 02 (Feichtinger, Rezaei, Schindelka)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 03|Gruppe 03 (Lang, Hackl, Hasslacher)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 04|Gruppe 04 (Kaiser, <NACHNAME>, Ehsani)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 05|Gruppe 05 (Paizoni, Wuttej, Hudl)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 06|Gruppe 06 (Fried, Fritz, Hiller)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 07|Gruppe 07 (Schwengerer, <???>, <???>)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 09|Gruppe 09 (Hubmann-Haidvogel, Kloibhofer, Riederer)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 12|Gruppe 12 (Bauer, Eigner, <???>)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 13|Gruppe 13 (Sadauskas, Scheikl, Burger)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 14|Gruppe 14 (Gastecker, Hahn, Leeb)]]

[[Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 15|Gruppe 15 (Martin, Stix, Lenzhofer)]]

== News / Bemerkungen ==

Liebe TeilnehmerInnen!<br>
Um diese Seite einheitlich zu gestalten (auch bezüglich der Vorjahre), schlage ich vor die Nachnamen
der Gruppenmitglieder in Klammer neben der Gruppe anzugeben,<br>
z.B.: Gruppe XX (Maier, Müller, Mustermann).<br>
-- [[Gschwandtner, Theresia|Theresia Gschwandtner]] 10:05, 01 October 2009 (CEST)

User:UE-InfoVis0910 0626117

2009-10-24T17:08:10Z

UE-InfoVis0910 0626117: New page: * Name: Bauer, Immanuel * MatrNr: 0626117 * Knz: 532 Image:UE-InfoVis0910_0626117_userpagepic.png

* Name: Bauer, Immanuel
* MatrNr: 0626117
* Knz: 532

[[Image:UE-InfoVis0910_0626117_userpagepic.png]]

File:UE-InfoVis0910 0626117 userpagepic.png

2009-10-24T17:06:02Z

UE-InfoVis0910 0626117: An image for my userpage.

== Summary ==
An image for my userpage.
== Copyright status ==
(cc) by
== Source ==
myself