Teaching:TUW - UE InfoVis WS 2009/10 - Gruppe 15 - Aufgabe 4: Difference between revisions

From InfoVis:Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 82: Line 82:


Used visualisation techniques:
Used visualisation techniques:
     * horizontal family tree - To give a compact overview without giving the user an information overflow. It is the starting visualization from which the user can access all the information he wants.
     * vertical family tree - To give a compact overview without giving the user an information overflow. It is the starting visualization from which the user can access all the information he wants.
     * current mood indicator - This indicator helps the user to see the current mood of a character without wasting any space, because the portrait is shown anyways.
     * current mood indicator - This indicator helps the user to see the current mood of a character without wasting any space, because the portrait is shown anyways.
     * line graph for life span mood - used to give a quickly readable view over the mood per year dependency.
     * line graph for life span mood - used to give a quickly readable view over the mood per year dependency.
Line 94: Line 94:
           * Field selection of two subtrees for comparison
           * Field selection of two subtrees for comparison
           * There is a live-search possibillity to filter facts about the characters. With this option, its possible to filter e.g. all characters that spent time in prison or all characters called Maulwurf.
           * There is a live-search possibillity to filter facts about the characters. With this option, its possible to filter e.g. all characters that spent time in prison or all characters called Maulwurf.
           * The vertical family tree contains a lifespan with import events, ordered by their duration.  
           * The horizontal family tree contains a lifespan with import events, ordered by their starting date. Mouseover for displaying details about this event.


===Mock ups===
===Mock ups===
Line 109: Line 110:
<br>personal information (example Bart Simpsons)
<br>personal information (example Bart Simpsons)
<br>This view shows detailed information about a selected character, it gives information about birth, death, important events, mood over lifespan. The next 2 tabs show important events in education and work. The last tab is for the comparison of two characters. By dragging a character and dropping it on another one, the last tab opens up to show a comparison of these two.
<br>This view shows detailed information about a selected character, it gives information about birth, death, important events, mood over lifespan. The next 2 tabs show important events in education and work. The last tab is for the comparison of two characters. By dragging a character and dropping it on another one, the last tab opens up to show a comparison of these two.
<br>[[Image:vergleich.jpg|800px]]
<br>[[Image:Lifespan.jpg|800px]]
<br>Comparison of two sub family trees
<br>Comparison of two sub family trees<br>
<br> In the horizontal sub family tree there is a possibility to display detailed information displayed on the lifespan box as well as average information compared between the two subtrees.( not shown in the image)


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

Revision as of 15:00, 26 January 2010

Aufgabenstellung

Beschreibung der Aufgabe 4

Zu erstellende Visualisierung


  • Stammbaum der Nachkommen von Lisa und Bart Simpson*

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

Die Visualisierung soll folgende Informationen darstellen:

- Verwandtschaftsverhältnisse (zumindest Eltern-Kinder),

- Unterscheidung zwischen Blutsverwandtschaft und angeheirateten Familienmitgliedern,

- Geburts- und Todestag sowie Lebensdauer von allen Familienmitgliedern,

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

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

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

Allgemein:

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

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

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

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


Application area analysis

The topic deals with two family trees consisting of Bart and Lisa Simpson, which should be interactive.

Main features:

  • Family relations (Parents- child relationship, blood relationship, related by marriage)
  • At least three possible interactions

Required fields:

  • Family tree
  • Name
  • Date of birth/death
  • Lifespan
  • Important events
  • Mood
  • Comparison of two family trees
  • Comparison of two family members
  • Display of blood relationship


Data set description

  • Family Tree: Top down tree structure with Bart and Lisa as root
  • Name: Nominal data field
  • Date of birth/death: Ordinal data field
  • Lifespan: Discrete numerical data field
  • Important events: Nominal data field
  • Mood: Discrete ordinal data field

Target audience analysis

  • Designed for people admireing the Simpsons.
  • The target audience likes being informed about details like mood, important events, ...
  • They don't care about medical stuff, but they want to see piuctures of the Simpsons.

Purpose of the visualization

  • The main goal of the visualization is to sum up the most imoportant information about all Simpsons descendents.
  • Questsions to be solved:
 - Details should be possible to be displayed 
- Comparison of different members of the Simpsons

Content

Used visualisation techniques:

   * vertical family tree - To give a compact overview without giving the user an information overflow. It is the starting visualization from which the user can access all the information he wants.
   * current mood indicator - This indicator helps the user to see the current mood of a character without wasting any space, because the portrait is shown anyways.
   * line graph for life span mood - used to give a quickly readable view over the mood per year dependency.
   * The lifespan can be shown by pressing a button that changes the view of the family tree. In this lifespan-view, there is a legend that indicates the year and the boxes around the characters get longer the longer a charakter lives. This lifespan view is also used for comparison of sub trees. Because of the better readabillity, the graph is flipped by 90°, so the family tree is now a vertical tree.
   

Possible interactions:

         * Interaction between the user and the system
         * Double click on the character to see more detailed information
         * Mouseover for displaying the bloodline
         * Drag and drop one character to another for a detailed comparison 
         * Field selection of two subtrees for comparison
         * There is a live-search possibillity to filter facts about the characters. With this option, its possible to filter e.g. all characters that spent time in prison or all characters called Maulwurf.
         * The horizontal family tree contains a lifespan with import events, ordered by their starting date. Mouseover for displaying details about this event.

Mock ups



Family Tree of the Simpsons
This Visualization displays the complete Family Tree of the Simpsons, starting at Homer and Marge Simpson. On the left hand, there is the Sub-Tree of Bart Simpson and his descendents. On the right side, there is the Lisa Simpson-Subtree, and of course Maggie, who lacks of descendents.

Display of bloodrelated Simpsons
Same Family Tree like above, when the user moves the mouse over a familymember, it gets highlighted in yellow for being the "bloodlinehost", and every member of the family that is related by blood gets highlighted in red.

Moodindicator (example Bart Simpsons)
The Moodindicator shows the current mood of a family member. The expression of the face shown in the portrait gives feedback on how the character feels at the moment.

personal information (example Bart Simpsons)
This view shows detailed information about a selected character, it gives information about birth, death, important events, mood over lifespan. The next 2 tabs show important events in education and work. The last tab is for the comparison of two characters. By dragging a character and dropping it on another one, the last tab opens up to show a comparison of these two.

Comparison of two sub family trees

In the horizontal sub family tree there is a possibility to display detailed information displayed on the lifespan box as well as average information compared between the two subtrees.( not shown in the image)


Links