https://github.com/sirawin/ona-visualization
🔗 Interactive Organizational Network Analysis visualization with D3.js, community detection, and team analytics. Live demo: https://ona-lh77jtqk9-sirawins-projects.vercel.app
https://github.com/sirawin/ona-visualization
community-detection d3js data-visualization javascript network-graph organizational-network-analysis vercel vite
Last synced: about 2 months ago
JSON representation
🔗 Interactive Organizational Network Analysis visualization with D3.js, community detection, and team analytics. Live demo: https://ona-lh77jtqk9-sirawins-projects.vercel.app
- Host: GitHub
- URL: https://github.com/sirawin/ona-visualization
- Owner: sirawin
- Created: 2025-09-23T07:39:32.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-23T18:21:42.000Z (9 months ago)
- Last Synced: 2025-10-26T12:12:02.782Z (8 months ago)
- Topics: community-detection, d3js, data-visualization, javascript, network-graph, organizational-network-analysis, vercel, vite
- Language: HTML
- Homepage: https://ona-lh77jtqk9-sirawins-projects.vercel.app
- Size: 1.75 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Organizational Network Analysis (ONA) Visualization
A modern web application for visualizing organizational network analysis data with interactive D3.js charts and community detection algorithms.
## Features
### 🔗 All Connections
- **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
### 👥 Team Connections
- **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
### 📊 Individual Impact
- **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
### 🏆 Recognition Analysis
- **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
### 🔄 Change Agent Analysis
- **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
### 👤 Employee Profiles
- **Individual Scorecards**: All 8 dimension scores at a glance
- **Radar Chart**: Visual comparison against company averages
- **Print Functionality**: Generate printable reports
## Technical Stack
- **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
## Data Format
The application expects CSV data with the following structure:
```csv
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.
## Installation & Development
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
```
## Deployment
This project is configured for seamless deployment on Vercel:
1. Connect your GitHub repository to Vercel
2. Vercel will automatically detect the Vite configuration
3. Deploy with zero configuration required
Alternatively, deploy manually:
```bash
npm run build
# Upload the `dist` folder to your hosting provider
```
## Features in Detail
### Network Analysis
- **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
### Data Processing
- **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
### Responsive Design
- **Mobile-First**: Optimized for all device sizes
- **Modern UI**: Clean, professional interface with smooth animations
- **Accessibility**: Proper ARIA labels and keyboard navigation support
## Browser Support
- Chrome/Edge 88+
- Firefox 85+
- Safari 14+
## Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
## License
MIT License - see LICENSE file for details