InfoVis:Wiki - User contributions [en]

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

2005-11-21T14:41:03Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

* a expressive and effective representation of the data records and contained information so that user can see with this visualization as fast as possible overview of the data and contained information.
* Exploration visualization on the data record . Good presentation of information, because users can obtain information with visualization better.
* semantic information from data
* Data condensation , so that complex information can be well observed.

=== Which tasks should be solved? ===

* current condition from information
* Visualization should be clear , Information is to be made more easily understandable.
* Data must be interpreted correct
* Information is to be explained at the best user
* Restriction of the data . NOT too much data , too little space .

=== Questions that can be solved using this Visualisation ===

* Is there a certain structure classification of the data?
* Are Information understandable?
* Are Information made essential?
* Is Color used purposefully ?

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

As you can see in our second [[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|layout]] we have a multi windwow view. The starting point is in the big main window. In the beginning the other windwos are empty. In the main part the user sees all the songs availible represented in boxes of different shade and size. It is possible to scale the x- and the y-axis to have a better overview, or to see the boxes larger. When he clicks at one of those boxes more detailed information will appear in the other windows. In the lower left window the user will see the different Artists that suited his selection. There will be one box for each artist containing all the albums of this artist that correspond with the users selection of genre and year. In the lower right window the user can see a more detailed view on the ratings of his selection. So the mean value is split up and one can see how many songs there are for each rating star. In the upper left window the first album of the first artist will be presented, showing the songs.

In the next step the user can interact in the three smaller windwos to change the artist, the album, or choose only specific ratings. When the user clicks on a new album or artist the details in the upper right window will be updated. Moreover there is the possibility to choose only some of the ratings represented in the lower right window. For example only 4 to 5 stars. Then the songs in the upper right window will be updated correctly and only albums which contain songs with this rating will be shown in the lower left window.

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-21T14:33:28Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

* a expressive and effective representation of the data records and contained information so that user can see with this visualization as fast as possible overview of the data and contained information.
* Exploration visualization on the data record . Good presentation of information, because users can obtain information with visualization better.
* semantic information from data
* Data condensation , so that complex information can be well observed.

=== Which tasks should be solved? ===

* current condition from information
* Visualization should be clear , Information is to be made more easily understandable.
* Data must be interpreted correct
* Information is to be explained at the best user
* Restriction of the data . NOT too much data , too little space .

=== Questions that can be solved using this Visualisation ===

* Is there a certain structure classification of the data?
* Are Information understandable?
* Are Information made essential?
* Is Color used purposefully ?

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

As you can see in our second [[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|layout]] we have a multi windwo view. The starting point is in the big main window. In the begining the other windwos are empty. In the main part the user sees all the songs availible represented in boxes of different color and size. It is possible to scale the x- and the y-axis to have a better overview, or to see the boxes larger. When he clicks at one of those boxes more detailed information will appear in the other windows. In the lower left window the user will see the different Artists that suited his selection. There will be one box for each artist containing all the albums of this artist. In the lower right window the user can see a more detailed view on the ratings of his selection. So the mean value is split up and one can see how many songs there are for each rating star. In the upper left window the first album of the first artist will be presented.

In the next step the user can interact in the three smaller windwos to change the artist, the album, or choose only specific ratings. When the user clicks on a new album or artist the details in the upper right window will be updated. Moreover there is the possibility to choose only some of the ratings represented in the lower right window. For example only 4 to 5 stars. Then the songs in the upper right window will be updated correctly and only albums which contain songs with this rating will be shown in the lower left window.

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-21T11:41:23Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

Warum haben wir nur wenige Datensätze heraus genommen?

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

As you can see in our second [[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|layout]] we have a multi windwo view. The starting point is in the big main window. In the begining the other windwos are empty. In the main part the user sees all the songs availible represented in boxes of different color and size. When he clicks at one of those boxes more detailed information will appear in the other windows. In the lower left window the user will see the different Artists that suited his selection. There will be one box for each artist containing all the albums of this artist. In the lower right window the user can see a more detailed view on the ratings of his selection. So the mean value is split up and one can see how many songs there are for each rating star. In the upper left window the first album of the first artist will be presented.

In the next step the user can interact in the three smaller windwos to change the artist, the album, or choose only specific ratings.

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-21T11:00:14Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

Warum haben wir nur wenige Datensätze heraus genommen?

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

As you can see in our second [[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|layout]] we have a multi windwo view. The starting point is in the big main window. In the begining the other windwos are empty. In the main part the user sees all the songs availible represented in boxes of different color and size. When he clicks at one of those boxes

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-21T10:57:17Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

Warum haben wir nur wenige Datensätze heraus genommen?

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

[[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg]]

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-21T10:56:53Z

UE-InfoVis0506 0025470: /* Interaction */

== Application Area and given Dataset ==

=== Application Area Analysis ===

The application area for this task is to visualize a music archive with the data provided by ID3/iTunes tags. These tags include information about songname, artist, year, album,... The challenge in visualizing this information is to select "good" attributes that can be brought into relation, because of the high number of discreet and "organizational" attributes.

=== Dataset Analysis ===

{|
|- style="background:#e0e0e0"
!Attribute
!Data type
!Description
|- style="background:#eeeeee"
|Name
|Discreet
|Song title
|-
|Artist
|Discreet
|Artist name
|- style="background:#eeeeee"
|Album
|Discreet
|Album name
|-
|Genre
|Nominal
|Genre the song belongs to
|- style="background:#eeeeee"
|Composer
|Discreet
|The composer of the song
|-
|Size
|Ordinal
|The file size
|- style="background:#eeeeee"
|Total time
|Ordinal
|The total time of the song
|-
|Disc number
|Ordinal
|Number of the disc
|- style="background:#eeeeee"
|Disc count
|Ordinal
|Total number of discs
|-
|Track number
|Ordinal
|Track number of this song on the disc
|- style="background:#eeeeee"
|Track count
|Ordinal
|Total number of tracks on the disc
|-
|Year
|Ordinal
|Year of origin
|- style="background:#eeeeee"
|Date Modified
|Ordinal
|Date of modification
|-
|Date added
|Ordinal
|Date when song was added to archive
|- style="background:#eeeeee"
|Bit rate
|Ordinal
|Bit rate of song (e.g. 128kbit/s)
|-
|Sample rate
|Ordinal
|Sample rate of song (e.g. 44100Hz)
|- style="background:#eeeeee"
|Play count
|Ordinal
|Number of time the song was played
|-
|Play date
|Ordinal
|Date of last play
|- style="background:#eeeeee"
|Play date UTC
|Ordinal
|Date of last play in [http://en.wikipedia.org/wiki/UTC UTC]
|-
|Location
|Discreet
|File location
|- style="background:#eeeeee"
|File Folder Count
|Ordinal
|Number of file in the same folder as the current song
|-
|Library folder count
|Ordinal
|Number of files in library folder
|- style="background:#eeeeee"
|Kind
|Nominal
|Kind of file (e.g. MPEG audio file)
|-
|Rating
|Ordinal
|Personal rating (1-5 stars)
|}

One data record consists of a concatenation of attributes listed in the table above. Those attributes are all 1-dimensional. A data record contains only necessary attributes or attributes with data.

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

Our visualisation tool will make it possible to browse through the music collection in different ways than what iTunes offers. It's meant for people who want to find some music, they for example didn't listen to for a long time. They will see from wich period the songs are, which genre they fall into and how they have been rated. This is a different starting point than usual and will allow the user to probably find other music, than without the tool.

The people that will use our tool are familiar with the internet and use it quite often. Moreover they are using their computer a lot at home and have their pc or mac in the living room where it is not only used to work, but also as multimedia station. That means they play video, music and watch TV with their computer.

They are also interessted in music and they are buying the music from the internet and not buying the songs on a CD. If they buy a CD they rip the content on the pc to have it in their music library.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

Our target group has more interesst in mp3s than they have in buying CDs and playing them from their CD player. They have all their music stored on their computer and want to have many possibilities to browse through their collection. They are looking for new ways of finding music so that they can listen to they music they like and the music they feel for in the moment. Instead of putting a CD into the HiFi set they want to see what they have in their collection that suits their mood.

=== Are there any known / often used Methods / Visualisation Techniques? ===

Up to now there are no real visualisation techniques in the area of music players like iTunes. The only visualisation techniques can be found at the playback time of a song, when the music itself is visualised.

For representing the Songs of a library ususally lists or tables are used. That means this is not a real graphic visualisation, it's just a representation of the data, that the user can read and use to make for example playlists. Especially in iTunes the possibilities of combining many ID3 attributes to get a playlist are vast. You can for example say you want only songs from 1980 to 1984, that are in the rock genre, that have a rating between 1 and 3 stars, and are not from Guns n' Roses. So you can do quite a lot of things with it, but there is no visualisation behind it. You can choose all that, but you can not choose it graphically which can make this much easier, faster, or just more interessting.

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

Warum haben wir nur wenige Datensätze heraus genommen?

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===
The actually existing music library systems mostly don't really visualize the contained music using its attributes but simply use lists of items (artists, albums, songs, playlists...). While this concept is easily understandable for the end-user it only allows for simple browsing using the following techniques:

* Searching for specific artists, albums, titles and so on.
* Filtering the list by choosing ranges or values for some attributes
* Sorting the list by different attributes
* Scrolling the list up and down

Some attributes of song items like artist, album and title are of hierarchical character and therefore suited mainly for being displayed in a list or being used for browsing in multi-step lists. One example of such a multi-step list is the media library in Winamp (TODO: cite): After selecting an artist in the first list, the second list gets filled with the available albums of this artist. Selecting an album fills the next list with the associated songs of this album and so on.

TODO: list the different types of attributes!

While hierarchical attributes can be considered essential and are very useful for a multi-level selection process or direct textual searching/filtering, they only can be used if the user exactly knows what he or she wants to listen to. In opposite users often want to listen to randomly chosen or special pattern matching song lists like "My Top 10 Most Played Ones".

Considering these facts we chose other criteria than hierachical attributes of music items for creating new concepts of how to find interesting music without exactly knowning what to listen to. Using attributes like genre, year of creation, rating, playcount and date of last play different approaches of browsing music came up to our minds.

=== Visual Mapping ===
In the context of this task the "Music Type Selection" (TODO: find a superior name) browsing approach was chosen for being designed in detail and worked out as a prototype. This approach uses the following visual mapping:
* The approach bases on a 2D diagram containing:
** The year of creation on the x-axis
** The genre on the y-axis
Using this grid groups of similar music with respect to genre and year are getting plotted into the diagram as filled boxes. Additionally another two attributes are being mapped:
* The absolute number of songs within a specific group is mapped as the size of the box.
* The mean rating of all songs within this group is mapped as the intensity of the color used for filling the boxes.

=== Used Techniques / Applied Principles ===
TODO: this is a listing of used techniques only at the moment - detail and map to the implemented features
* Focus & Context: Tiled Multi-Level Browser (Slides 0, Page 16)
** Overview Window
** Zoomed Window
** Details On Demand Window
* Scatterplot + Color and Shape concept
* Dynamic Queries: live choosable sliders for attribute ranges (Slides 4, Page 8)
* Linking & Brushing: Detail window containing rating distribution of selected songs (Slides 0, Page 25)
* Visual Encoding: volume, color

=== Interaction ===

[[Media:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

=== Mockup(s) / Fake Screenshot(s) ===
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf1.gif|none|thumb|500px|none|Entwurf 1]]
[[Image:InfoVis_Gruppe10_Aufgabe3_Entwurf2.jpg|none|thumb|561px|none|Entwurf 2]]

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

2005-11-20T17:30:04Z

UE-InfoVis0506 0025470: /* Are there any known / often used Methods / Visualisation Techniques? */

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

2005-11-20T17:29:36Z

UE-InfoVis0506 0025470: /* Are there any known / often used Methods / Visualisation Techniques? */

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

2005-11-20T15:43:02Z

UE-InfoVis0506 0025470: /* Are there any known / often used Methods / Visualisationtechniques? */

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

2005-11-20T15:29:31Z

UE-InfoVis0506 0025470: /* Who should use this visualation technique? */

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

2005-11-20T15:25:56Z

UE-InfoVis0506 0025470: /* What are the special interests of our target group? */

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

2005-11-20T15:01:49Z

UE-InfoVis0506 0025470: /* Who should use this visualation technique? */

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

2005-11-16T12:29:00Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

The first step in the process of creating a better version of the provided graphic was the detailed analysis of the graphic and its drawbacks considering the discussed design principles.

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

Through the very bad Data-Ink-Ratio and lot of Chart Junk the Preattentive Processing [Healey et al., 1996] is heavily affected:

* The embedded bodies/heads of doctors and other professionals distract the viewer's eyes from the main information. Thus it is hard for the first-time viewer to quickly understand the information content of the diagram.

* The descriptions of the both data samples (Office-based nonsalaried physicians versus Male professional technical and kindred workers) are not clearly placed in the graphics and cannot be preattentively associated to the data series.

* Especially the data series of the technical workers is not really presented by clear data bars because of the worker pictures on top using the same color as the bars (both black). Thus the different salary values can optically not clearely be compared against each other.

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

Edward Tufte states the principle that "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented" [Tufte, 1991]

This principle is definitly violated in the provided graphic because of the following facts:

* The provided original graphic heavily uses changes in the continuity of the time scale. While in the beginning of the time scale jumps of up to 8-9 years occur between two salary values, the last five salary values differ only by 1 year anymore.

* As seen in the redesigned graphic using a linear time-scale the original graphic uses the Lie Factor to hide the fact that the distributions of the salaries are exponential not nearly linear as the viewer guesses by looking at the original graphic.

* By changing the time scale multiple times within the same diagram, the viewer is confused and is potentially not able to directly discover the lie.

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

Edward Tufte comments the principle of Chart Junk as follows: "The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new." [Tufte, 1991]

The provided graphic does contain a lot of ink not telling the viewer anything new:

* The embedded stilistic pictures of doctors and other professionals are really unnecessary Chart Junk.

* The time scale is labeled with full year marks. This can be reduced to only using the last two digits as the first two ones don't change over the whole time-scale.

* The black background of the technical workers data series is making it more difficult for the viewer to recognize the presented information.

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

* A lot of color is used just for separating the two data series from each other.

* As mentioned above, the stilistic pictures of doctors and other professionals add a high amount of ink to the diagram which do not contain much additional information.

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

* The use of few colors for clearly separating the different data series within the same diagram makes sense. The provided graphic uses black and white for the two data series which results in a graphic with high contrast. The drawback of this approach is that the viewer is distracted from recognizing the main content information to the contrast spots which do not contain the real information.

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

Donny Truong describes the Aesthetic-Usability Effect as follows: "Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design." [Truong, 2005]

The following comments on the provided graphic affect this effect:

* The heavy use of Chart Junk and the high Lie Factor lead to a diagram with a low usability.

* By using only black & white as "colors", the recognition of the information content is complicated for the viewer and directly degrades the aestetic approach of the graphic.

== Improvements ==

* A linear time scale was used to provide a clear basis for understanding the information content of the diagram to the viewer.

* Through the use of a linear time scale the non-linear but exponential growth of the salaries were presented to the viewer.

* Usage of a line chart leads to a better visualisation of the higher growth of doctors salary.

* Removal of the Chart Junk (mainly the pictures of doctors and other professionals and 4-digit years) which results in a better data-ink-ratio.

* Improval of the Aesthetic-Usability Effect due to usage of two easily distinguishable colors.

== Redesigned Graphic ==
[[Image:Diagramm 04.png|none|thumb|800px|none|Redesigned Graphic]]

= Resources =

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

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

[Truong, 2005] Donny Truong, ''Universal Principles of design''. Access Date: 3. November 2005
http://www.visualgui.com/index.php?p=1

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

2005-11-16T12:28:32Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

The first step in the process of creating a better version of the provided graphic was the detailed analysis of the graphic and its drawbacks considering the discussed design principles.

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

Through the very bad Data-Ink-Ratio and lot of Chart Junk the Preattentive Processing [Healey et al., 1996] is heavily affected:

* The embedded bodies/heads of doctors and other professionals distract the viewer's eyes from the main information. Thus it is hard for the first-time viewer to quickly understand the information content of the diagram.

* The descriptions of the both data samples (Office-based nonsalaried physicians versus Male professional technical and kindred workers) are not clearly placed in the graphics and cannot be preattentively associated to the data series.

* Especially the data series of the technical workers is not really presented by clear data bars because of the worker pictures on top using the same color as the bars (both black). Thus the different salary values can optically not clearely be compared against each other.

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

Edward Tufte states the principle that "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented" [Tufte, 1991]

This principle is definitly violated in the provided graphic because of the following facts:

* The provided original graphic heavily uses changes in the continuity of the time scale. While in the beginning of the time scale jumps of up to 8-9 years occur between two salary values, the last five salary values differ only by 1 year anymore.

* As seen in the redesigned graphic using a linear time-scale the original graphic uses the Lie Factor to hide the fact that the distributions of the salaries are exponential not nearly linear as the viewer guesses by looking at the original graphic.

* By changing the time scale multiple times within the same diagram, the viewer is confused and is potentially not able to directly discover the lie.

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

Edward Tufte comments the principle of Chart Junk as follows: "The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new." [Tufte, 1991]

The provided graphic does contain a lot of ink not telling the viewer anything new:

* The embedded stilistic pictures of doctors and other professionals are really unnecessary Chart Junk.

* The time scale is labeled with full year marks. This can be reduced to only using the last two digits as the first two ones don't change over the whole time-scale.

* The black background of the technical workers data series is making it more difficult for the viewer to recognize the presented information.

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

* A lot of color is used just for separating the two data series from each other.

* As mentioned above, the stilistic pictures of doctors and other professionals add a high amount of ink to the diagram which do not contain much additional information.

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

* The use of few colors for clearly separating the different data series within the same diagram makes sense. The provided graphic uses black and white for the two data series which results in a graphic with high contrast. The drawback of this approach is that the viewer is distracted from recognizing the main content information to the contrast spots which do not contain the real information.

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

Donny Truong describes the Aesthetic-Usability Effect as follows: "Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design." [Truong, 2005]

The following comments on the provided graphic affect this effect:

* The heavy use of Chart Junk and the high Lie Factor lead to a diagram with a low usability.

* By using only black & white as "colors", the recognition of the information content is complicated for the viewer and directly degrades the aestetic approach of the graphic.

== Improvements ==

* A linear time scale was used to provide a clear basis for understanding the information content of the diagram to the viewer.

* Through the use of a linear time scale the non-linear but exponential growth of the salaries were presented to the viewer.

* Usage of a line chart leads to a better visualisation of the higher growth of doctors salary.

* Removal of the Chart Junk (mainly the pictures of doctors and other professionals and 4-digit years) which results in a better data-ink-ratio.

* Improval of the Aesthetic-Usability Effect due to usage of two easily distinguishable colors.

== Redesigned Graphic ==
[[Image:Diagramm 04.png|none|thumb|780px|none|Redesigned Graphic]]

= Resources =

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

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

[Truong, 2005] Donny Truong, ''Universal Principles of design''. Access Date: 3. November 2005
http://www.visualgui.com/index.php?p=1

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

2005-11-16T12:28:18Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

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

2005-11-16T12:28:02Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

The first step in the process of creating a better version of the provided graphic was the detailed analysis of the graphic and its drawbacks considering the discussed design principles.

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

Through the very bad Data-Ink-Ratio and lot of Chart Junk the Preattentive Processing [Healey et al., 1996] is heavily affected:

* The embedded bodies/heads of doctors and other professionals distract the viewer's eyes from the main information. Thus it is hard for the first-time viewer to quickly understand the information content of the diagram.

* The descriptions of the both data samples (Office-based nonsalaried physicians versus Male professional technical and kindred workers) are not clearly placed in the graphics and cannot be preattentively associated to the data series.

* Especially the data series of the technical workers is not really presented by clear data bars because of the worker pictures on top using the same color as the bars (both black). Thus the different salary values can optically not clearely be compared against each other.

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

Edward Tufte states the principle that "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented" [Tufte, 1991]

This principle is definitly violated in the provided graphic because of the following facts:

* The provided original graphic heavily uses changes in the continuity of the time scale. While in the beginning of the time scale jumps of up to 8-9 years occur between two salary values, the last five salary values differ only by 1 year anymore.

* As seen in the redesigned graphic using a linear time-scale the original graphic uses the Lie Factor to hide the fact that the distributions of the salaries are exponential not nearly linear as the viewer guesses by looking at the original graphic.

* By changing the time scale multiple times within the same diagram, the viewer is confused and is potentially not able to directly discover the lie.

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

Edward Tufte comments the principle of Chart Junk as follows: "The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new." [Tufte, 1991]

The provided graphic does contain a lot of ink not telling the viewer anything new:

* The embedded stilistic pictures of doctors and other professionals are really unnecessary Chart Junk.

* The time scale is labeled with full year marks. This can be reduced to only using the last two digits as the first two ones don't change over the whole time-scale.

* The black background of the technical workers data series is making it more difficult for the viewer to recognize the presented information.

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

* A lot of color is used just for separating the two data series from each other.

* As mentioned above, the stilistic pictures of doctors and other professionals add a high amount of ink to the diagram which do not contain much additional information.

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

* The use of few colors for clearly separating the different data series within the same diagram makes sense. The provided graphic uses black and white for the two data series which results in a graphic with high contrast. The drawback of this approach is that the viewer is distracted from recognizing the main content information to the contrast spots which do not contain the real information.

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

Donny Truong describes the Aesthetic-Usability Effect as follows: "Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design." [Truong, 2005]

The following comments on the provided graphic affect this effect:

* The heavy use of Chart Junk and the high Lie Factor lead to a diagram with a low usability.

* By using only black & white as "colors", the recognition of the information content is complicated for the viewer and directly degrades the aestetic approach of the graphic.

== Improvements ==

* A linear time scale was used to provide a clear basis for understanding the information content of the diagram to the viewer.

* Through the use of a linear time scale the non-linear but exponential growth of the salaries were presented to the viewer.

* Usage of a line chart leads to a better visualisation of the higher growth of doctors salary.

* Removal of the Chart Junk (mainly the pictures of doctors and other professionals and 4-digit years) which results in a better data-ink-ratio.

* Improval of the Aesthetic-Usability Effect due to usage of two easily distinguishable colors.

== Redesigned Graphic ==
[[Image:Diagramm 04.png|none|thumb|600px|none|Redesigned Graphic]]

= Resources =

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

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

[Truong, 2005] Donny Truong, ''Universal Principles of design''. Access Date: 3. November 2005
http://www.visualgui.com/index.php?p=1

File:Diagramm 04.png

2005-11-16T12:27:22Z

UE-InfoVis0506 0025470: Last Version. Now all points refinded.

== Summary ==
Last Version. Now all points refinded.
== Copyright status ==

== Source ==

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

2005-11-16T10:05:10Z

UE-InfoVis0506 0025470: /* Improvements */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

The first step in the process of creating a better version of the provided graphic was the detailed analysis of the graphic and its drawbacks considering the discussed design principles.

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

Through the very bad Data-Ink-Ratio and lot of Chart Junk the Preattentive Processing [Healey et al., 1996] is heavily affected:

* The embedded bodies/heads of doctors and other professionals distract the viewer's eyes from the main information. Thus it is hard for the first-time viewer to quickly understand the information content of the diagram.

* The descriptions of the both data samples (Office-based nonsalaried physicians versus Male professional technical and kindred workers) are not clearly placed in the graphics and cannot be preattentively associated to the data series.

* Especially the data series of the technical workers is not really presented by clear data bars because of the worker pictures on top using the same color as the bars (both black). Thus the different salary values can optically not clearely be compared against each other.

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

Edward Tufte states the principle that "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented" [Tufte, 1991]

This principle is definitly violated in the provided graphic because of the following facts:

* The provided original graphic heavily uses changes in the continuity of the time scale. While in the beginning of the time scale jumps of up to 8-9 years occur between two salary values, the last five salary values differ only by 1 year anymore.

* As seen in the redesigned graphic using a linear time-scale the original graphic uses the Lie Factor to hide the fact that the distributions of the salaries are exponential not nearly linear as the viewer guesses by looking at the original graphic.

* By changing the time scale multiple times within the same diagram, the viewer is confused and is potentially not able to directly discover the lie.

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

Edward Tufte comments the principle of Chart Junk as follows: "The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new." [Tufte, 1991]

The provided graphic does contain a lot of ink not telling the viewer anything new:

* The embedded stilistic pictures of doctors and other professionals are really unnecessary Chart Junk.

* The time scale is labeled with full year marks. This can be reduced to only using the last two digits as the first two ones don't change over the whole time-scale.

* The black background of the technical workers data series is making it more difficult for the viewer to recognize the presented information.

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

* A lot of color is used just for separating the two data series from each other.

* As mentioned above, the stilistic pictures of doctors and other professionals add a high amount of ink to the diagram which do not contain much additional information.

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

* The use of few colors for clearly separating the different data series within the same diagram makes sense. The provided graphic uses black and white for the two data series which results in a graphic with high contrast. The drawback of this approach is that the viewer is distracted from recognizing the main content information to the contrast spots which do not contain the real information.

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

Donny Truong describes the Aesthetic-Usability Effect as follows: "Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design." [Truong, 2005]

The following comments on the provided graphic affect this effect:

* The heavy use of Chart Junk and the high Lie Factor lead to a diagram with a low usability.

* By using only black & white as "colors", the recognition of the information content is complicated for the viewer and directly degrades the aestetic approach of the graphic.

== Improvements ==

* A linear time scale was used to provide a clear basis for understanding the information content of the diagram to the viewer.

* Through the use of a linear time scale the non-linear but exponential growth of the salaries were presented to the viewer.

* Usage of a line chart leads to a better visualisation of the higher growth of doctors salary.

* Removal of the Chart Junk (mainly the pictures of doctors and other professionals and 4-digit years) which results in a better data-ink-ratio.

* Improval of the Aesthetic-Usability Effect due to usage of two easily distinguishable colors.

== Redesigned Graphic ==
[[Image:Diagramm 03.png|none|thumb|600px|none|Redesigned Graphic]]

= Resources =

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

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

[Truong, 2005] Donny Truong, ''Universal Principles of design''. Access Date: 3. November 2005
http://www.visualgui.com/index.php?p=1

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

2005-11-16T10:04:07Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

The first step in the process of creating a better version of the provided graphic was the detailed analysis of the graphic and its drawbacks considering the discussed design principles.

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

Through the very bad Data-Ink-Ratio and lot of Chart Junk the Preattentive Processing [Healey et al., 1996] is heavily affected:

* The embedded bodies/heads of doctors and other professionals distract the viewer's eyes from the main information. Thus it is hard for the first-time viewer to quickly understand the information content of the diagram.

* The descriptions of the both data samples (Office-based nonsalaried physicians versus Male professional technical and kindred workers) are not clearly placed in the graphics and cannot be preattentively associated to the data series.

* Especially the data series of the technical workers is not really presented by clear data bars because of the worker pictures on top using the same color as the bars (both black). Thus the different salary values can optically not clearely be compared against each other.

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

Edward Tufte states the principle that "The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the quantities represented" [Tufte, 1991]

This principle is definitly violated in the provided graphic because of the following facts:

* The provided original graphic heavily uses changes in the continuity of the time scale. While in the beginning of the time scale jumps of up to 8-9 years occur between two salary values, the last five salary values differ only by 1 year anymore.

* As seen in the redesigned graphic using a linear time-scale the original graphic uses the Lie Factor to hide the fact that the distributions of the salaries are exponential not nearly linear as the viewer guesses by looking at the original graphic.

* By changing the time scale multiple times within the same diagram, the viewer is confused and is potentially not able to directly discover the lie.

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

Edward Tufte comments the principle of Chart Junk as follows: "The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new." [Tufte, 1991]

The provided graphic does contain a lot of ink not telling the viewer anything new:

* The embedded stilistic pictures of doctors and other professionals are really unnecessary Chart Junk.

* The time scale is labeled with full year marks. This can be reduced to only using the last two digits as the first two ones don't change over the whole time-scale.

* The black background of the technical workers data series is making it more difficult for the viewer to recognize the presented information.

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

* A lot of color is used just for separating the two data series from each other.

* As mentioned above, the stilistic pictures of doctors and other professionals add a high amount of ink to the diagram which do not contain much additional information.

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

* The use of few colors for clearly separating the different data series within the same diagram makes sense. The provided graphic uses black and white for the two data series which results in a graphic with high contrast. The drawback of this approach is that the viewer is distracted from recognizing the main content information to the contrast spots which do not contain the real information.

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

Donny Truong describes the Aesthetic-Usability Effect as follows: "Aesthetic designs are perceived as easier to use than less-aesthetic designs. Aesthetic designs also foster positive relationships with people, making them more tolerant of problems with a design." [Truong, 2005]

The following comments on the provided graphic affect this effect:

* The heavy use of Chart Junk and the high Lie Factor lead to a diagram with a low usability.

* By using only black & white as "colors", the recognition of the information content is complicated for the viewer and directly degrades the aestetic approach of the graphic.

== Improvements ==

* A linear time scale was used to provide a clear basis for understanding the information content of the diagram to the viewer.

* Through the use of a linear time scale the non-linear but exponential growth of the salaries were presented to the viewer.

* Additional usage of a line chart leads to a better visualisation of the higher growth of doctors salary.

* Removal of the Chart Junk (mainly the pictures of doctors and other professionals and 4-digit years) which results in a better data-ink-ratio.

* Grouping of the legend into a single block for providing the viewer with better understandable and quicker recognizable data series association.

* Adding a y-axis scale on both sides for fast salary estimation within the diagram because of the high width of the new graphic.

* Improval of the Aesthetic-Usability Effect due to usage of two easily distinguishable colors.

== Redesigned Graphic ==
[[Image:Diagramm 03.png|none|thumb|600px|none|Redesigned Graphic]]

= Resources =

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

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

[Truong, 2005] Donny Truong, ''Universal Principles of design''. Access Date: 3. November 2005
http://www.visualgui.com/index.php?p=1

File:Diagramm 03.png

2005-11-16T10:01:23Z

UE-InfoVis0506 0025470: Refined graphics. Uses line diagramm and all other mistakes are repaired.

== Summary ==
Refined graphics. Uses line diagramm and all other mistakes are repaired.
== Copyright status ==

== Source ==

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

2005-11-15T16:51:50Z

UE-InfoVis0506 0025470: /* Which tasks should be solved? */

== Application Area and given Dataset ==

=== Application Area Analysis ===

=== Dataset Analysis ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

=== Are there any known / often used Methods / Visualisationtechniques? ===

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

Warum haben wir nur wenige Datensätze heraus genommen?

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===

=== Visual Mapping ===

=== Used Techniques / Applied Principles ===

=== Interaction ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:42:00Z

UE-InfoVis0506 0025470:

== Application Area and given Dataset ==

=== Application Area Analysis ===

=== Dataset Analysis ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Target Group Analysis ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

=== Are there any known / often used Methods / Visualisationtechniques? ===

== Purpose of the Visualisation ==

=== What should be achieved with the Visualisation? ===

=== Which tasks should be solved? ===

=== Questions that can be solved using this Visualisation ===

== Designproposal ==

=== Which kinds of Visualisation should be used? ===

=== Visual Mapping ===

=== Used Techniques / Applied Principles ===

=== Interaction ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:36:20Z

UE-InfoVis0506 0025470:

== Application Area and given Dataset ==

=== Application Area Analysis ===

=== Dataset Analysis ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Zielgruppenanalyse ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

=== Gibt es bekannte / oft verwendete Methoden / Visualisierungstechniken? ===

== Zweck der Visualisierung ==

=== Was soll mit der Visualisierung erreicht werden? ===

=== Welche Aufgaben sollen gelöst werden? ===

=== Fragen, die mit Hilfe der Visualisierung gelöst werden können ===

== Designvorschlag ==

=== Art(en) der Visualisierung ===

=== Visual Mapping ===

=== Verwendete Techniken / angewandte Prinzipien ===

=== Interaktionsmöglichkeiten ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:34:26Z

UE-InfoVis0506 0025470: /* Was sind die Besonderheiten der Zielgruppe? */

== Anwendungsgebiet und vorgegebener Datensatz ==

=== Anwendungsgebietsanalyse ===

=== Datensatzanalyse ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Zielgruppenanalyse ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== What are the special interests of our target group? ===

I think our target group is quite young, probably creative and I suppose they have some sort of interest in playing around with things a bit. As we are analysing iTunes the target group likes nice and neat design, cool tools, cool features and gimmicks. They should use the visualisation mainly for playing around with their music collection.

=== Gibt es bekannte / oft verwendete Methoden / Visualisierungstechniken? ===

== Zweck der Visualisierung ==

=== Was soll mit der Visualisierung erreicht werden? ===

=== Welche Aufgaben sollen gelöst werden? ===

=== Fragen, die mit Hilfe der Visualisierung gelöst werden können ===

== Designvorschlag ==

=== Art(en) der Visualisierung ===

=== Visual Mapping ===

=== Verwendete Techniken / angewandte Prinzipien ===

=== Interaktionsmöglichkeiten ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:30:23Z

UE-InfoVis0506 0025470: /* Für wen ist die Visualisierungstechnik gedacht? */

== Anwendungsgebiet und vorgegebener Datensatz ==

=== Anwendungsgebietsanalyse ===

=== Datensatzanalyse ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Zielgruppenanalyse ==

=== Who should use this visualation technique? ===

The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== Was sind die Besonderheiten der Zielgruppe? ===

=== Gibt es bekannte / oft verwendete Methoden / Visualisierungstechniken? ===

== Zweck der Visualisierung ==

=== Was soll mit der Visualisierung erreicht werden? ===

=== Welche Aufgaben sollen gelöst werden? ===

=== Fragen, die mit Hilfe der Visualisierung gelöst werden können ===

== Designvorschlag ==

=== Art(en) der Visualisierung ===

=== Visual Mapping ===

=== Verwendete Techniken / angewandte Prinzipien ===

=== Interaktionsmöglichkeiten ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:29:31Z

UE-InfoVis0506 0025470: /* Für wen ist die Visualisierungstechnik gedacht? */

== Anwendungsgebiet und vorgegebener Datensatz ==

=== Anwendungsgebietsanalyse ===

=== Datensatzanalyse ===

* Name:
* Artist:
* Composer:
* Album:
* Genre:
* Kind:
* Size:
* Total Time:
* Disc Number:
* Disc Count:
* Track Number:
* Track Count:
* Year:
* Date Modified:
* Date Added:
* Bit Rate:
* Sample Rate:
* Play Count:
* Play Date:
* Play Date UTC:
* Location:
* File Folder Count:
* Library Folder Count:

== Zielgruppenanalyse ==

=== Für wen ist die Visualisierungstechnik gedacht? ===

* The visualisation is mainly meant for people collecting mp3s or for musicians who like to see some nice information they won't find in the usual representations. Moreover it's for people who like to explore their music collection under different standpoints. This will fit the exploring character of information visualisation.

=== Was sind die Besonderheiten der Zielgruppe? ===

=== Gibt es bekannte / oft verwendete Methoden / Visualisierungstechniken? ===

== Zweck der Visualisierung ==

=== Was soll mit der Visualisierung erreicht werden? ===

=== Welche Aufgaben sollen gelöst werden? ===

=== Fragen, die mit Hilfe der Visualisierung gelöst werden können ===

== Designvorschlag ==

=== Art(en) der Visualisierung ===

=== Visual Mapping ===

=== Verwendete Techniken / angewandte Prinzipien ===

=== Interaktionsmöglichkeiten ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-15T15:04:21Z

UE-InfoVis0506 0025470: /* Datensatzanalyse */

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

2005-11-12T14:41:23Z

UE-InfoVis0506 0025470:

== Anwendungsgebiet und vorgegebener Datensatz ==

=== Anwendungsgebietsanalyse ===

=== Datensatzanalyse ===

== Zielgruppenanalyse ==

=== Für wen ist die Visualisierungstechnik gedacht? ===

=== Was sind die Besonderheiten der Zielgruppe? ===

=== Gibt es bekannte / oft verwendete Methoden / Visualisierungstechniken? ===

== Zweck der Visualisierung ==

=== Was soll mit der Visualisierung erreicht werden? ===

=== Welche Aufgaben sollen gelöst werden? ===

=== Fragen, die mit Hilfe der Visualisierung gelöst werden können ===

== Designvorschlag ==

=== Art(en) der Visualisierung ===

=== Visual Mapping ===

=== Verwendete Techniken / angewandte Prinzipien ===

=== Interaktionsmöglichkeiten ===

=== Mockup(s) / Fake Screenshot(s) ===

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

2005-11-12T14:41:18Z

UE-InfoVis0506 0025470:

* [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 3 - Design|Design]]
* [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 3 - Prototyp|Prototyp]]

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

2005-11-12T14:40:39Z

UE-InfoVis0506 0025470:

* [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufagbe 3 - Design|Design]]
* [[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufagbe 3 - Prototyp|Prototyp]]

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

2005-11-03T13:28:10Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==

* Lie Factor: non-linear time scale shows a linear growth of the salary, but it's exponential,
* Bad Data-Ink-Ratio: a lot of ink is used to differ the bars and for
* Chart Junk: pictures of the doctors and other professionals, year is always written with 4-digits,
* Bad aesthetic: graphic has a bad usability (difficult to read) because of chart-junk, lie-factors and no use of colors.

== Improvements ==

* Used a linear time scale to show the exponential growth,
* Additional usage of a line chart to better visualize the higher growth of doctors salary,
* Removed the chart junk (pictures of doctors and other professionals, and 4-digit years) which results in a better data-ink-ratio,
* Grouped the legend into a single block,
* Added a y-axis scale on both sides, because of the high width of the new graphic,
* improved Aesthetic-Usability Effect due to usage of colors.

== Redesigned Graphic ==
[[Image:Diagramm 02.png|none|thumb|600px|none|Redesigned Graphic]]

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

2005-11-02T18:58:34Z

UE-InfoVis0506 0025470: /* Redesigned Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

== Drawbacks ==
* Changing scale of the time line in mid-axis to make exponential growth linear (from slides). This is called the ''Lie Factor''
* The ''Lie Factor'' also makes one believe that there's continuity in the data.
* Bad Data-Ink-Ratio
* It is not very aestetic
* Could have some more colors
* Quite a lot of ''Chart Junk'' can be found in the graphic. The pictures of the doctors and the pictures of the other working men for example.

----

* Lie Factor: non-linear time scale shows a linear growth of the salary, but it's exponential,
* Bad Data-Ink-Ratio: a lot of ink is used to differ the bars and for
* Chart Junk: pictures of the doctors and working men.

== Improvements ==
* Choose linear time scale without jumps
* Analyze distribution (linear, exponential?)
* Choose appropriate diagram type
* Make the design simpler, without making it less understandable.
* Make a scale on the left side.

----

* Used a linear time scale to show the exponential growth,
* Additional usage of a line chart to better visualize the higher growth of doctors salary,
* Removed the chart junk (pictures of doctors and working men),
* Grouped the legend into a single block

== Redesigned Graphic ==
[[Image:Diagramm 02.png|none|thumb|600px|none|First proposal for new Graphics]]

File:Diagramm 02.png

2005-11-02T18:58:09Z

UE-InfoVis0506 0025470: Income of Doctors vs. Other Workers. Better Version

== Summary ==
Income of Doctors vs. Other Workers. Better Version
== Copyright status ==

== Source ==

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

2005-11-01T23:33:47Z

UE-InfoVis0506 0025470:

Hi,

its generally non of my business (and I dont want to meddle in your affairs) but there are some suggestions I would make for your graphic to enhance it even more (very impressive work so far):

The axis should not be marked in $1.000 at every mark. write 1, 2, ... and name the axis at the top [Thousand $]. The reapeating of the $ mark and the three zeros is considered to be chart junk (more or less), but regardless to the discussable definition, the <b>repeating</b> does not carry information.

Maybe you want to discuss this suggestion and decide about it since I am not a "professional" information visualist.

Regards, Stefan

----

No, your totally right, I wasn't considering all that stuff, but it's no problem, I'll change it. If there are any other suggestions, just tell me.

Peter

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

2005-11-01T23:32:45Z

UE-InfoVis0506 0025470:

Hi,

its generally non of my business (and I dont want to meddle in your affairs) but there are some suggestions I would make for your graphic to enhance it even more (very impressive work so far):

The axis should not be marked in $1.000 at every mark. write 1, 2, ... and name the axis at the top [Thousand $]. The reapeating of the $ mark and the three zeros is considered to be chart junk (more or less), but regardless to the discussable definition, the <b>repeating</b> does not carry information.

Maybe you want to discuss this suggestion and decide about it since I am not a "professional" information visualist.

Regards, Stefan

No, your totally right, I wasn't considering all that stuff, but it's no problem, I'll change it. If there are any other suggestions, just tell me.

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

2005-10-29T14:55:16Z

UE-InfoVis0506 0025470: /* Good Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

Problems:
* Changing scale of the time line in mid-axis to make exponential growth linear (from slides). This is called the ''Lie Factor''
* The ''Lie Factor'' also makes one believe that there's continuity in the data.
* Bad Data-Ink-Ratio
* It is not very aestetic
* Could have some more colors
* Quite a lot of ''Chart Junk'' can be found in the graphic. The pictures of the doctors and the pictures of the other working men for example.

Proposals for new graphic:
* Choose linear time scale without jumps
* Analyze distribution (linear, exponential?)
* Choose appropriate diagram type
* Make the design simpler, without making it less understandable.
* Make a scale on the left side.

== Good Graphic ==
[[Image:Diagramm 01.png|none|thumb|600px|none|First proposal for new Graphics]]

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

2005-10-29T14:54:44Z

UE-InfoVis0506 0025470: /* Good Graphic */

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

2005-10-29T14:54:25Z

UE-InfoVis0506 0025470: /* Good Graphic */

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

2005-10-29T14:52:40Z

UE-InfoVis0506 0025470: /* Good Graphic */

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

2005-10-29T14:52:29Z

UE-InfoVis0506 0025470: /* Good Graphic */

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

2005-10-29T14:52:16Z

UE-InfoVis0506 0025470: /* Good Graphic */

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

2005-10-29T14:52:02Z

UE-InfoVis0506 0025470: /* Poor Graphic */

File:Diagramm 01.png

2005-10-29T14:50:02Z

UE-InfoVis0506 0025470: Better Diagramm of Doctors vs. other Professionals Income.

== Summary ==
Better Diagramm of Doctors vs. other Professionals Income.
== Copyright status ==

== Source ==
Peter Minarik

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

2005-10-29T08:39:18Z

UE-InfoVis0506 0025470: /* Poor Graphic */

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

2005-10-28T17:34:13Z

UE-InfoVis0506 0025470: /* Poor Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

Problems:
* Changing scale of the time line in mid-axis to make exponential growth linear (from slides). This is called the ''Lie Factor''
* Bad Data-Ink-Ratio
* It is not very aestetic
* Could have some more colors
* Quite a lot of ''Chart Junk'' can be found in the graphic. The pictures of the doctors and the pictures of the other working men for example.

Proposals for new graphic:
* Choose linear time scale without jumps
* Analyze distribution (linear, exponential?)
* Choose appropriate diagram type
* Make the design simpler, without making it less understandable.

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

2005-10-28T17:29:05Z

UE-InfoVis0506 0025470: /* Poor Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

Problems:
* Changing scale of the time line in mid-axis to make exponential growth linear (from slides). This is called the ''Lie Factor''
* Bad Data-Ink-Ratio
* It is not very aestetic
* Quite a lot of ''Chart Junk'' can be found in the graphic. The pictures of the doctors and the pictures of the other working men for example.

Proposals for new graphic:
* Choose linear time scale without jumps
* Analyze distribution (linear, exponential?)
* Choose appropriate diagram type
* Make the design simpler, without making it less understandable.

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

2005-10-28T16:56:26Z

UE-InfoVis0506 0025470: /* Poor Graphic */

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

2005-10-28T16:53:04Z

UE-InfoVis0506 0025470: /* Poor Graphic */

== Poor Graphic ==
[[Image:Friendly02doctors.gif|none|thumb|413px|Incomes of Doctors Vs. Other Professionals]]

Problems:
* Changing scale of the time line in mid-axis to make exponential growth linear (from slides)
* Bad Data-Ink-Ratio
* It is not very aestetic

Proposals for new graphic:
* Choose linear time scale without jumps
* Analyze distribution (linear, exponential?)
* Choose appropriate diagram type

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Grid Based Layout

2005-10-24T11:50:41Z

UE-InfoVis0506 0025470: /* Examples */

== Definitions ==

* ''As in mathematics, the ''Layout-Grid'' can be definded as a set of regular lines, crossing eachother and therefore buildung a set of regular, consistent fields.'' Freely translated from the Original German by [Shea and Holzschlag, 2005], [1]

== Origin and Problems of Grid Based Layout ==

''Grid Based Layout'' is not a new design principle. This section describes the history of this layout and addresses the problems it has, beeing transported to other than print media.

=== History ===

''Grid Based Layout'' has it's roots in the printmedia. If you look into any newspaper or magazine you will find a very good example of a ''Grid Based Layout''. Historically seen this Layout exists since the designs of Mondrian and Le Corbusier in the 1920s to 1940s. The Layout was then adopted in Switzerland after the World War II and spread throughout the whole world in the 1950s and 1960s. Today ''Grid Based Layout'' is ubiquitous in commercial publications and a lot of Software was developed to support this technique. For example [http://http://www.quark.com/ QuarkXPress] as the print industry standard, but also [http://www.adobe.com/products/pagemaker/main.html Adobe Page Maker] and [http://office.microsoft.com/en-us/FX010857941033.aspx Microsoft Publisher], which are more commonly used for desktop publishing. [Charles Jacobs et al., 2003]

=== Other Media ===

When trying to transport the ''Grid Based Layout'' to new media, like the internet with it's homepages, the main problem is, that the designer can not take the fixed layout from the print media, because he has to deal with different resolutions. So he generally has the choice between the nice formatted version of the article - which is formatted for one specific page size - on the one hand, and a verison that flows much better on the screen, but for which all of the beautiful ''Grid Based Layout'' is lost. [Charles Jacobs et al., 2003]

== Examples ==

[[Image:Cover-fall-2003-lg.gif|none|thumb|150px]]

== Bibliography ==

:[Shea and Holzschlag, 2005] Dave Shea, Molly E. Holzschlag. ''Zen und die Kunst des CSS-Designs''. Addison-Wesley, Munich, Germany, 2005. page 138.

:[Charles Jacobs et al., 2003] Charles Jacobs, Wilmot Lee, Evan Schrier, David Bargeron, David Salesin. Adaptive grid-based document layout. ''ACM Transactions on Graphics (TOG)'', Volume 22 , Issue 3, Special issue: Proceedings of ACM SIGGRAPH 2003:838 - 847, July 2003

== Footnotes ==

[1] {{Quotation| Wie in der Mathematik handelt es sich bei einem Layoutraster einfach um eine Reihe gleichmäßig verteilter, sich kreuzender Linien, die eine Reihe von logischen, entsprechend konsistenten Feldern bilden. | Shea and Holzman, 2005}}

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Grid Based Layout

2005-10-24T11:49:55Z

UE-InfoVis0506 0025470: /* Examples */

== Definitions ==

* ''As in mathematics, the ''Layout-Grid'' can be definded as a set of regular lines, crossing eachother and therefore buildung a set of regular, consistent fields.'' Freely translated from the Original German by [Shea and Holzschlag, 2005], [1]

== Origin and Problems of Grid Based Layout ==

''Grid Based Layout'' is not a new design principle. This section describes the history of this layout and addresses the problems it has, beeing transported to other than print media.

=== History ===

''Grid Based Layout'' has it's roots in the printmedia. If you look into any newspaper or magazine you will find a very good example of a ''Grid Based Layout''. Historically seen this Layout exists since the designs of Mondrian and Le Corbusier in the 1920s to 1940s. The Layout was then adopted in Switzerland after the World War II and spread throughout the whole world in the 1950s and 1960s. Today ''Grid Based Layout'' is ubiquitous in commercial publications and a lot of Software was developed to support this technique. For example [http://http://www.quark.com/ QuarkXPress] as the print industry standard, but also [http://www.adobe.com/products/pagemaker/main.html Adobe Page Maker] and [http://office.microsoft.com/en-us/FX010857941033.aspx Microsoft Publisher], which are more commonly used for desktop publishing. [Charles Jacobs et al., 2003]

=== Other Media ===

When trying to transport the ''Grid Based Layout'' to new media, like the internet with it's homepages, the main problem is, that the designer can not take the fixed layout from the print media, because he has to deal with different resolutions. So he generally has the choice between the nice formatted version of the article - which is formatted for one specific page size - on the one hand, and a verison that flows much better on the screen, but for which all of the beautiful ''Grid Based Layout'' is lost. [Charles Jacobs et al., 2003]

== Examples ==

[[Image:Cover-fall-2003-lg.gif|thumb|150px]]

== Bibliography ==

:[Shea and Holzschlag, 2005] Dave Shea, Molly E. Holzschlag. ''Zen und die Kunst des CSS-Designs''. Addison-Wesley, Munich, Germany, 2005. page 138.

:[Charles Jacobs et al., 2003] Charles Jacobs, Wilmot Lee, Evan Schrier, David Bargeron, David Salesin. Adaptive grid-based document layout. ''ACM Transactions on Graphics (TOG)'', Volume 22 , Issue 3, Special issue: Proceedings of ACM SIGGRAPH 2003:838 - 847, July 2003

== Footnotes ==

[1] {{Quotation| Wie in der Mathematik handelt es sich bei einem Layoutraster einfach um eine Reihe gleichmäßig verteilter, sich kreuzender Linien, die eine Reihe von logischen, entsprechend konsistenten Feldern bilden. | Shea and Holzman, 2005}}