Illustration 1: Beispiel für herkömmliche Baumdarstellung mit zusätzlichem Information-Overlay
Informationsvisualisierung SS 2008
Ulrich Binder |
0325848 / 932 | |
Thomas Pönitz
|
0425863 / 532 |
Überblick - Implementierung - Screenshots - Downloads
AdaptiviTree verändert die Form eines herkömmlichen Tournament-Trees, um so mehr Informationen darstellen zu können.
Die herkömmliche Bracket Visualisierung verwendet eine statische Repräsentation der Turnier-Struktur. Der Gewinner jedes Matches steigt in die nächste Runde auf und der Name der siegreichen Mannschaft wird auf die resultierende Linie zwischen den beiden Teams eingetragen. Dies wird solange fortgesetzt bis nur noch eine einzige Mannschaft übrig geblieben ist. Üblicherweise wird dieser Turnier-Baum in zwei Teile geteilt und dann um eine vertikale Achse gespiegelt dargestellt, um so den verfügbaren Platz besser auszunutzen.
Illustration 1: Beispiel für herkömmliche Baumdarstellung mit zusätzlichem Information-Overlay
Diese klassische Visualisierungsart wurde für die Verwendung von statischen Medien, wie z.B. Papier, entworfen. Sie sollte inkrementell erweiterbar sein, indem man zu einem späteren Zeitpunkt die Namen der Gewinner in den Baum einträgt.
Dieser Bracket-View hat allerdings einige unerwünschte Eigenschaften:
Der AdaptiviTree verändert seine Form, wenn neue Information hinzugefügt wird. Diese Eigenschaft macht ihn besonders gut geeignet für Turnier-Visualisierungen, da hier die Ergebnisse erst nach und nach eintreffen.
Die Ausgangsansicht in AdaptiviTree gleicht der eines herkömmlichen Tournament-Trees. Aber anstatt die Teamnamen innerhalb einer statischen Struktur zu wiederholen, werden die Resultatlinien, welche normalerweise mittig angelegt sind, zum Gewinner hin, nach oben bzw. unten, verschoben. Die Mannschaftsnamen erscheinen immer nur einmal und der Fortschritt eines Teams innerhalb des Turniers wird durch eine horizontale Linie dargestellt. Ein Beispiel:
Illustration 2: Beispiel aus dem Paper für Anpassung der Form des Baumes
Zuerst besiegt Wisconsin Texas, die strichlierte Linie wandert hinauf zum Sieger (Wisconsin) und wird kontinuierlich. Im nächsten Schritt gewinnt UNLV, dessen Linie sich ebenfalls verlängert. Im letzten Schritt gewinnt erneut Wisconsin, die horizontale Linie von UNLV endet, die von Wisconsin wird verlängert. Um die Visualisierung noch deutlicher zu machen, werden Linien, welche zu verlorenen Spielen gehören, sowie ausgeschiedene Teamnamen grau dargestellt. Noch ausstehende Matches werden durch strichlierte Linien symbolisiert.
Da die Information zu jeder Mannschaft immer horizontal, ausgehend vom Namen, dargestellt wird ist es relativ einfach Informationen zu überlagern. Eine interessante Art von Overlays ist eine Menge von Tipps und deren Korrektheit über dem eigentlichen Tree anzuzeigen. Ein Spieler kann zu jeder Mannschaft im Turnier einen Tipp abgeben, der angibt wie weit das Team im Turnier kommen wird.
Illustration 3: Beispiel aus Paper, Information-Overlay: Spieltipps
Die Tipps, sowie deren Korrektheit werden dann über den Tree gelegt, wobei die Länge einer „Pickline“ angibt, wie weit die Mannschaft im Turnier kommen wird. Die Tipps sind nach folgenden Regeln kodiert:
Es gibt mehrere Möglichkeiten wie der Benutzer mit dem Tree interagieren kann. Zum einen können durch Links und MouseOvers Informationen und Statistiken zu den einzelnen Mannschaften angezeigt werden. Zum anderen kann der User aber auch die einzelnen Tipps eintragen und manipulieren, wobei von einem leeren Tree ausgegangen wird, welcher lediglich die Namen der einzelnen Mannschaften enthält.
Die Implementierung der Visualisierung erfolgte in Java2D. Hauptgrund für diese Entscheidung war die Einfachheit der Implementierung zu gewährleisten. Es stehen Klassen für die graphische Darstellung von Linien, Kurven, Text und Symbolen (Bildern) zur Verfügung. Somit sind alle Anforderungen in Bezug auf graphische Wiedergabe erfüllt.
Um dem Benutzer Einfluss auf die Visualisierung zu ermöglichen, wurden folgende Interaktionsmöglichkeiten implementiert sein:
Der Zeitschieber dient dazu sich im zeitlichen Verlauf des Turniers vor und zurück zu bewegen. Dabei werden jeweils nur die entsprechenden Ergebnisse von Spielen die vor dem gewählten Zeitpunkt stattgefunden haben angezeigt.
Die Übergänge von einem Zeitpunkt zum anderen werden für den Benutzer fließend dargestellt.
Dies bedeutet konkret die Animation von:
Die Eingabe von Tipps erfolgt durch Links- bzw. Rechtsklicks auf den Namen eines Teilnehmers. Dabei erhöht bzw. erniedrigt man die Anzahl der gewonnenen Spiele. Die Tipps für die anderen Teilnehmer werden entsprechend angepasst.
Bewegt man die Maus auf den Namen eines Teilnehmers werden zum jeweiligen Teilnehmer Zusatzinformationem angezeigt.
Die interne Darstellung der Visualisierung erfolgt als binärer Baum, wobei es einen Startknoten für jeden Teilnehmer gibt. Diese entsprechen den Blättern des Baumes. Weiters gibt es Spielknoten. Diese besitzen jeweils zwei Vorgängerknoten (Start- oder Spielknoten) und einen Spiel- oder Finalknoten als Nachfolger. Der Finalknoten (Wurzel des Baumes) besitzt Vorgänger wie der Spielknoten jedoch keine Nachfolger. Die Spielergebnisse inklusive Zeitpunkt werden in den Spiel- sowie im Finalknoten gespeichert. Weiters wird für alle animierten Elemente ein Ist- und Sollzustand gespeichert, wobei der Istzustand über einen zeitlichen Verlauf an den Sollzustand angepasst wird um eine Animation zu erzeugen.
Um den AdaptiviTree zu zeichnen wird der Baum traversiert. Dabei werden die einzelnen Spiele der Reihe nach abgearbeitet und die Linien entsprechend eingezeichnet. Die prinzipielle graphische Darstellung des Baumes wird wie oben beschrieben umgesetzt. Alle benötigten Daten (Teilnehmer, Spiele, Ergebnisse) werden aus simplen Textdateien ausgelesen.
