Interaktives Netzwerkdiagramm von www.heimetli.ch
Das Gephi-Diagramm im vorangehenden Post ist zwar sehr schön, aber nur ein Bild.
Mit D3.js kann man ähnliche Diagramme erzeugen die interaktiv sind. Die folgende Darstellung zeigt die URL des Knotens an wenn der Mauszeiger darüber steht. Und nicht nur das, Sie können auch an einem Knoten ziehen und der Graph passt sich dynamisch an.
Die Daten sind praktisch gleich wie in der Gephi-Darstellung, sie wurden nur ins JSON-Format gewandelt. Ein zusätzliches group-Attribut markiert die verschiedenen Knotentypen. heimetli.json kann hier heruntergeladen werden.
D3 ist unglaublich flexibel
Einerseits hat es sinnvolle Defaults für alle möglichen Parameter, andererseits kann man die nach Lust und Laune übersteuern.
Die erste Stufe ist das Setzen eines Wertes für alle Knoten oder Kanten. Die zweite Stufe ist eine Funktion die auf jedes Element angewendet wird, und einen speziellen Wert für genau dieses Element festlegen kann.
Ich wollte, dass der Graph aehnlich wie bei Gephi aussieht, und deshalb lasse ich auf die linken Knoten eine schwache Kraft wirken, die sie zum Rand zieht. Dadurch stehen sie immer links vom Index-Knoten.
Die Knoten rechts aussen sind eher unwichtig, darum habe ich sie kleiner gemacht. Damit sie nicht allzu weit im Abseits stehen, "ziehen" die Kanten hier etwas stärker als die anderen.
Eine weitere Einstellung: die Kreise überdecken sich nicht, sondern liegen schön nebeneinander.
Die Standard-Paletten enthalten recht wenige Farben, deshalb wird die Farbe der Punkte durch eine eigene Funktion bestimmt. Bedingt durch die Anzahl der Knotentypen gibt es nicht für jeden Typ eine eigene Farbe. Wenn jeder Typ eine eigene Farbe hat, sind sie kaum mehr zu unterscheiden.
Die Verbindungen sind gerichtet, und D3 zeichnet sie auch als Pfeile. Das ist aber im Diagramm nicht zu sehen, weil die Kreise die Köpfe der Pfeile verdecken. Das könnte man sicher auch korrigieren, aber dann wird der Indexknoten zum Problem, weil so viele Links auf ihn zeigen.
Der Graph könnte garantiert noch weiter optimiert werden, aber irgendwann soll er ja schliesslich gepostet werden...
Update 24.07.2018
Es sind doch noch mehr alte Browser im Umlauf als ich dachte!
Besonders der IE machte Probleme, aber auch ältere Andoid-Tablets und Apple-Handies konnten das Diagramm nicht anzeigen.
So wie es aussieht, nutzt D3 die fetch-API um die Daten zu laden, und das ist nicht in allen Browsern implementiert. Das Force-Layout selbst läuft anscheinend problemlos.
Aus diesem Grund habe ich die JSON-Daten direkt ins JavaScript-File gepackt, und endsWith durch indexOf ersetzt. Das ist zwar wirklich hässlich, aber dafür ist der Graph jetzt einem deutlich breiteren Publikum zugänglich...