InfoVis:Wiki - User contributions [en]

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

2006-01-03T21:01:34Z

UE-InfoVis0506 0026754: /* Authors */

== PROJECT: Interpret - Analyzer ==

==Authors==

Anna Muster 0026030 935

Jürgen Puchta 9335259 532

Christian Rainer 0026754 535

Christoph Sölder 0026629 532

== Task description ==

The task was to design a visualization technique based on a known applicationarea. For a better demonstration we had to implement a prototype. But before we could start, we had to analyze the target group, think about interaction-possibilities and the datatypes as well as the datastructure.
Since we have chosen the MP3 Archive Visualization, our job was the creation of a clearly arranged visualization for a big music archive consisting of several thousand files. We wanted to achieve a better information representation of the MP3s. Our visualization should help the user to get an overview of his collection and his listening-habits. The user will get information about the tracks, in reference to a special artist, which he often listens to and to those which he has never heard before.
For example: in his database the user has got the band "Radiohead", who produced albums over 15 years and in this period they changed their music-style from alternative rock to experimental electronic. The visualization will show him from which producing period he has got more MP3s and which period he likes more, by counting the number of listenings of each song. The result could be that he has got more MP3s from their early years, but likes the experimental electronic tracks more.
Our target was to design a representation of the data that is expressive, precise and self-explanatory.

== Implementation description ==

When the user opens the "Interpret-Analyser" he will be prompted via a text-message in the main-window to click on an artist/band in the right upper window. The artists/bands are sorted alphabetically and the subject of interest can be found by scrolling the window vertically. If the user chose an artist/band in the upper right window, the main window will visualize him following details on the demanded item:

*The x-axis shows the songs listed vertically by-publication-year generated out of the ID3-Data
*The y-axis shows the number of songs published per year according to the specific number in the users' iTunes-library

The respective maximum on the y-axis will give a first overview on how many songs the specific library contains per artist/band per year. For each song (= one data point) one horizontal bar is drawn along the y-axis. That means for example if the library contains 34 songs by the band "Queen" with publication-year "1985", 34 bars are drawn at the x-axis value "1985" along the vertical y-axis.
In addition to that each bar drawn vertically has a specific colour, representing the date when he was last played. As it is shown in our Mock-Up below the range goes from blue (representing songs that have not been played for a long time) to red (representing songs that have been played recently).
Further on the user can interact and influence the characteristic of the visualization by using a slider positioned in the lower right in the graphic below. Via the slider a more objective image can be drawn according to the actual point of interest. This slider with a value-range from "0" to "10" represents the counts how often a song was played. It allows setting a threshold. The default value is "3" and means that songs that were played less than 3 times do not appear coloured, but as grey bars vertically above the coloured ones along the y-axis.

== Screenshots ==

[[Image:G4_Interpret-Analyser.jpg]]

When the user opens the "Interpret-Analyser" he will be prompted via a text-message in the main-window to click on an artist/band in the right upper window. The artists/bands are sorted alphabetically and the subject of interest can be found by scrolling the window vertically. If the user chose an artist/band in the upper right window, the main window will visualize him following details on the demanded item:

*The x-axis shows the songs listed vertically by-publication-year generated out of the ID3-Data
*The y-axis shows the number of songs published per year according to the specific number in the users' iTunes-library

The respective maximum on the y-axis will give a first overview on how many songs the specific library contains per artist/band per year. For each song (= one data point) one horizontal bar is drawn along the y-axis. That means for example if the library contains 34 songs by the band "Queen" with publication-year "1985", 34 bars are drawn at the x-axis value "1985" along the vertical y-axis.
In addition to that each bar drawn vertically has a specific colour, representing the date when he was last played. As it is shown in our Mock-Up below the range goes from blue (representing songs that have not been played for a long time) to red (representing songs that have been played recently).
Further on the user can interact and influence the characteristic of the visualization by using a slider positioned in the lower right in the graphic below. Via the slider a more objective image can be drawn according to the actual point of interest. This slider with a value-range from "0" to "10" represents the counts how often a song was played. It allows setting a threshold. The default value is "3" and means that songs that were played less than 3 times do not appear coloured, but as grey bars vertically above the coloured ones along the y-axis.

== Toolkits and/or Libraries ==

we did not use any libraries and toolkits

== Links ==

[http://www.infovis-wiki.net/index.php/Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G4 Infoviswiki: Project: Group G4]

[http://www.infovis-wiki.net/index.php?title=Teaching:TUW_-_UE_InfoVis_WS_2005/06_-_Gruppe_G4_-_Aufgabe_3_-_Prototype Infovis: Our Presentation]

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

2005-12-08T20:47:31Z

UE-InfoVis0506 0026754: /* Mockup / Fake Screenshot */

== Topic ==
'''MP3 Archive Visualization'''
== Specification of the Application Area and the given Dataset ==
=== Application area Analysis ===

Since we have chosen the MP3 Archive Visualization, our job will be the creation of a clearly arranged visualization for a big music archive consisting of several thousand files.

This can be achieved by using the already existing values of the container format ID3, additional attributes of the iTunes library, attributes of the music files themselves, as well as some system values.

Due the fact that these given sources already provide loads of different Information, we will try to create and present additional Information by combining some prior chosen values in a reasonable way.

Thus we have to keep in mind that ID3 for example theoretically indeed supports a huge amount of input values but in most cases only the most common values like Album, Interpret or Year are specified correctly.

Therefore we will only use some of these entries in our prototype.

=== Dataset Analysis ===

The values we will use in our project consist of nominal, discrete and ordinal data types and are for themselves all one-dimensional.

The table below shows a complete listing:

[[Image:tabelle_datentyp_g4.png]]

The complete data set is multi-dimensional and consists of all attributes listed above.

== Analysis of the Target User Group ==

=== Who should use this kind of visualization technique? ===

This visualization technique is mainly meant for the 'end-users', that is someone who collects lots of MP3s. With 'lots of MP3s' we mean quite a few GBs, just more than 30 GBs. Our visualization should help the user to get an overview of his collection and his listening-habits.
This visualization technique could also be interesting for the band and the music industry, if they want to produce a new album. for example: a band (like radiohead) who changed their musicstyle over the years and wants to know which style is preferd more. But therefor they have to compare these dates from many users.

=== What are the characteristics of the target group? ===

People of this group are music enthusiasts. They have thousands of mp3s on their harddisk and love it to collect them. Most of them have lost track of their collection, on the strength of the abundance of their collection. These people mainly receive their mp3s from the internet instead of buying CDs, because they like to see their whole musiccollection at a glance.

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

No, we don't know any similar visualization technique. ITunes only shows textbasedly how often a song was heard.

== Intended Purpose of our Visualization ==

=== What should be achieved with this visualization? ===
A better information representation of the MP3s should be achieved. Our visualization should help the user to get an overview of his collection and his listening-habits. He will get informations to the tracks, in reference to a special artist, which he often listens to and to those which he has never heard before. The representation of the data should be expressive, precise and self-explanatory.

=== Which tasks should be solved? ===
By using this visualization technique, the user will get informations to one chosen artist and whose discography. For example: in his database the user has got the band radiohead, who produced albums over 15 years and in this period they changed their musicstyle from alternative rock to experimental electronic. The visualization will show him from which producing period he has got more MP3s and which period he likes more, by counting the number of listenings of each song. The result could be that he has got more MP3s from their early years, but likes the experimental electronic tracks more.

=== Questions that should be solved with this visualization technique ===

== Proposal of Design ==

=== Types of Visualization applied ===

As there are no comparable features implemented in existing mp3 archival storage systems we decided to implement a visualization kit exploring the quantitative distribution of an mp3-archive according to the different genres. As a default the main window shows several genres the authors considered to be the right ones for music main-genres in the root directory including their percentage-rate corresponding to the whole file-archive.

By a single click on one of the main genres the user gets additional information in the upper right window on the one hand and of course a file-listing in the lower left window on the other hand. Double clicking a genre in the main window brings the user straight to a sub-level containing the corresponding sub-genres again shown in the main window. Through the path shown on top of the main window the system allows to easily jump back to wherever necessary out of every level.

Further on the user is able to read out file-specific information like Title, Interpret,
Album, Year, Duration & Bit-Rate through a click on the particular file listed below, but is also allowed to save a play-list from the files selected via the file-explorer.

Following feature turns the visualization kit into a rather complex and outstanding tool. By default the tool sorts the input data through a given hierarchy according to the main genres and alternatively to the sub-genres following the ID3-Tags. Additionally the User has the ability to change this system and to create his own view according to his point of interest. That means that he is able to change the main genres and the sub-genres as well. As there are always different views especially on the terms of sub-genres the user is even allowed to change the structure of the given categories. That means that one is permitted to extract an ambiguous sub-genre to directly attach it to another genre. This will be able via the right middle window showing the sub-genres and their actual belongings as well. Probably the system will give the possibility to cancel unmeant genres at all.

=== Visual Mapping ===

*Due to the enormous number of music-genres ID3-Tags provide we will probably choose a tree structure in addition to the text-based genre-navigator on the right in lower levels. This structure should be similar to a hyperbolic tree.

Dimension "Genre-Multitude" --> visual attribute "Tree Branches"

*To afford best visualization we are right now not sure whether we should display the percentage-rate in bars as shown in the fake-screenshot below, or should rather use a Bubble-Chart, where the size of the bubbles is determined by the values of occurrence per genre.

Dimension "File-Occurrence" --> visual attribute "Area"

=== Specification of used Techniques / applied Principles ===

*Hyperbolic Trees:
(s. slide 18, 19, 20 of Info_Vis4.pdf handed out in the course “188.305 VO Informationsvisualisierung”)

Due to the enormous number of music-genres ID-3 Tags provide we probably choose a tree structure
similar to a hyperbolic tree to visualize the raw data extracted from the corresponding mp3-archiv.

*Bubble Chart:
(s. similar to bubble-maps, slide 52 of Info_Vis4.pdf handed out in the course 188.305 VO Informationsvisualisierung, http://peltiertech.com/Excel/ChartsHowTo/HowToBubble.html)

Bubble chart, where the size of the bubbles is determined by the values of occurrence.

*Details on demand:
(s. slide 55 of Info_Vis4.pdf handed out in the course 188.305 VO Informationsvisualisierung)

Used several times. (File-Explorer, Genre-Information, ...)

*Linking & Brushing:
(s. slide 100 of Info_Vis0.pdf handed out in the course 188.305 VO Informationsvisualisierung)

Detail Windows containing percentage-distribution according to the specific genre

*Focus & Context: Tiled Multi-Level Browser
(slide 69 of Info_Vis0.pdf handed out in the course 188.305 VO Informationsvisualisierung)

Overview Window, Details on Demand Window

=== Possibilities of User-Interaction ===

* Assemble information about occurence-percentage per genre
* Assemble information according to ID3-Tags
* Group genres
* Build paths
* Build new tree
* Modify leaves
* Save play-list

=== Mockup / Fake Screenshot ===

[[Image:Interpret-Analyser.png]]

== References ==

[Wikipedia, 2005a] ID3, Wikipedia, Last updated: 21 November, 2005, Retrieved at: November 22, 2005, http://www.csam.montclair.edu/~mcdougal/SCP/D_types.htm

[Wikipedia, 2005b] MP3, Wikipedia, Last updated: 21 November, 2005, Retrieved at: November 22, 2005, http://en.wikipedia.org/wiki/Mp3

[Id3.org, 2004] ID3v2 frames, Id3.org, Last updated: 28. Februar, 2004, Retrieved at: November 22, 2005, http://www.id3.org/frames.html

[Montclaire, 2000] Data Types, Department of Science and Mathematics at Montclair State University, Last updated: 3. August, 2000, Retrieved at: November 22, 2005, http://www.csam.montclair.edu/~mcdougal/SCP/D_types.htm

File:Interpret-Analyser.png

2005-12-08T20:46:13Z

UE-InfoVis0506 0026754: Prototype of the Interpret-Analyser

== Summary ==
Prototype of the Interpret-Analyser
== Copyright status ==
free
== Source ==
Christian Rainer

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

2005-11-21T23:32:54Z

UE-InfoVis0506 0026754: /* Mockups / Fake Screenshots */

== Specification of the Application Area and the given Dataset ==
== Analysis of the Target User Group ==
== Intended Purpose of our Visualization ==
== Proposal of Design ==

=== Types of Visualization applied ===

=== Visual Mapping ===

=== Specification of used Techniques / applied Principles ===

=== Possibilities of User-Interaction ===

=== Mockups / Fake Screenshots ===
[[Image:MP3_Viewer.gif]]

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

2005-11-21T23:32:38Z

UE-InfoVis0506 0026754: /* Mockups / Fake Screenshots */

File:MP3 Viewer.gif

2005-11-21T23:27:09Z

UE-InfoVis0506 0026754: Preview for MP3_Viewer prototype

== Summary ==
Preview for MP3_Viewer prototype
== Copyright status ==
free
== Source ==
Christian Rainer

File:Slicer Dicer Var2.gif

2005-11-01T20:02:22Z

UE-InfoVis0506 0026754: Redesigned graph for exercise 2 - variant 2

== Summary ==
Redesigned graph for exercise 2 - variant 2
== Copyright status ==
free
== Source ==
Christian Rainer

File:Slicer Dicer Var1.gif

2005-11-01T19:57:14Z

UE-InfoVis0506 0026754: Redesigned graph for exercise 2 - variant 1

== Summary ==
Redesigned graph for exercise 2 - variant 1
== Copyright status ==
free
== Source ==
Christian Rainer

User:UE-InfoVis0506 0026754

2005-10-12T14:53:30Z

UE-InfoVis0506 0026754:

'''Nachname:''' Rainer
'''Vorname:''' Christian
'''Matrikelnummer:''' 0026754
'''Studienkennzahl:''' 535
'''Gruppe:''' G4
'''E-Mail:''' chris@crr.at

User:UE-InfoVis0506 0026754

2005-10-12T14:53:04Z

UE-InfoVis0506 0026754:

'''Nachname:''' Rainer
'''Vorname:''' Christian
'''Matrikelnummer:''' 0026754
'''Studienkennzahl:'''535
'''Gruppe:''' G4
'''E-Mail:''' chris@crr.at

User:UE-InfoVis0506 0026754

2005-10-12T14:52:39Z

UE-InfoVis0506 0026754:

'''Nachname:''' Rainer
'''Vorname:''' Christian
'''Matrikelnummer:'''
'''Studienkennzahl:'''
'''Gruppe:'''
'''E-Mail:'''

Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4

2005-10-12T14:50:14Z

UE-InfoVis0506 0026754: /* '''Gruppe G4''' */

== '''Gruppe G4''' ==

Die Gruppe G4 besteht bis jetzt aus den folgenden Mitgliedern: 
The following people are part of the G4 group by now:

* Muster, Anna
* [[User:UE-InfoVis0506_9335259|Puchta, Jürgen]]
* [[User:UE-InfoVis0506_0026754|Rainer, Christian]]
* [[User:UE-InfoVis0506_0026629|Sölder, Christoph]]

---- 
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 0|Aufgabe 0]] 
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 1|Aufgabe 1]] 
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 2|Aufgabe 2]] 
[[Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe G4 - Aufgabe 3|Aufgabe 3]]