MS-freie Zone

Präsentationsfolien + Thesenpapier

Die Präsentation gibts — neben der Website als OperaShow — auch als PDF mit 1 Folie pro Seite bzw. PDF mit 4 Folien pro Seite zum Runterladen.

Das Thesenpapier gibbet auch.

OperaShow

Benutzer des Internetbrowsers Opera können sich die Webseite bequem als Präsentation anschauen (7.0beta2 hat aber Probleme): Einfach F11 drücken. Alle anderen müsen sich mit der normalen Webseite zufriedengeben, oder das Ding — am besten in Querformat — ausdrucken.

[valid XHTML 1.1] [valid CSS2] [Vim] [Opera]

Seite

Information Murals Stefan Huber & Reinhard Partmann

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Informationsvisualisierung

Worum es geht

Data visualization is about comprehension, not graphics. Think of it as a range of techniques that enable you to display abstract numerical data and statistics in graphical form.

BYTE-Magazin. [2]

Seite

Informationsvisualisierung

Information Murals

Mural (engl.) = Wandmalerei, Wandgemälde

Murals sind 2D-Repräsentationen von riesigen Datenräumen, die eine Gestalt Overview über ebendiesen Raum geben und nebenbei in einen einzigen Viewport passen sollen.

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Übersicht

  1. Motivation
  2. Beispiele
  3. Algorithmen
  4. Implementierung
  5. Limits, Beurteilung
  6. Ausblick, Philosophisches

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Motivation

Probleme

Zu viele Daten ⇒ Benutzer überfordert und verwirrt.

Seite

Motivation

Informationsräume

Seite

Motivation

Wunschträume

Seite

Motivation

Lösungsansätze

Seite

Motivation

Information Murals

Erfunden von John Stasko und Dean Jerding am GaTech.

Intensitäten und Farben, um Informationsverlust zu minimieren.

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Beispiele

[Schachbrett]
© Stefan Huber. Reduktionsvarianten.

S/W Bild reduzieren

Einfach: Pixel aus definierten Zeilen und Spalten 1:1 übernehmen; oder Overplotting.

Besser: Miteinbeziehen anderer Originalpunkte ⇒ Intensität oder Farbregenbogen

Seite

Beispiele

Execution Mural (1)

Theoretischer Einsatzbereich: Debugging, etwa im Bereich UI

Seite

Beispiele

Execution Mural (2)

[Execution Mural für den Mosaic Webbrowser]
© John Stasko. Message trace eines Mosaic browsers. Im Mural ganz unten: PostScript Dokument. [1]

Seite

Beispiele

Sonnenflecken (1)

Konventionelle Darstellung

[Verteilung von Sonnenflecken auf einem herkömmlichen Zeitdiagramm]
© NASA. Sonnenflecken gemittelt. [4]

Nur Mittelwerte pro Zeiteinheit (hier Jahre).

Grafik antialiased ⇒ Graustufen sagen nichts aus!

Seite

Beispiele

Sonnenflecken (2)

[Verteilung von Sonnenflecken als Mural]
© John Stasko. Muralviewer für Sonnenflecken. Interessant: Weiße Pixel bei 0 Messungen. [1]

Mural

Jeder Pixel = ein Messwert (täglich)

Farbskala:
dunkel = wenig Flecken
weiß = viele Flecken.

Seite

Beispiele

Geographische Daten (1)

[USA Volkszählungsdaten]
© John Stasko. Volkszählung 1990. [1]

Volkszählungsdaten

USA eingeteilt in Zählungsquadrate.

Seite

Beispiele

Geographische Daten (2)

[Realaufnahme der Erde bei Nacht]
Realmural nach: www.redrat.net/blackhole/earthlights.htm

"Realmural"?

Seite

Beispiele

Textstruktur und Textsuche (1)

Bell Labratories: SeeSoft.
Visualisieren von Textdokumenten.

Farben mit definierten Bedeutungen:

Problem: Jede Pixelzeile entsprach einer Textzeile ⇒ kein Gesamtüberblick.

Seite

Beispiele

Textstruktur und Textsuche (2)

SeeSoft - Grafik [3]

[SeeSoft: Schematische Darstellung]
SeeSoft-Screenshot. Man beachte das app.old.

Seite

Beispiele

Textstruktur und Textsuche (3)

[Mural als Hintergrund für Navigationselement]
© John Stasko. Muraleditor für ein LaTeX Dokument. [1]

Seite

Beispiele

Textstruktur und Textsuche (4)

Suche nach Substrings.

Im konventionellen Fall:

Seite

Beispiele

Textstruktur und Textsuche (5)

Suche nach Substrings.

Murals bieten sofort Überblick über Verteilung der Fundstellen.

[Textsuche1] [Textsuche2] [Textsuche3]
© John Stasko. Suche nach
Stichwörtern in drei Dokumenten. [1]

Suche nach verschiedenen Stichwörtern.

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Algorithmen

Allgemeines

  1. Erste Algorithmen für zeitorientierte Daten
  2. Optimierungen (Performance)
  3. Unterstützung für Graustufen und Farben hinzugefügt

Funktionsweise

NxM Bild in XxY einpassen, wobei X << N und Y << M

Datenstruktur

Datenstruktur: Mural + Originaldaten

Seite

Algorithmen

[Konzept des Algorithmus]
© John Stasko. Schema des Algorithmus. [1]

Ursprünglicher Algorithmus (1)

Gewichtetes Area Sampling mit überlappenden Gewichtsfunktionen.

Originalpixel trägt proportional zu umgebenden Muralpixeln bei.

Seite

Algorithmen

Ursprünglicher Algorithmus (2)

Prinzip

  1. Punkt transformieren
  2. Enheitsquadrat zu benachbarten 4 Pixeln
  3. Intensität jedes Pixels gemäß der gegenüberliegenden Fläche erhöhen
  4. Intensität normieren

Seite

Algorithmen

Ursprünglicher Algorithmus (3)

  1. mural_array[x][y] auf 0 setzen
  2. für jeden Punkt (m, n) des Originalbildes:
    1. Berechne: x = m/M * X und y = n/N * Y
    2. Fläche der Quadranten berechnen
      (definiert durch (x, y)) und dem Einheitsquadrat: (f(x), f(y)), (f(x), c(y), (c(x), c(y)) und (c(x), f(y))
    3. Fläche zum diagonal gegenüberliegenden Eckpunkt (=Bildpunkt) addieren
    4. ggf. max_mural_array_value erhöhen
  3. Für alle (x, y) in mural_array
    1. Wert aus mural_array[x,y] → Grauwert
    2. Pixel zeichnen

Seite

Algorithmen

Ursprünglicher Algorithmus (4)

Bewertung

Implizites Antialiasing durch die Gewichtsfunktion.

Bei photorealistischen Bildern ist Antialiasing angenehm, Murals brauchen das aber nicht ⇒ Gewichtsfunktion eliminieren.

Das Resultat ist ein effizienterer Algorithmus!

Seite

Algorithmen

Effizienter Algorithmus (1)

Prinzip

Gewichtsfunktion eliminiert ⇒ "schärferes" Bild.

Diesmal: Ein Boxfilter mit Ausmaßen M/X x N/Y.

[Boxfilter: schematische Darstellung]
© Reinhard Partmann. Schema eines Boxfilters.

Intensität wiederum ein normierter Wert.

Seite

Algorithmen

Effizienter Algorithmus (2)

  1. mural_array[x][y] auf 0 setzen
  2. für jeden Punkt (m, n) des Originalbildes:
    1. Berechne: x = m/M * X und y = n/N * Y
    2. 1.0 zu mural_array[f(x)][f(y)] addieren
    3. ggf. max_mural_array_value erhöhen
  3. Für alle (x, y) in mural_array
    1. Wert aus mural_array[x,y] → Grauwert
    2. Pixel zeichnen

Seite

Algorithmen

Farbbehandlung (1)

Bisher nur Graustufenbilder.

Farben machen Probleme.

Problem: Verschiedene Farben werden auf einen Muralpixel abgebildet.

Lösungsvorschläge?

Seite

Algorithmen

Farbbehandlung (2)

Eine Möglichkeit: RGB mixen.

Nicht schlau, weil der Originalzustand dennoch verschleiert oder verzerrt wird. (Gelb = Rot & Grün)

Kompromiss: Die am häufigsten auf einen Pixel abgebildete Farbe gewinnt.

Aber wie organisiert man das am besten?

Seite

Algorithmen

Farbbehandlung (3)

Zwei Ansätze:

  1. Intensität jeder Farbe merken:
    Für jede Farbe ein Wert (ansonsten wieder RGB mischen).
    Welchen maximalen Intensitätswert nehmen?
  2. Farblistenverwaltung:
    Wie viele Punkte einer Farbe bilden auf denselben Muralpixel ab?

Seite

Algorithmen

Farbbehandlung (4)

Farbliste[.xpm Datei im Vim. Demostration von Farblisten]

Einfaches Ändern möglich; effizient beim Umgang mit mit vielen Farben.

mural_array neu

[modifiziertes
  mural_array mit Farbliste]
© Reinhard Partmann. Farbliste. Oben: Screenshot gVim mit .xpm Grafikdatei.

Seite

Algorithmen

Farbbehandlung (5)

Ohne Gewichtsfunktion: jeder Punkt mit Intensität 1.0.

Mit Gewichtsfunktion müsste man Intensitätswert mitführen
Dennoch verliert man die Information, welche Farbe welchen Teil der Intensität beigetragen hat.

5 blaue mit 0.1 und 1 roter mit 0.8 ⇒ 1 blauer mit 1.3

Seite

Algorithmen

Farbbehandlung (6)

Schlussfolgerungen

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Implementierung

[Sonnenfleckenmural mit Zoomfunktion und als Navigationswidget]
© John Stasko. Muralviewer: eigenständige Anwendung. [1]

Einsatz

Stasko und Jerding haben Murals als Navigations- und Zoomwidgets konzipiert.

Zusätzlich eine Klasse als Zeichenfläche für die Originaldaten.

Seite

Implementierung

Umgebung

Vz ist tot. Bell Labs führt sie nicht mehr auf ihrer Homepage.

Seite

Implementierung

Funktion

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Limits

Intensitäten

Differenzierung von Intensitäten fällt dem Menschen schwer. [5]

[Einstein is watching you. Is Einstein watching you?] Dithering ist besser geeignet.

Dithern ist nicht möglich, da jeder Pixel ausgenutzt werden soll.

Seite

Limits

Farben

Farbe wird mit Klasseneinteilung assoziiert
(Parteien bei der Wahl, ...)

Kontinuierliche Werte unangenehm, wie zB beim Muralviewer zu sehen ist.

Murals: Farben für "Klassen"
(LaTeX \section udgl.: Muraleditor)

Benachbarte Farben stören sich gegenseitig.

Seite

Limits

Datenstrukturierung

Murals für abstrakte, aber strukturierte Daten.

Zufällige Daten → graue Nebelwolke:

[Wolke]

...würde in etwa so aussehen:
[Muralwolke]

Logisch denn: Mural soll ja Struktur darstellen.

Seite

Limits

Performance

Zur Zeit der Entstehung (1995!) Probleme mit der Performance.

Beim Zoomen oder Scrollen muss das gesamte Quellobject untersucht und angezeigt werden.

Selbst optimierte Algorithmen waren manchmal zu langam.

Heute hätte ein Mural wohl keine Probleme mehr damit.

Seite

EinleitungÜbersichtMotivationBeispieleAlgorithmenImplementierungLimitsAusblick

Zusammenfassung und Ausblick

Erfassungsmethoden

Geeignete Methode zum Transformieren eines Informationsraumes in ein Farbbild notwendig

Seite

Zusammenfassung und Ausblick

Aufgaben


Plaisant: Dense global views provide experts with direct access to details that would otherwise require several zooming operations (even if these global views appear unreadable to others!) [6]

Seite

Zusammenfassung und Ausblick

Mural (1)

Schlussfolgerung der Autoren: Information Murals hauptächlich als Browsing- und Navigierhilfe sinnvoll.

Voraussetzung: Gute Datenbasis

Seite

Zusammenfassung und Ausblick

Mural (2)

HCI

Gesichtspunkte nach Human-Computer Interaction

Seite

Zusammenfassung und Ausblick

Ähnliche Techniken

Seite

Zusammenfassung und Ausblick

Diskussionspunkte

Seite

Zusammenfassung und Ausblick

Prof.John T.Stasko in einem Mail an uns:

Dean just created some simple applications for us to use in the work, and we never pushed it any further. I often think about the one with the source code in the scrollbar and wished I had something like it!

Danke fürs Zuhören!

Seite

Literaturhinweise

  1. The Information Mural. Dean F. Jerding and John Stasko. März 1996.
    http://www.cc.gatech.edu/gvu/softviz/infoviz/information_mural.html
  2. State of the Art. BYTE. April 1993. p120-147
  3. Visual Insights™, Data Visualization Solutions. Bell Labs.
    http://www.bell-labs.com/project/visualinsights/brochure/Oindex.html
  4. The Sunspot Cycle. NASA Science Directorate.
    http://science.nasa.gov/ssl/pad/solar/sunspots.htm
  5. Psychische und Physiologische Aspekte der Visualisierung. Christian Ziegler u. Michael Marty.
    http://www.mysunrise.ch/users/martymichael/visu/content.htm
  6. Image-Browser Taxonomy and Guidelines for Designers. C. Plaisant, D. Carr, and B. Shneiderman. IEEE Software, vol. 12, no. 2, pp. 21-32, Mar. 1995.