Interactive force-directed graph of ALL your GitHub starred repositories with intelligent categorization, mobile-responsive design, and automatic updates
🔗 https://niranjanxprt.github.io/starred-repos-graph/
Click above to explore an interactive visualization of 958+ starred repositories with intelligent clustering, advanced filtering, mobile-responsive design, and real-time updates!
- Force-directed network graph showing all 958+ starred repositories as connected nodes
- Intelligent clustering with strategic positioning across 19 categories
- Dark professional theme optimized for long viewing sessions
- Click any node to instantly open the repository in GitHub
- Drag nodes around to explore relationships and reorganize
- Zoom and pan for detailed exploration of different areas
- Smart connections between related repositories within and across categories
Powered by advanced weighted scoring algorithm that analyzes repository names, descriptions, topics, and programming languages:
| Category | Count | Color | Description |
|---|---|---|---|
| 🤖 AI/ML | 247 (25.8%) | Purple | Machine Learning, LLMs, Transformers, Neural Networks |
| 🐍 Python | 112 (11.7%) | Yellow | Django, Flask, FastAPI, Data Science Tools |
| 🌐 Web Dev | 91 (9.5%) | Emerald | React, Next.js, Vue, Angular, Full-stack |
| 📚 Learning | 41 (4.3%) | Green | Tutorials, Courses, Educational Resources |
| 🚀 DevOps | 35 (3.7%) | Cyan | Docker, Kubernetes, CI/CD, GitOps |
| ☁️ Cloud | 31 (3.2%) | Amber | AWS, Azure, GCP, Infrastructure-as-Code |
| 📊 Data | 25 (2.6%) | Blue | Databases, ETL, Data Engineering |
| 🔧 MCP | 23 (2.4%) | Purple | Model Context Protocol, Claude Desktop |
| 🎨 UI/UX | 23 (2.4%) | Pink | Design Systems, Components, Animations |
| 🛠️ Tools | 22 (2.3%) | Gray | CLI Tools, IDEs, Productivity Apps |
| 📱 Mobile | 22 (2.3%) | Red | React Native, Flutter, iOS/Android |
| 🔒 Security | 18 (1.9%) | Dark Red | Authentication, Encryption, OAuth |
| 🔗 API | 10 (1.0%) | Violet | REST, GraphQL, SDKs, Microservices |
| 📡 Monitoring | 5 (0.5%) | Orange | Prometheus, Grafana, Observability |
| 🌐 Networking | 5 (0.5%) | Sky Blue | Network Programming, Protocols |
| 🎮 Game Dev | 4 (0.4%) | Orange | Unity, Unreal, Game Engines |
| 🧪 Testing | 4 (0.4%) | Lime | Jest, Pytest, Cypress, Test Automation |
| ₿ Blockchain | 3 (0.3%) | Gold | Ethereum, Web3, Smart Contracts |
| ⚙️ Other | 237 (24.7%) | Indigo | Uncategorized & Specialized |
Intelligent Scoring Features:
- Word boundary matching: Prevents false positives (e.g., "app" won't match "application")
- Multi-factor analysis: Considers name, description, topics, and programming language
- Weighted keywords: Strong (10pts), Medium (5pts), Weak (2pts) indicators
- Topic bonuses: Extra points for GitHub's curated topic tags
- Language boosts: Automatic scoring based on primary programming language
- Special case handling: Kubernetes+examples prioritizes DevOps over Learning
- Real-time search by repository name, description, owner, or language
- Category filtering - click legend items or category buttons to focus
- Language filtering - filter by programming language
- Star count filtering - view only popular repositories (1K+, 5K+, 10K+, 50K+)
- Visual feedback - filtered results update graph in real-time
- Reset functionality - clear all filters with Escape key
Fully optimized for mobile devices with:
- Collapsible navigation panels with hamburger-style toggles
- Touch-friendly controls with 44px minimum tap targets
- Smart tooltip positioning that adapts to viewport
- Landscape orientation support with optimized layouts
- Responsive breakpoints:
- Small phones (< 480px)
- Phones/tablets (480-767px)
- Tablets (768-1023px)
- Desktop (1024px+)
- Gesture support: Pinch-to-zoom, swipe, drag interactions
- Slide-in panels that don't block the graph view
- GitHub Actions workflow runs every 6 hours automatically
- Fetches ALL starred repositories via GitHub API with pagination
- Intelligent categorization using advanced weighted scoring
- Auto-deployment to GitHub Pages after each update
- Commit tracking - see update history in repository commits
- Zero maintenance - completely hands-off operation
- Zoom: Mouse wheel or trackpad pinch to zoom in/out
- Pan: Click and drag empty space to move around the graph
- Drag Nodes: Click and drag individual repositories to reposition
- Click to Open: Click any node to open the repository in GitHub
- Keyboard Shortcuts: Press
Escapeto reset all filters
- Open Filters: Tap the ⚙️ button (bottom-left) for search and filters
- Open Legend: Tap the 🎨 button (bottom-left) for category legend
- Close Panels: Tap ✕ button or tap outside the panel
- Touch Gestures: Pinch to zoom, drag to pan, tap nodes to open
- Landscape Mode: Rotate device for optimized horizontal layout
- Search Bar: Type to find repositories by name, description, or language
- Category Buttons: Click category filters or legend items to focus
- Language Filter: Filter by programming language
- Star Filters: Show only popular repositories with minimum star counts
- Reset: Press
Escapekey or use reset button to clear all filters
- Node Size: Larger nodes = more popular repositories (higher star count)
- Node Color: Each color represents a different category (see legend)
- Connections: Lines connect related repositories (same category/language)
- Positioning: Force-directed physics groups similar repositories together
- Clusters: Categories are positioned strategically for better organization
starred-repos-graph/
├── index.html # Main application interface with mobile-responsive CSS
├── app.js # Core D3.js visualization with intelligent categorization
├── scripts/
│ ├── fetch-data.js # Backend data fetcher with scoring algorithm
│ └── clean-data.js # Data quality validation and cleanup
├── data/
│ ├── repositories.json # Auto-generated repository dataset (958+ repos)
│ └── summary.json # Category and language statistics
├── .github/workflows/
│ └── update-data.yml # Scheduled automation (every 6 hours)
└── README.md # Documentation
- Frontend: Vanilla JavaScript + D3.js v7 (no frameworks needed)
- Visualization: D3.js force-directed graph with custom physics simulation
- Styling: Modern CSS with dark theme and mobile-responsive breakpoints
- Data Source: GitHub API (real-time repository data with pagination)
- Automation: GitHub Actions (scheduled data updates every 6 hours)
- Deployment: GitHub Pages (automatic deployment pipeline)
- Storage: JSON files (version-controlled repository data)
Categorization System:
- Weighted Scoring: Strong keywords (10pts), Medium (5pts), Weak (2pts)
- Word Boundary Matching: Uses regex
\bto prevent false positives - Topic Bonuses: +3-5 points for matching GitHub topics
- Language Boosts: +3-10 points based on programming language
- Minimum Threshold: Requires 5+ points to categorize
- Special Cases: Custom rules for edge cases (e.g., kubernetes+examples)
Physics Simulation:
- Custom force simulation with collision detection
- Category-based gravitational attraction for clustering
- Strategic positioning across 19 category locations
- Optimized for 958+ repositories with efficient rendering
- Total Repositories: 958+ (automatically counted)
- Programming Languages: 30+ (JavaScript, Python, TypeScript, Java, Go, Rust, etc.)
- Categories: 19 intelligent auto-categories (including Cloud, Monitoring, Testing, Networking)
- Update Frequency: Every 6 hours via GitHub Actions
- Data Freshness: Always current with your latest stars
- Most Popular Category: AI/ML (247 repositories, 25.8%)
- Fastest Growing: Cloud infrastructure and DevOps tools
- 🤖 AI/ML: 247 repositories (25.8%)
- ⚙️ Other: 237 repositories (24.7%)
- 🐍 Python: 112 repositories (11.7%)
- 🌐 Web Development: 91 repositories (9.5%)
- 📚 Learning: 41 repositories (4.3%)
- Fork this repository
- Update username in
.github/workflows/update-data.yml:GITHUB_USERNAME: 'YOUR-GITHUB-USERNAME' # Change this line
- Update username in
scripts/fetch-data.js:const USERNAME = process.env.GITHUB_USERNAME || 'YOUR-GITHUB-USERNAME';
- Enable GitHub Pages:
- Go to Settings → Pages
- Source: GitHub Actions
- Configure Actions permissions:
- Settings → Actions → General
- Workflow permissions: Read and write permissions
- Enable: Allow GitHub Actions to create and approve pull requests
- Run first update:
- Go to Actions tab → "Update Stars and Deploy to Pages" → "Run workflow"
# In .github/workflows/update-data.yml
schedule:
- cron: '0 */3 * * *' # Every 3 hours instead of 6// In app.js and scripts/fetch-data.js, modify the categories object
'my-category': {
strong: ['exact-framework-name', 'specific-tool'],
medium: ['general-term', 'category-keyword'],
weak: ['common-word']
}// In app.js, modify the categoryColors object
this.categoryColors = {
'my-category': '#FF6B6B', // Custom color
// ... existing colors
};The GitHub Actions workflow automatically:
- 🕐 Runs every 6 hours (00:00, 06:00, 12:00, 18:00 UTC)
- 📡 Fetches ALL starred repositories using GitHub API (handles pagination for 958+ repos)
- 🏷️ Categorizes each repository using intelligent weighted scoring
- 💾 Saves structured data to
data/repositories.json - 📝 Commits changes with timestamp and repository count
- 🚀 Auto-deploys updated visualization to GitHub Pages
From the app UI:
- Click the "🔄 Refresh Data" button in the header
- It opens the Actions page: "Update Stars and Deploy to Pages"
- Click "Run workflow" → "Run workflow"
- Within 2-3 minutes, Pages redeploys automatically
Using GitHub CLI:
gh workflow run update-data.yml --ref main# Generate data locally
GITHUB_USERNAME=your-username node scripts/fetch-data.js > data/repositories.json
# Serve statically like GitHub Pages
npx -y serve -l 4000 -s .
# Open http://localhost:4000- Full feature set with all controls and interactions
- Keyboard shortcuts (Escape to reset filters)
- Precise mouse interactions for detailed exploration
- Large screen optimization for better clustering visibility
- Touch-friendly interface with collapsible navigation panels
- Hamburger-style toggles for filters (⚙️) and legend (🎨)
- Smart tooltips that adjust position to stay within viewport
- Responsive layouts for portrait and landscape orientations
- Gesture support: Pinch-to-zoom, swipe, drag interactions
- 44px minimum tap targets for accessibility
- Optimized breakpoints for all screen sizes
- ✅ Chrome/Chromium (recommended)
- ✅ Firefox
- ✅ Safari (desktop and iOS)
- ✅ Edge
- ✅ Mobile browsers (Chrome Mobile, Safari iOS, Samsung Internet)
⚠️ Internet Explorer: Not supported
Solution:
- Wait 5-10 minutes after first deployment
- Check that GitHub Pages is set to "GitHub Actions" in Settings → Pages
- Verify the workflow completed successfully (green checkmark in Actions)
Solution:
- Look for ⚙️ and 🎨 buttons at bottom-left corner
- Ensure JavaScript is enabled in your browser
- Try refreshing the page
- Check browser console for errors
Solution:
- Click "All" button in category filters to reset
- Clear search box if you have text in it
- Press Escape key to reset all filters
- Try refreshing the page
Solution:
- GitHub allows 5,000 requests/hour with authentication
- The GITHUB_TOKEN is automatically provided by Actions
- If issues persist, check Actions logs for details
Solution:
- Use category filters to focus on specific types
- Try star count filters (10K+, 50K+) to see only popular repos
- Use search to find specific repositories
- Zoom in to see detailed areas, zoom out for overview
- On mobile, use collapsible panels to maximize graph space
{
"repositories": [
{
"id": 669879380,
"name": "LLMs-from-scratch",
"owner": "rasbt",
"fullName": "rasbt/LLMs-from-scratch",
"description": "Implement a ChatGPT-like LLM in PyTorch from scratch",
"url": "https://github.com/rasbt/LLMs-from-scratch",
"language": "Jupyter Notebook",
"stars": 73565,
"forks": 10699,
"category": "ai-ml",
"updatedAt": "2025-10-28T06:32:44.599Z",
"topics": ["machine-learning", "pytorch", "llm"]
}
],
"lastUpdated": "2025-10-28T06:32:44.599Z",
"totalCount": 958,
"categoryStats": {
"ai-ml": 247,
"python": 112,
"web-dev": 91
},
"languageStats": {
"JavaScript": 145,
"Python": 134,
"TypeScript": 89
}
}Update both app.js and scripts/fetch-data.js:
this.categories = {
'my-category': {
strong: ['exact-match', 'specific-framework'], // 10 points
medium: ['general-term', 'category-keyword'], // 5 points
weak: ['common-descriptor'] // 2 points
},
// ... existing categories
};Update app.js:
this.categoryColors = {
'my-category': '#YOUR-COLOR',
// ... other categories
};Modify .github/workflows/update-data.yml:
schedule:
- cron: '0 */2 * * *' # Every 2 hours
- cron: '0 8 * * *' # Daily at 8 AM UTC
- cron: '0 0 * * 0' # Weekly on Sunday- Repository Capacity: Up to 1,000 starred repositories (GitHub API limit)
- Load Time: 2-5 seconds for 958+ repositories
- Rendering: Optimized D3.js with efficient force simulation
- Memory Usage: ~80-120MB for full dataset in browser
- Mobile Performance: Optimized with efficient rendering and touch handling
- GitHub API: 5,000 requests/hour (authenticated via Actions)
- Repository Fetch: ~10 API calls for 958 repositories (100 per page)
- Rate Limiting: Built-in delays between API requests
- Caching: Data stored in repository to reduce API calls
MIT License - Feel free to use, modify, and distribute!
- Built with: D3.js by Mike Bostock
- Powered by: GitHub API and GitHub Actions
- Hosted on: GitHub Pages
- Enhanced by: Claude Code (AI-assisted development)
- Inspired by: The amazing open source community
If you find this project helpful:
- Give it a star ⭐ on GitHub
- Share it with other developers
- Contribute improvements
- Report issues or suggestions
- 🧠 Intelligent Categorization System: Advanced weighted scoring algorithm
- Word boundary matching to prevent false positives
- Multi-factor analysis (name, description, topics, language)
- Weighted keywords: Strong (10pts), Medium (5pts), Weak (2pts)
- Topic bonuses and language boosts
- Fixed misclassifications (kubernetes→devops, AWS→cloud)
- 🆕 New Categories: Cloud, Monitoring, Testing, Networking (19 total)
- 📊 Improved Distribution: AI/ML 43%→26%, DevOps 2%→4%, Cloud 0%→3%
- 🎨 Dark Professional Theme: Optimized background for better node visibility
- 📱 Mobile-Responsive Design: Complete mobile optimization
- Collapsible navigation panels with hamburger toggles
- Touch-friendly controls (44px minimum tap targets)
- Smart tooltip positioning
- Landscape orientation support
- Responsive breakpoints (480px, 768px, 1024px)
- 🔧 Backend Synchronization: Applied scoring to both frontend and data fetch script
- 🎨 Enhanced visualization with strategic category positioning
- 🐍 Fixed Python language filter
- 🔗 Improved clustering with intelligent repository connections
- 📊 Better node sizing and visual hierarchy
- 🎯 Enhanced tooltips with richer repository information
- 🤖 Complete GitHub Actions automation (every 6 hours)
- 📊 Smart categorization system with 15 categories
- 🔍 Advanced filtering (search, category, language, stars)
- 🎨 Modern glassmorphism UI
- 📱 Basic responsive layout
- 🌟 Initial release with D3.js force-directed graph
- 📁 Basic category organization
- 🔍 Simple search functionality
🌟 Explore the fascinating world of open source through interactive visualization!
Transform your GitHub stars into beautiful, intelligent insights with advanced categorization, mobile-responsive design, and automatic updates. 🚀
Live Demo: https://niranjanxprt.github.io/starred-repos-graph/