• Anforderungen
• Clientsoftware vs. Web
  • Clientsoftware (Gephi)
  • Web
• Einsatz von modernen Webtechnologien
• Interaktion
• Export von Diagrammgrafiken
• Umsetzung / Implementierung
  • Datenstrukturen
    • Topics
    • Autoren
  • TopicVizz initialisieren
  • Graph (Topic-Abhängigkeiten)
  • Extensions
    • Topic-Histogramm
    • Author-Charts
    • Topic-Flow
• Verwendete Bibliotheken

• Statistischer Zusammenhang von Termen
• Zeitliche Entwicklung von Termen
• Beziehung der unterschiedlichen Terme zueinander
• Gewinnung von neuen Erkenntnissen
• Versteckte Informationen zeigen/veranschaulichen
• Spielerische Exploration

^top

^top

Pro

• Open Source
• Erweiterbarkeit durch Plugins (den eigenen Bedürfnissen anpassen)
• Plattformübergreifend (Java Runtime Environment vorausgesetzt)

Contra

• Clientsoftware muss für die Verwendung erst heruntergeladen werden
• Setzt Java 1.6 voraus (muss ggf. ebenfalls heruntergeladen werden)
• Ist eine Spezialsoftware; Handhabung kann schnell komplex werden

^top

Pro

• Ein moderner Browser ist für die Nutzung ausreichend
• Auslieferung der Webanwendung kann über einen (zentralen) Webserver geschehen, wodurch der Zugriff auf die Anwendung von mehreren Endgeräten aus möglich ist
• Plattformunabhängig (nur von Browser und HTTP-Server abhängig)

Contra

• Nicht alle Browserversionen unterstützten alle verwendeten Web-Technologien
  • Einbettung von SVG in HTML (SVG-Browsersupport)

^top

• SVG (in HTML eingebettet)
• Umsetzung der Visualisierung ist offen, da der Code und die Dokumentenstruktur offen sind
• Eingesetzte Techniken sind unter anderem vom W3C standardisiert -> zukunftssicher
• Trennung von Struktur, Logik und Gestaltung (HTML/SVG, JS, CSS)

^top

• Aufruf von Zusatzinformationen
• Darstellung anpassen (Panning, Skalierung, ...)

^top

• Eingebettetes SVG-Element kann ohne große Änderungen als XML-Dokument exportiert werden (.svg)
• Verkorgrafik -> verlustfreie Skalierung
• SVG-Dateien können geparst und ohne Verlust editiert/weiterverarbeitet werden (Inkscape, Adobe Illustrator, ...)

^top

^top

^top

• Topic-ID
• Topic-Name
• Abstract (Wikipedia/DBpedia)
• Liste von Dateinamen aller Vortragsdokumente, in denen das Topic gefunden wurde
• Liste von IDs aller Autoren, die das Topic erwähnt haben
• Liste von Verbindungen zu anderen Topics und die jeweilige Verbindungs- bzw. Kantengewichtung
• Häufigkeit der Erwähnungen pro Jahr (Nur Jahre mit mindestens einer Erwähnung werden berücksichtigt)

^top

• Autor-ID
• Autorname
• Liste mit den Dateinamen aller Vortragsdokumente, die vom Autor verfasst wurden
• Liste mit den IDs aller Topics, die vom Autor erwähnt wurden

^top

• Ist topicvizz.js eingebunden, steht das TopicVizz-Objekt global zur Verfügung
• Die Daten können entweder per Ajax bezogen und geparst (JSON) oder über den Script-Tag eingebunden werden (idealerweise innerhalb der Datendatei einer Variable zugewiesen)
• Die Initialisierungsfunktion wird von der index.html aus mit der Datenvariable (JS-Objekt) als Parameter aufgerufen

<script>
    $.getJSON('./data/example.json', function(data) {
        TopicVizz.init(data);
    });
</script>

<!-- ODER -->

<script src="./data/example.json" charset="utf-8"></script>
<script>
    /* Variable "data" muss innerhalb der example.js existieren
     *    und über die Felder "topics" und "authors" verfügen
     * Bsp.:
     * var data = {
     *    "topics": [...],
     *    "authors": [...]
     * };
     */
    TopicVizz.init(data);
</script>

^top

• Jeder Knoten (Node) entspricht einem Topic
• Größe und Farbe wird anhand der gesamten Anzahl an Erwähnungen bestimmt (frequency_per_year)
• Farbverlauf von Grün zu Rot; Grün -> selten erwähnt, Rot -> oft erwähnt
• Sind als SVG:Rect umgesetzt (Kanten zu 50% abgerundet)

• Knoten (Nodes) können mit einem Doppelklick vergrößert werden
• Vergrößerung durch D3.js-SVG-Transition
• Enthält Topic-Namen und aus Wikipedia/DBPedia extrahierten Abstract (zu großer Abstract-Text wird aufgeteilt und kann über einen kleinen Popup komplett angezeigt werden)
• Link ("+") zu den erweiterten Informationen eines Topics
• Die erweiterten Informationen befinden sich auf der "Rückseite" eines durch ein Doppelklick vergrößerten Knoten (Node) (durch D3.js-SVG-Transitionen verdeutlicht; Breitenminimierung bzw. -maximierung und leichte Vergrößerung)

• Darstellung eines Histogramms mit Zeitachse (Häufigkeitswert pro Jahr)
• Auflistung aller Autoren, die das Topic erwähnt haben (Klick auf den Autorennamen öffnet die Author-Charts-Extension mit dem sichtbaren Eintrag des angeklickten Autors)
• Auflistung aller Dokumente, in denen das Topic erwähnt wird (mit Verlinkung)
• Links zu den entsprechenden Wikipedia- / DBPedia-Einträgen
• Link ("-") zurück zur Hauptseite des vergrößerten Knoten

^top

• TopicVizz ist in seiner jetzigen Form durch Extensions erweiterbar
• Neue Extensions werden in der Sidebar (rechts) aufgelistet und können darüber aufgerufen/geschlossen werden (Overlays)
• Extensions müssen folgende Grundstruktur vorweisen, um von TopicVizz erfolgreich eingebunden werden zu können

(function($, window) {

    /* Informationen über die Extension */
    var ext_info = {
        name:       'extension_name', /* Muss eindeutig sein */
        shortname:  'extension_shortname',
        id:         'extension_id' /* ID für den DIV-Container (CSS) */
    };
    
    var is_open = false;
    
    var m_node              = null;
    var m_content_node      = null;
    var m_data              = null;
    var m_graph_data        = null;
    
    /* Von außen gegebene Funktionen,
     *    die jeweils am Ende eines bestimmten Vorgangs
     *    von der Extension aufgerufen werden sollten  */
    var m_callbacks = {
        onShow: $.noop,
        onHide: $.noop
    };
    
    
    var ext = {
        /* ### INFO ### */ 
        info: ext_info,
        
        /* ### EVAL_TOPIC ### - Wird für jedes Topic einaml aufgerufen,
         *    um ggf. intern einen Datenbestand zu bilden */
        eval_topic: function(topic) {
            // <-
        },
        
        /* ### INIT ### - Funktion die von TopicVizz zur
         *    Initialisierungsphase aufgerufen wird */
        init: function(node, data, graph_data, callbacks) {
            // <-
        },
        
        /* ### SHOW ### */
        show: function(node, data) {
            // <-
            
            m_callbacks.onShow();
        },
        
        /* ### HIDE ### - Funktion die bei jedem Verstecken aufgerufen
         *    wird (Overlaywechsel etc.) */
        hide: function(node, data) {
            // <-
            
            m_callbacks.onHide();
        },
        
        /* ### IS_OPEN ### */
        is_open: function() {
            return is_open;
        },
        
        /* Kontrollierten Zugriff auf Datenbestände innerhalb der Extension
         *    erlauben; von Extension zu Extension unterschiedlich */
        actions: {
            get_data: function() { /* ... */},
            /* ... */
        }
    };

    /* Prüfen ob TopicVizz eingebunden ist und die Extension
     *    hinzugefügt werden kann */
    (       TopicVizz
        &&  TopicVizz.bindExtension
        &&  TopicVizz.bindExtension(ext) );

}(this.jQuery, window));

• In der index.html werden Extensions wie folgt eingebunden:

<head>
    <!-- ... -->
    
    <!-- TopicVizz -->
    <script src="./js/topicvizz.js" charset="utf-8"></script>
    
    <!-- TopicVizz Extensions -->
    <script src="./js/ext/topic_histogram.topicvizz.js" charset="utf-8"></script>
    <script src="./js/ext/author_charts.topicvizz.js" charset="utf-8"></script>
    <script src="./js/ext/topic_flow.topicvizz.js" charset="utf-8"></script>
    
    <!-- Neue Extension -->
    <script src="./js/ext/extension_name.topicvizz.js" charset="utf-8"></script>
    
    <!-- ... -->
</head>

^top

• Auflistung aller Topics mit ihrem jeweiligen Histogramm
• Ein Klick auf ein Topic öffnet den Vergleichsmodus
• Jeder weitere Klick auf ein Topic fügt diesen zum Vergleich hinzu
• Hinzugefügte Topics können wieder entfernt werden ("x") oder kurzzeitig ausgeblendet werden (Klick auf den Topicnamen im Vergleichsmodus; Topic-Name wird kurzzeitig die Farbe entzogen)
• Topics und Histogramme erhalten eine übereinstimmende Farbe, um die Zugehörigkeit zu verdeutlichen
• Bewegt man die Maus über den Namen eines hinzugefügten Topics, wird dieser optisch hervorgehoben; alle anderen Topics werden durch einen größeren Transparenzwert weiter in den Hintergrund gesetzt
• Es besteht die Möglichkeit die Auflistung der Topics mit ihren Histogrammen, für die Weiterverarbeitung, als SVG-Datei zu exportieren (als Data-URI in einem neuen Tab/Fenster; dann "Seite speichern unter")

^top

• Auflistung aller Autoren
• Zu jedem Autor wird eine Auflistung aller Topics vorgenommen, wobei diese nach der Anzahl der Erwähnungen durch den Autor sortiert werden (absteigend)
• Für den Aufbau der "Charts" kann nicht auf das Feld "mentioned" eines Autor-Datensatzes zurückgegriffen werden, da aus diesen Daten nicht die Häufigkeit entnommen werden kann
• Abbildung von Topics -> Dokumente und Dokumente auf Autoren womit man eine Abbildung von Topics Autor erhält; Zählen wie oft ein Topic jeweils von einem Autor erwähnt wurde

$.each(author.files, function(i, filename) {
    
    /* Wenn keine Topiczuweisung zu einem Dokument des Autors existiert,
     *    soll das Dokument übersprungen werden */
    if(!m_docs[filename])
        return;
    
    /* Jedes dem Dokument zugewiesene Topic durchgehen */
    $.each(m_docs[filename], function(i, topic) {
        /* Überprüfen, ob das Topic für den Autor schon erfasst wird */
        if(!author.topics_mentioned_ranking[topic.id]) {
            /* Wenn nicht, soll ein neuer Eintrag mit dem Häufigkeitswert 1
             *    erzeugt werden */
            author.topics_mentioned_ranking[topic.id] =
                { topic_id: topic.id,
                  count:    1,
                  data:     topic };
        }
        else {
            /* Wenn ja, dann soll die Zählvariable mit der Anzahl der
             *    bisherigen Erwähnungen um 1 inkrementiert werden */
            author.topics_mentioned_ranking[topic.id].count++;
        }
    });
});

• Zusätzlich eine Auflistung aller Präsentationsdokumente des jeweiligen Autors (Verlinkung)

^top

• Auflistung aller Topics im unteren Bereich (scrollbar)
• Ein Klick auf ein Topic fügt einen Pfad in das Diagramm ein (übereinstimmende Farbe für die Zugehörigkeit)
• Pfade werden visuell aufeinander gestapelt und gemeinsam vertikal zentriert (vgl. ThemeRiver)
• Horizontale Achse für die Zeit (Jahre) und vertikale Achse für die Anzahl der Erwähnungen
• Diagramm, mit den momentanen ausgewählten Topics, kann als SVG-Datei exportiert werden (als Data-URI in einem neuen Tab/Fenster)

^top

• VivaGraphJS für die Graphendarstellung
• D3.js Erzeugung von Diagrammen / SVG-Transitionen
• jQuery DOM-Manipulation

^top