Network visualization tool for mapping professional relationships and org charts
Build a private interactive webpage triggered by the /network route that visualizes a person’s professional and social network as a force-directed web. Represent people as nodes and relationships as connecting lines whose thickness and brightness indicate connection strength, from lightweight social engagement to close friendships or strong collaboration. Start with deterministic sample data organized into communities, but structure the experience so a real contact or relationship source can replace it later. Let users pan, zoom, drag nodes, search for people, inspect direct relationships, and choose any person from a dropdown to recenter the graph around them. Use React with an HTML Canvas for smooth rendering—or an equivalent frontend and graph-rendering stack—and keep access limited to workflow space members. Tools used: React, Tailwind CSS, HTML Canvas, Google Fonts
What this prompt builds
An interactive force-directed network visualization that displays professional and social connections as nodes and weighted edges. Users can pan, zoom, search, and recenter the graph around any person to explore relationship strength and organizational structure. Built with React and HTML Canvas, it's designed for workflow space members to map cross-organizational relationships and visualize org charts.
The problem
Teams and leaders often lack a clear visual representation of how people in their organization or network are connected, making it difficult to identify relationship strength, discover collaboration patterns, or map cross-functional relationships. This workflow builds an interactive force-directed web that visualizes people as nodes and relationships as connecting lines, with thickness and brightness indicating connection strength. Users can pan, zoom, search for individuals, inspect direct relationships, and recenter the graph around any person to explore their network, turning abstract relationship data into an intuitive, navigable map of organizational and social connections.
Solution and impact
Teams gain a dynamic, visual tool to explore professional networks and org charts in real time, surfacing hidden collaboration patterns and relationship strength at a glance. By enabling search, zoom, and recentering around any individual, the workflow helps leaders identify key connectors, plan cross-functional initiatives, and understand organizational structure more intuitively. Users save time previously spent piecing together fragmented relationship data, replacing guesswork with a clear, interactive map of who knows whom and how strongly they're connected.