A modern web application for visualizing organizational network analysis data with interactive D3.js charts and community detection algorithms.
- Interactive Force-Directed Network Graph: Visualize employee connections with D3.js force simulation
- Louvain Community Detection: Automatically detect communities within networks per dimension
- Dynamic Dimension Selection: Switch between 8 different organizational dimensions
- Interactive Legend: Click to highlight communities, hover for details
- Node Interactions: Hover to see connections, click and drag to reposition
- Chord Diagram: Visualize internal vs cross-functional team connections
- Sankey Diagram: Show team fragmentation and how formal teams map to detected communities
- Interactive Elements: Hover for connection details and flow information
- Searchable Data Table: Find employees by name or team
- Sortable Columns: Click headers to sort by any dimension score
- Profile Links: Open detailed employee profiles in new tabs
- Real-time Filtering: Search results update as you type
- 2D Scatter Plot: Outstanding Work vs Deserving Recognition
- Team-based Coloring: Visual grouping by organizational teams
- Interactive Points: Hover for details, click to view profiles
- Decision Making vs Change Interest: Identify change champions and potential resistors
- Quadrant Analysis: Visual zones for different change agent types
- Strategic Insights: Find employees in optimal positions for driving change
- Individual Scorecards: All 8 dimension scores at a glance
- Radar Chart: Visual comparison against company averages
- Print Functionality: Generate printable reports
- Frontend: Vanilla JavaScript (ES6 modules), HTML5, CSS3
- Visualization: D3.js v7 with force simulation, chord, and scatter plots
- Styling: Tailwind CSS for modern, responsive design
- Icons: Lucide React for consistent iconography
- Data Processing: Custom CSV parser with organizational network analysis
- Community Detection: Custom Louvain algorithm implementation
- Build Tool: Vite for development and production builds
- Deployment: Vercel-ready configuration
The application expects CSV data with the following structure:
Name,Team,Outstanding_Work,Deserving_Recognition,Collaboration,Advice,Energy,Support,Clarity,Decision_Making,change_interest
Employee1,TeamA,Employee2,Employee3,Employee2,...Where each dimension column contains the name of the employee they would choose for that particular quality.
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewThis project is configured for seamless deployment on Vercel:
- Connect your GitHub repository to Vercel
- Vercel will automatically detect the Vite configuration
- Deploy with zero configuration required
Alternatively, deploy manually:
npm run build
# Upload the `dist` folder to your hosting provider- Force-Directed Layout: Uses D3's force simulation for natural node positioning
- Community Detection: Louvain algorithm identifies clusters within each dimension
- Dynamic Interactions: Hover effects, drag functionality, and zoom capabilities
- Legend Integration: Real-time community highlighting and statistics
- CSV Parsing: Robust parsing of organizational network data
- Score Calculation: Automatic calculation of incoming connection counts
- Team Analysis: Matrix generation for chord diagrams and team interactions
- Search & Filter: Real-time data filtering and sorting capabilities
- Mobile-First: Optimized for all device sizes
- Modern UI: Clean, professional interface with smooth animations
- Accessibility: Proper ARIA labels and keyboard navigation support
- Chrome/Edge 88+
- Firefox 85+
- Safari 14+
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
MIT License - see LICENSE file for details