ADORE wird sichtbar

5 Jul

ADORE macht Fortschritte: momentan stelle ich ein paar konzeptionelle Überlegungen an und schreibe diese in der Arbeit nieder. Gleichzeitig bringe ich diese Überlegungen schon in kleinen Portionen in die eigentliche Programmierung ein. Und genau davon möchte in in diesem Blogpost ein wenig zeigen. In meinem ersten Blogpost vor ein paar Wochen hatte ich ja schon geschrieben, dass ich als Eingabedatenformat gedenke, JSON zu verwenden. Diese Idee hat sich auch nach weiteren Überlegungen als sinnvoll herausgestellt. Auch der Gedanke, die Formatierung der Darstellung per CSS zu realisieren hat sich als fruchtbar erwiesen. So ist ADORE jetzt schon in der Lage aus dem JSON-Fragment

{
    "nodes":
    [
        { "id": "author2", "label": "Author 2", "class": "author" },
        { "id": "paperA", "label": "Paper A", "class": "paper"  },
        { "id": "paperC", "label": "Paper C", "class": "paper"  },
        { "id": "conferenceA", "label": "Conf A", "class": "conference" }
    ],
    "edges":
    [
        { "id": "edge1", "from": { "$ref": "author2" },
          "to": { "$ref": "paperA" }, "class": "authorship" },
        { "id": "edge3", "from": { "$ref": "paperA" },
          "to": { "$ref": "paperC" }, "class": "citation" },
        { "id": "edge5", "from": { "$ref": "paperC" },
          "to": { "$ref": "conferenceA" }, "class": "presentation" }
    ],
    "paths":
    [
        { "id": "path1", "edges": [ { "$ref": "edge1" }, { "$ref": "edge3" },
                                    { "$ref": "edge5" } ] }
    ]
}

die folgende Darstellung zu erzeugen.

Pfad-Darstellung in ADORE mit "bare" Skin.

Pfad-Darstellung in ADORE mit „bare“ Skin.

Hierbei kommt der „bare“ Skin zum Einsatz, ein Basis-CSS-Stylesheet, dass allein die Aufgabe hat, die Knoten und Kanten in neutraler Form darzustellen, also ohne anwendungsspezifische Formatierung. Nun kann man ein Stylesheet mit anwendungsspezifischen Formatierungen laden – hier wäre das ein Stylesheet, wie das folgende (gekürzt), das Autoren als Figuren, Papiere eben als Schriftstücke und Konferenzen durch eine Plakatwand verdeutlicht.

/* Node styles */

.author {
    background-image: url('skins/academic/img/author-node.png');
}
[...]

/* Edge styles */

._jsPlumb_connector.authorship path {
    stroke: black;
}

._jsPlumb_connector.citation path {
    stroke: green;
    stroke-dasharray: 5,5;
}

._jsPlumb_connector.presentation path {
    stroke: red;
    stroke-width: 1;
}

/* Overlay styles */

._jsPlumb_overlay.authorship {
    background-image: url('skins/academic/img/authorship-edge.png');
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

Die Darstellung ändert sich entsprechend:

Pfad-Darstellung in ADORE mit "academic" Skin.

Pfad-Darstellung in ADORE mit „academic“ Skin.

Diese Darstellung ist in skalietrer Form sicherlich auch als Widget in einer anderen Webseite nützlich. Der offensichlichste Anwedungszweck sind hier natürlich alle Formen von Social Networking Sites und artverwandtes.

Die nächsten Schritte werden darin bestehen, den theoretischen Teil der Arbeit, also meine konzeptionellen Überlegungen weiterzuführen und niederzuschreiben.

2 Antworten to “ADORE wird sichtbar”

  1. wollepb 6. Juli 2012 um 15:19 #

    Echt cool. Bin gespannt auf die ersten Visualisierungen mehrerer Pfade mit echten Daten ;)

Trackbacks/Pingbacks

  1. Gültigkeitsprüfung von JSON-Datensätzen mittels JSON Schema « Studentenblogs DDI@UPB - 5. August 2012

    […] beschäftige ich mich u.a. mit der Gültigkeitsprüfung von JSON-Datensätzen. In meinem letzten Blogpost gab es ja schon ein paar JSON Datensätze zu sehen und was meine Anwendung daraus für Graphen […]

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: