Graphvisualisierung räumlicher Informationen mit Neo4J Spatial und d3js

01. November 2016
Räumliche Informationen sind eine komplexe Menge von Daten, welche durch Beziehungen zueinander weitere Informationen und Wissen generieren. Die Abbildung dieser räumlichen Informationen in Datenbanken bis hin zur Darstellung und Interaktion wird an dem Beispiel kartographischer Aspekte beschrieben. Zum Einsatz kommen dabei die Neo4J-spatial sowie d3js. Weiterhin wird auf Interaktion und Exploration einer der Art komplexen Menge an Informationen eingegangen.
 

Graphen und räumliche Information

Der Begriff Geodaten wird in erste Linie mit dem bekannten kartesischen Koordinatensystem verbunden. Dies ist auch in ca. 80% der Geodaten auch der Fall. Damit wird ein expliziter Raumbezug hergestellt. Im Weitern werden jedoch zusätzliche Attribute wie Zeit und Topologie hinzugefügt um einen Punkt in diesem kartesischen Koordinatensystem zu beschreiben. Dies wird als Primär- und Sekundärdaten bezeichnet. Die Abbildung erfolgt in so genannten „Geo-Informations-Systemen“ (GIS).
Die Nutzung dieser Geodaten unterliegt (aus Sicht der Informationen) auf den Qualitätsaspekten der Vollständigkeit, logischen Konsistenz, räumlich und zeitliche Präzision sowie thematische Korrektheit (vgl. [4]).
 
Diese Korrektheit gilt es in die Modellierung der Daten für eine Graphvisualisierung zu übernehmen. Graphen stellen ein visuelles und mathematisches Gebilde für Beziehungen zwischen Objekten dar und beschreiben deren Eigenschaften – Relation und Objekt. Darüber hinaus nutzen Graphvisualisierungen die Vorteile der menschlichen visuellen Wahrnehmung (vgl. [5] Gestaltgesetze nach Wertheimer).
 
Dieser „Vorteil“ wird in der visuellen Darstellung von räumlichen Informationen mit Graphen genutzt. Es ermöglicht gleichzeitig verschiedene Attribute wahrzunehmen (Gesetz der Ähnlichkeit), mehrere Objekte zu Gruppieren (Gesetz der Nähe) – ohne eine Interaktion – sowie explizite Relationen in mehreren Ebenen (Gesetz der Verbundenheit) zu erkennen.
 

Neo4j und d3js für räumliche Informationen

Die oben genannten Sekundärdaten, sowie auch die Primärdaten, können mittels den Noe4J-Spatial-Plugins genutzt werden (vgl. [3]). Insbesondre die Speicherung von Linien- und Polygon-Geometrien ermöglicht eine direkte Nutzung dieser Sekundärinformationen. Damit lassen sich komplexere Daten abbilden. Daraus resultiert, dass die räumlichen Informationen als Objekt und Relation in einer Datenbank vorliegen.
 
Die Relationen zwischen diesen Daten – unabhängig von der Komplexität – können fortan mittels eines Graphen dargestellt werden. Für die Visualisierung von Graphen verwenden wir d3js (vgl. [2], [6]) Die Entscheidung zur Verwendung von d3js liegt in dem Vorteil des modularen Frameworks und der Graphen, z.B. Force-Directed [7]. Weiterhin ist d3js so flexibel (modular), dass weitere Visualisierungsmöglichkeiten für die Sekundärdaten verwendet werden können.
 
Damit ergibt sich ein recht komplexes System an Informationen, welches aus kartesischen Koordinaten, zeitlicher Abhängigkeit und weiteren Sekundärdaten besteht. Wie der Art komplexe Graphen exploriert und für den Nutzer fassbar gemacht werden sowie deren Visualisierung aufgebaut werden kann ist in [1] beschrieben.
 
Es resultiert damit die in Abbildung 1 dargestellte Struktur für die Visualisierung räumlicher Informationen.
 
 
Abbildung 1: Abbildung räumlicher Informationen in Neo4J und Visualisierung durch d3js
 

Kombination von Neo4j spatial und d3js

Als fachliches Beispiel sollen kartographische Aspekte betrachtet werden. Jeder Ort hat bestimmte Eigenschaften, zum Beispiel:
  • Kartesische Koordinaten
  • Zeitliche Information
  • Objektgruppe/-typ
  • Kartographisches Symbol
  • Abhängigkeiten
 
Diese Eigenschaften lassen sich im weiteren Schritt in den genannten Systemen abbilden. Dazu wird eine Transformation in Daten erfolgen (vgl. Abbildung 1)
 
Eigenschaft Neo4J-spatial Objekt
Kartesische Koordinaten { “lat“ : “lat“; “lon“ : “lon“; }
Zeitliche Information { “time“ : “time“ }
Objektgruppe/-Typ { “type“ : “type“ }
Kartographisches Symbol { “symbol“ : “symbol“ }
Abhängigkeiten { “rel“ : [“rel“] }

Tabelle 1: Zuordnung räumliche Information zu Neo4J-spatial Objekt (Beispiel)

Im Weiteren gilt es nun diese Objekte für d3js aufzubereiten. Dazu werden die in Tabelle beschriebenen Zuordnungen genutzt.
 
Eigenschaft Neo4J-spatial Objekt d3js-Objekt
Kartesische Koordinaten { “lat“ : “lat“; “lon“ : “lon“; } var lat; var lon;
Zeitliche Information { “time“ : “time“ } var time;
Objektgruppe/-Typ { “type“ : “type“ } var type;
Kartographisches Symbol { “symbol“ : “symbol“ }
var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
Abhängigkeiten { “rel“ : [“rel“] }
var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")

Tabelle 2: Zuordnung von d3js-Objekten zu Neo4J-spatial Objekt und räumlicher Information

d3js erlaubt es nun den DOM beziehungsweise die damit enthaltenen SVGs zu manipulieren. Entsprechend der fachlichen sowie der visuellen Anforderungen kann die Gestaltung vorgenommen werden. Die Grundlage stellen die Knoten und Kanten des Graphen dar.
 
Im Weiteren gibt es verschiedene Interaktionen, welche die Exploration von räumlichen, verbunden Informationen ermöglichen. Hierzu bietet die Arbeit [1] eine Übersicht. Für räumliche Informationen stehen insbesondere folgende Interaktionen im Vordergrund:
  • Pan Verschieben der visuellen Fläche über den sichtbaren Darstellungsbereich hinaus/hinein
  • Zoom Vergrößerung/Verkleinerung des sichtbaren Bereichs der Darstellungsfläche und damit Veränderung der Anzahl an sichtbaren Objekten und deren Informationen
  • Catch Anzeigen aller nicht im sichtbaren Bereich enthaltenen Objekte am Rand des sichtbaren Bereichs.
 
Abbildung 2: Catch von Objekten die sich außerhalb des sichtbaren Bereichs befinden [1]
 

Ausblick 

Diese Darstellungen lassen sich mit weiteren Visualisierungen und Informationen anreichern und kombinieren. Ein oft genutztes und geeignetes Mittel sind Dashboards. Diese stellen verschiedene Sichten auf Daten gleichzeitig dar – sowie personalisiert für den Nutzer – zusätzliche Informationen zu anderen relevanten Quellen. 
 
Referenzen
[1] Tomschke, S. (2014). Visualisierungs-und Interaktionskonzept zur graphenbasierten 
[2] Tomschke, S. (2016). Graph-Gestaltung mit d3js im IoT-Umfeld. 
[3] Gurov, A. (2016). Wir stellen vor: Das Neo4j Spatial Plugin. 
[4] ISO 19113, Geographic information -- Quality principles. http://www.iso.org/iso/catalogue_detail.htm?csnumber=26018. Abgerufen am 27. Oktober 2016
[5] Wertheimer, M. (1922): Untersuchungen zur Lehre von der Gestalt. In: Psychological Research, 1(1), (S. 47-58).
[6] Tomschke, S. (2016) Graph-Gestaltung mit d3js im IoT-Umfeld. https://jugsaxony.org/veranstaltungen/80/. Abgerufen am 27. Oktoboer 2016
[7] Fruchterman, T. M., Reingold, E. M. (1991): Graph drawing by force‐directed placement. In: Software: Practice and experience, 21(11), (S. 1129-1164).
 

Neuen Kommentar schreiben