Social Network Analysis
Explore the hidden structure of social networks. This showcase demonstrates community detection, influence analysis, and interactive graph exploration on a large-scale social graph with over a thousand users.
Features Used
About This Showcase
Social network analysis (SNA) is fundamental to understanding how information flows through communities, identifying key influencers, and detecting tightly-knit groups within larger populations. This showcase brings these analytical capabilities to life through an interactive force-directed graph visualization built with TopoKit.
The demo renders a synthetic social graph of 1,200 users organized into 8 distinct communities. Each community is color-coded and emerges naturally from the force-directed layout algorithm, which positions densely connected groups closer together while pushing loosely connected communities apart. Node sizes are mapped to degree centrality -- users with more connections appear larger, making it easy to spot influential individuals.
Users can click on any node to expand their immediate network, revealing second-degree connections progressively without overwhelming the view. The search feature allows finding specific users by name, while the minimap provides a bird's-eye overview for navigating large graphs. Hovering over a node highlights all direct connections and dims the rest of the graph, providing instant context about any individual's network position and reach.
Technical Details
Configuration Example
This example shows how to configure community detection, degree-based sizing, and interactive highlighting for a social graph.
import {'{'} create {'}'} from '@topokit/renderer-canvas';
const graph = create(document.getElementById('container'), {'{'}
nodes: socialData.users,
edges: socialData.connections,
// Force layout with Barnes-Hut optimization
layout: {'{'}
type: 'force',
gravity: 0.1,
repulsion: 800,
worker: true,
{'}'},
// Size nodes by connection count
nodeStyle: (node) => ({'{'}
size: 8 + node.data.degree * 2,
fill: communityColors[node.data.community],
label: node.data.name,
{'}'}),
// Highlight neighbors on hover
interaction: {'{'}
hover: {'{'} highlightNeighbors: true, dimOthers: 0.15 {'}'},
click: {'{'} expandNeighbors: true {'}'},
{'}'},
search: {'{'} enabled: true, fields: ['name', 'community'] {'}'},
minimap: true,
theme: 'dark',
{'}'});Building an SNA, fraud, or AML platform?
Read the full social network analysis use case for the technical and operational context, or talk to sales.