Nexonoma Compare · Kuratierter Snapshot

Graph-Visualisierung

Graph-Visualisierung beschreibt Prinzipien und Muster zur grafischen Darstellung von Knoten und Kanten, inklusive Layout, Aggregation und Interaktion.

Vergleiche konkrete Werkzeuge anhand derselben funktionalen, nicht-funktionalen und kommerziellen Eigenschaften. Die Matrix zeigt belegte Unterschiede. Gewichtung, Empfehlung und Auswahl folgen später in Decide.

Katalog Explorer Mit diesen Kandidaten entscheiden

Kandidaten

2 bis 4 auswählen

Kandidaten	Cytoscape.js Geprüft am 2026-08-25	Sigma.js Geprüft am 2026-08-25	D3.js Geprüft am 2026-08-25
Funktional
RenderingTechnischer Ansatz für die Darstellung von Knoten, Kanten und Beschriftungen.	Canvas Eigener interaktiver Canvas-Renderer zusammen mit einem vollständigen Graph-API. 1	WebGL GPU-beschleunigtes WebGL für Knoten und Kanten; zusätzliche Ebenen nutzen auch Canvas. 5 6	SVG / Canvas / HTML Niedrigstufige, webstandardnahe Darstellung über SVG, Canvas oder HTML. 9
GraphmodellArt und Umfang des mitgelieferten Datenmodells für Knoten, Kanten und Graphoperationen.	Integriert Integriertes Modell für Knoten, Kanten, Sammlungen, Styles und Graphanalysen. 1	Graphology Baut auf Graphology als getrenntem Graphmodell und Ökosystem auf. 4	Anwendungsseitig Kein eigenes vollständiges Graphmodell; Anwendungen arbeiten mit JavaScript-Daten und kombinieren passende D3-Module. 9 10
LayoutsUnterstützung für die automatische Positionierung und Anordnung eines Graphen.	Integriert + Erweiterungen Mehrere Layouts sind enthalten; weitere Algorithmen lassen sich als Erweiterungen ergänzen. 2	Graphology-Ökosystem Layouts und Graphalgorithmen kommen über das Graphology-Ökosystem; Sigma rendert die berechneten Positionen. 4	Modular d3-force liefert kraftbasierte Simulationen; weitere Anordnungen entstehen aus spezialisierten D3-Modulen oder eigener Logik. 10
InteraktionenDirekt verfügbare Bausteine für Navigation und Interaktion mit dem Graphen.	Pan & ZoomAuswahlDrag & DropKnoten- und Kantenereignisse Breite Standardinteraktionen stehen über die gemeinsame Graph-API direkt bereit. 1	Pan & ZoomHoverTouchKnoten- und Kantenereignisse Sigma liefert die Kerninteraktionen für performante Exploration; weitere Logik wird ergänzt. 4 7	Pan & ZoomDrag & DropDOM-Ereignissefrei komponierbare Interaktionen Interaktionen werden aus D3-Modulen und eigener Anwendungslogik frei zusammengestellt. 11 12
Nicht-funktional
SkalierungsfokusWorauf das Werkzeug bei Umfang und Darstellungsleistung ausgerichtet ist.	Interaktive Allround-Lösung Allgemeine interaktive Netzwerke mit gemeinsamem Fokus auf Visualisierung und Graphanalyse. 3	Große Graphen Expliziter Fokus auf flüssige Darstellung und Exploration großer Graphen im Browser. 4 5	Implementierungsabhängig Flexibel durch freie Wahl von SVG, Canvas oder HTML; die konkrete Skalierung hängt stark von der gewählten Implementierung ab. 9 11
AnpassbarkeitMöglichkeiten, Darstellung, Verhalten und zusätzliche Ebenen anzupassen.	Datenabhängige Styles, eigene Layouts und ein breites Erweiterungsmodell.1 2	Eigene WebGL-Programme, Renderer und zusätzliche Canvas- oder WebGL-Ebenen ermöglichen tiefe visuelle Anpassungen.5 6	Sehr hohe gestalterische Freiheit durch direkte Arbeit mit Webstandards und modularen Bausteinen.9
IntegrationscharakterAbstraktionsniveau und typische Eigenleistung bei der Einbindung in eine Anwendung.	Niedrig Relativ hohes Abstraktionsniveau: Graphmodell, Renderer, Interaktion und Analysen greifen über eine gemeinsame API ineinander. 3	Mittel Spezialisierter Renderer mit mittlerem Abstraktionsniveau; Daten, Layouts und Analysen werden über Graphology kombiniert. 4	Hoch Niedriges Abstraktionsniveau mit hoher Eigenleistung für Rendering, Zustände, Selektion und Graphverhalten. 9 10 11
Kommerziell
LizenzLizenzmodell der Kernbibliothek.	MIT Open Source unter MIT-Lizenz. 3	MIT Open Source unter MIT-Lizenz. 8	ISC Open Source unter ISC-Lizenz. 9

Cytoscape.js

Leichte JavaScript-Bibliothek zur Darstellung und Interaktion mit Graphen und Netzwerken im Browser.

Funktional

Rendering: Canvas
Eigener interaktiver Canvas-Renderer zusammen mit einem vollständigen Graph-API.
1
Graphmodell: Integriert
Integriertes Modell für Knoten, Kanten, Sammlungen, Styles und Graphanalysen.
1
Layouts: Integriert + Erweiterungen
Mehrere Layouts sind enthalten; weitere Algorithmen lassen sich als Erweiterungen ergänzen.
2
Interaktionen: Pan & ZoomAuswahlDrag & DropKnoten- und Kantenereignisse
Breite Standardinteraktionen stehen über die gemeinsame Graph-API direkt bereit.
1

Nicht-funktional

Skalierungsfokus: Interaktive Allround-Lösung
Allgemeine interaktive Netzwerke mit gemeinsamem Fokus auf Visualisierung und Graphanalyse.
3
Anpassbarkeit: Datenabhängige Styles, eigene Layouts und ein breites Erweiterungsmodell.1 2
Integrationscharakter: Niedrig
Relativ hohes Abstraktionsniveau: Graphmodell, Renderer, Interaktion und Analysen greifen über eine gemeinsame API ineinander.
3

Kommerziell

Lizenz: MIT
Open Source unter MIT-Lizenz.
3

Sigma.js

JavaScript-Bibliothek für interaktive Netzwerkvisualisierungen im Web.

Funktional

Rendering: WebGL
GPU-beschleunigtes WebGL für Knoten und Kanten; zusätzliche Ebenen nutzen auch Canvas.
5 6
Graphmodell: Graphology
Baut auf Graphology als getrenntem Graphmodell und Ökosystem auf.
4
Layouts: Graphology-Ökosystem
Layouts und Graphalgorithmen kommen über das Graphology-Ökosystem; Sigma rendert die berechneten Positionen.
4
Interaktionen: Pan & ZoomHoverTouchKnoten- und Kantenereignisse
Sigma liefert die Kerninteraktionen für performante Exploration; weitere Logik wird ergänzt.
4 7

Nicht-funktional

Skalierungsfokus: Große Graphen
Expliziter Fokus auf flüssige Darstellung und Exploration großer Graphen im Browser.
4 5
Anpassbarkeit: Eigene WebGL-Programme, Renderer und zusätzliche Canvas- oder WebGL-Ebenen ermöglichen tiefe visuelle Anpassungen.5 6
Integrationscharakter: Mittel
Spezialisierter Renderer mit mittlerem Abstraktionsniveau; Daten, Layouts und Analysen werden über Graphology kombiniert.
4

Kommerziell

Lizenz: MIT
Open Source unter MIT-Lizenz.
8

D3.js

D3.js ist eine JavaScript-Bibliothek zur Manipulation von Dokumenten basierend auf Daten. Sie ermöglicht, dynamische, interaktive Datenvisualisierungen im Web zu erstellen.

Funktional

Rendering: SVG / Canvas / HTML
Niedrigstufige, webstandardnahe Darstellung über SVG, Canvas oder HTML.
9
Graphmodell: Anwendungsseitig
Kein eigenes vollständiges Graphmodell; Anwendungen arbeiten mit JavaScript-Daten und kombinieren passende D3-Module.
9 10
Layouts: Modular
d3-force liefert kraftbasierte Simulationen; weitere Anordnungen entstehen aus spezialisierten D3-Modulen oder eigener Logik.
10
Interaktionen: Pan & ZoomDrag & DropDOM-Ereignissefrei komponierbare Interaktionen
Interaktionen werden aus D3-Modulen und eigener Anwendungslogik frei zusammengestellt.
11 12

Nicht-funktional

Skalierungsfokus: Implementierungsabhängig
Flexibel durch freie Wahl von SVG, Canvas oder HTML; die konkrete Skalierung hängt stark von der gewählten Implementierung ab.
9 11
Anpassbarkeit: Sehr hohe gestalterische Freiheit durch direkte Arbeit mit Webstandards und modularen Bausteinen.9
Integrationscharakter: Hoch
Niedriges Abstraktionsniveau mit hoher Eigenleistung für Rendering, Zustände, Selektion und Graphverhalten.
9 10 11

Kommerziell

Lizenz: ISC
Open Source unter ISC-Lizenz.
9

Quellen

Die Ziffern führen zu den Belegen der jeweiligen Eigenschaft.