{"id":31424854,"url":"https://github.com/sirawin/ona-visualization","last_synced_at":"2026-05-05T17:32:47.451Z","repository":{"id":316205726,"uuid":"1062391105","full_name":"sirawin/ona-visualization","owner":"sirawin","description":"🔗 Interactive Organizational Network Analysis visualization with D3.js, community detection, and team analytics. Live demo: https://ona-lh77jtqk9-sirawins-projects.vercel.app","archived":false,"fork":false,"pushed_at":"2025-09-23T18:21:42.000Z","size":1838,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T12:12:02.782Z","etag":null,"topics":["community-detection","d3js","data-visualization","javascript","network-graph","organizational-network-analysis","vercel","vite"],"latest_commit_sha":null,"homepage":"https://ona-lh77jtqk9-sirawins-projects.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sirawin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-23T07:39:32.000Z","updated_at":"2025-09-26T21:43:44.000Z","dependencies_parsed_at":"2025-09-23T10:14:45.125Z","dependency_job_id":"5c1ee367-a14d-42b1-b9c7-1549244a6eeb","html_url":"https://github.com/sirawin/ona-visualization","commit_stats":null,"previous_names":["sirawin/ona-visualization"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sirawin/ona-visualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirawin%2Fona-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirawin%2Fona-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirawin%2Fona-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirawin%2Fona-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sirawin","download_url":"https://codeload.github.com/sirawin/ona-visualization/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirawin%2Fona-visualization/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32660292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["community-detection","d3js","data-visualization","javascript","network-graph","organizational-network-analysis","vercel","vite"],"created_at":"2025-09-30T04:06:38.827Z","updated_at":"2026-05-05T17:32:47.439Z","avatar_url":"https://github.com/sirawin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Organizational Network Analysis (ONA) Visualization\n\nA modern web application for visualizing organizational network analysis data with interactive D3.js charts and community detection algorithms.\n\n## Features\n\n### 🔗 All Connections\n- **Interactive Force-Directed Network Graph**: Visualize employee connections with D3.js force simulation\n- **Louvain Community Detection**: Automatically detect communities within networks per dimension\n- **Dynamic Dimension Selection**: Switch between 8 different organizational dimensions\n- **Interactive Legend**: Click to highlight communities, hover for details\n- **Node Interactions**: Hover to see connections, click and drag to reposition\n\n### 👥 Team Connections\n- **Chord Diagram**: Visualize internal vs cross-functional team connections\n- **Sankey Diagram**: Show team fragmentation and how formal teams map to detected communities\n- **Interactive Elements**: Hover for connection details and flow information\n\n### 📊 Individual Impact\n- **Searchable Data Table**: Find employees by name or team\n- **Sortable Columns**: Click headers to sort by any dimension score\n- **Profile Links**: Open detailed employee profiles in new tabs\n- **Real-time Filtering**: Search results update as you type\n\n### 🏆 Recognition Analysis\n- **2D Scatter Plot**: Outstanding Work vs Deserving Recognition\n- **Team-based Coloring**: Visual grouping by organizational teams\n- **Interactive Points**: Hover for details, click to view profiles\n\n### 🔄 Change Agent Analysis\n- **Decision Making vs Change Interest**: Identify change champions and potential resistors\n- **Quadrant Analysis**: Visual zones for different change agent types\n- **Strategic Insights**: Find employees in optimal positions for driving change\n\n### 👤 Employee Profiles\n- **Individual Scorecards**: All 8 dimension scores at a glance\n- **Radar Chart**: Visual comparison against company averages\n- **Print Functionality**: Generate printable reports\n\n## Technical Stack\n\n- **Frontend**: Vanilla JavaScript (ES6 modules), HTML5, CSS3\n- **Visualization**: D3.js v7 with force simulation, chord, and scatter plots\n- **Styling**: Tailwind CSS for modern, responsive design\n- **Icons**: Lucide React for consistent iconography\n- **Data Processing**: Custom CSV parser with organizational network analysis\n- **Community Detection**: Custom Louvain algorithm implementation\n- **Build Tool**: Vite for development and production builds\n- **Deployment**: Vercel-ready configuration\n\n## Data Format\n\nThe application expects CSV data with the following structure:\n\n```csv\nName,Team,Outstanding_Work,Deserving_Recognition,Collaboration,Advice,Energy,Support,Clarity,Decision_Making,change_interest\nEmployee1,TeamA,Employee2,Employee3,Employee2,...\n```\n\nWhere each dimension column contains the name of the employee they would choose for that particular quality.\n\n## Installation \u0026 Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n## Deployment\n\nThis project is configured for seamless deployment on Vercel:\n\n1. Connect your GitHub repository to Vercel\n2. Vercel will automatically detect the Vite configuration\n3. Deploy with zero configuration required\n\nAlternatively, deploy manually:\n```bash\nnpm run build\n# Upload the `dist` folder to your hosting provider\n```\n\n## Features in Detail\n\n### Network Analysis\n- **Force-Directed Layout**: Uses D3's force simulation for natural node positioning\n- **Community Detection**: Louvain algorithm identifies clusters within each dimension\n- **Dynamic Interactions**: Hover effects, drag functionality, and zoom capabilities\n- **Legend Integration**: Real-time community highlighting and statistics\n\n### Data Processing\n- **CSV Parsing**: Robust parsing of organizational network data\n- **Score Calculation**: Automatic calculation of incoming connection counts\n- **Team Analysis**: Matrix generation for chord diagrams and team interactions\n- **Search \u0026 Filter**: Real-time data filtering and sorting capabilities\n\n### Responsive Design\n- **Mobile-First**: Optimized for all device sizes\n- **Modern UI**: Clean, professional interface with smooth animations\n- **Accessibility**: Proper ARIA labels and keyboard navigation support\n\n## Browser Support\n\n- Chrome/Edge 88+\n- Firefox 85+\n- Safari 14+\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n## License\n\nMIT License - see LICENSE file for details","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirawin%2Fona-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsirawin%2Fona-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirawin%2Fona-visualization/lists"}