Network Node-Group Separation

Team Members:
René Holzer (11902082) | Nikolaus Amstler (12023991)

About the Project

This project implements an approach to network visualization through node-group separation presented by Suh et.al, leveraging persistent homology to guide force-directed graph layouts. By analyzing the topological features of networks, we can create more meaningful and structured visualizations that reveal underlying community structures and relationships.

Based On

Research Paper:
Suh, Ashley & Hajij, Mustafa & Wang, Bei & Scheidegger, Carlos & Rosen, Paul. (2019). Persistent Homology Guided Force-Directed Graph Layouts. IEEE Transactions on Visualization and Computer Graphics, vol. 26, no. 1, pp. 697-707, Jan. 2020 DOI: 10.1109/TVCG.2019.2934802.

Screenshots

Full Application Interface
Full Application Interface
PH Contraction View
PH Contraction - Community Clustering
PH Repulsion View
PH Repulsion - Group Separation

Features

Graph Visualization

Interactive visualization of network graphs using sigma.js and Graphology. The system provides real-time rendering of nodes and edges, allowing users to explore complex network structures with smooth pan, zoom, and interaction capabilities.

Persistent Homology Barcode

Generates barcode diagrams that represent the topological features of the network across different scales. Each bar in the diagram corresponds to a topological feature and shows its persistence. Longer bars indicate more significant structural features, helping identify robust community structures and hierarchical organization in the network.

PH Repulsion

Applies repulsive forces between nodes based on persistent homology analysis. This feature uses topological information to push apart nodes that belong to different communities or clusters, enhancing visual separation between distinct groups.

PH Contraction

Implements attractive forces within topologically identified communities to create tighter, more cohesive clusters. This contraction mechanism pulls together nodes that share strong topological relationships, making community structures more visually apparent.

Technologies

  • React: Modern JavaScript library for building interactive user interfaces with component-based architecture
  • sigma.js: High-performance graph visualization library optimized for rendering large networks in the browser
  • Graphology: Powerful graph data structure library for JavaScript, providing comprehensive graph manipulation and analysis tools

How to Run

  • Navigate into the /sigma directory
  • Run npm install to install dependencies
  • Execute npm run dev to start the development server
  • Open your browser and navigate to the provided localhost URL