201218Feb

Springy: Graphen mit kraftgelenkter Anordnung

Dynamische Graphen sind mit JavaScript seit HTML5 und Frameworks wie Raphaël oder dem JavaScript InfoVis Toolkit gut umzusetzen. Wer sich etwas mehr mit effektvollen Graphen auseinandersetzen möchte und einen grundlegenden Algorithmus für eine kraftgelenkte Anordnung (force directed) sucht, könnte sich das Skript Springy ansehen. Dabei handelt es sich um eine simple JavaScript-Bibliothek, die Canvas einsetzt, um animierte Graphen darzustellen. Bei einer kraftgelenkten Anordnung werden Objekten eine definierte Masse sowie eine abstoßende Kraft zugewiesen. Die Verbindungen zwischen den Objekten (Knotenpunkte) können dabei als Spiralfedern verstanden werden, welche die Objekte zusammenhalten und gleichzeitig voneinander abstoßen. Das Resultat ist eine einfache Physik-Simulation, bei der die einzelnen Objekte immer zufällig angeordnet werden.

Springy - Force directed graphs

Die Demo von Springy zeigt sehr gut, was den Kern der kleinen Bibliothek darstellt. Die einzelnen Knotenpunkte können durch JavaScript-Objekte erzeugt werden. Der Entwickler hat einen Renderer geschrieben, an den die Funktion übergeben werden kann, welche die eigentliche Simulation startet. Die Drag 'n' Drop-Funktionalität kann mit einem jQuery-Skript hinzugefügt werden, das ebenfalls auf der GitHub-Seite heruntergeladen werden kann.