Graphs - Viz Showcase

Network Graph

Force-directed layout using D3-force. Drag nodes, click to select and highlight connections. Ctrl/Cmd+scroll to zoom.

Force-directed graph showing team connections. Nodes colored by department.

Weighted network showing server-to-service connections.

Same NetworkGraph component with directed prop. Adds arrow markers to edges showing direction.

Directed graph showing which papers cite which. Arrows point from citing paper to cited paper.

Hierarchical layout using D3-hierarchy. Click nodes to expand/collapse branches. Supports horizontal and vertical orientations.

Horizontal tree showing company hierarchy. Click +/\u2212 to expand or collapse branches.

Vertical tree showing directory structure. Top-to-bottom layout.

Directed acyclic graph layout using d3-dag Sugiyama algorithm. Nodes arranged in layers with minimized edge crossings.

Layered dependency graph showing package relationships. Arrows flow from dependents to dependencies.

Data processing pipeline showing task flow from input through processing to output.

Flow visualization using d3-sankey. Width of flows proportional to value. Hover nodes to highlight connected flows.

Multi-stage energy flow from sources through distribution to consumption. Gradient-colored flows.

Conversion funnel showing user progression from visit to subscription, with churn and bounce exits.

Filtered network graph with entity and relationship type controls. Wraps NetworkGraph with domain-specific filtering.

Knowledge graph showing movies, people, and genres. Use filters to show/hide entity and relationship types.

Same data rendered with three different layout algorithms. Force-directed (physics), tree (hierarchy), and DAG (layered).

Physics-based positioning. Nodes repel, edges attract.

Hierarchical positioning. Parent-child structure.

Layered positioning. Minimized edge crossings.