3D GITHUB VISUALIZER</3d github visualizer>
3D GITHUB VISUALIZER
Any GitHub profile rendered as a 3D universe: 60fps on 100+ repos.
60 fps
on 100+ repositories
~197 KB
gzipped bundle
WCAG AA
keyboard + screen reader
SPECIFICATIONS
| ROLE | SOLO BUILD |
|---|---|
| YEAR | 2025 |
| TYPE | WEB |
| STATUS | archive |
| STACK | react · three.js · webgl · github-api · vite · css |
| LINKS | [github ↗] |
| AVAILABILITY | in development |
“GitHub profiles are flat and don't show contribution patterns visually.”
An interactive WebGL application that transforms any GitHub profile into a living 3D universe.Each repository becomes a sphere, sized by stars, colored by language, positioned by age and activity.Supports real-time search, filtering, heatmaps, collaboration snapshots, and full keyboard/touch accessibility.
README.TXT: 3D GITHUB VISUALIZER (5 KB)[full readme →]
== WHAT IS THIS ==
An interactive WebGL application that transforms any GitHub profile into a living 3D universe. Each repository becomes a sphere, sized by stars, colored by language, positioned by age and activity. Supports real-time search, filtering, heatmaps, collaboration snapshots, and full keyboard/touch accessibility.
== </the problem> ==
GitHub profiles are flat and don't show contribution patterns visually. A list of repositories tells you what someone built but not how their work connects, evolves, or clusters by language and activity.
== </my approach> ==
Three.js 3D rendering of contribution data with a 3-axis positioning model that maps age, popularity, and fork activity to spatial coordinates. Prioritized performance with frustum culling, LOD scaling, and geometry caching to maintain 60fps on 100+ repositories.
== </the story> ==
I wanted to build something that made GitHub data feel tangible. Not just a list of repos, but a spatial experience you could explore. The 3D GitHub Visualizer takes any username, pulls their repositories from the GitHub REST API, and renders them as an interactive 3D scene in WebGL.
Each repository is an icosahedron sphere. Size scales logarithmically with star count. Colour maps to the primary language (17+ mappings from JavaScript yellow to Python blue). Position in 3D space encodes three dimensions of data: X-axis for repository age, Y-axis for popularity, Z-axis for fork activity. The result is a spatial fingerprint of someone's entire open-source presence.
Beyond the core visualisation, the app includes real-time username search with autocomplete and caching, language-based filtering with saveable filter sets, activity heatmaps across five dimensions, a collaboration system with shareable snapshots, and full data export to JSON, CSV, or screenshot. Everything is keyboard and touch accessible: WCAG AA compliant with focus trapping, screen reader support, and responsive design across all breakpoints.
== </architecture> ==
The frontend is React 18 with Vite, using Three.js for all 3D rendering. The Visualizer component manages the Three.js scene lifecycle: camera, renderer, lighting, and the animation loop running at 60fps. OrbitControls from three-stdlib handle camera interaction with smooth damping.
The positioning algorithm distributes repos across three axes using normalised metrics from the API data. Sphere radius uses a logarithmic scale to prevent high-star repos from dominating the scene. A colour service maps languages to consistent hex values across the entire visualisation.
Performance was a priority from day one. Frustum culling skips off-screen geometry for a 15-20fps boost. Level-of-detail scaling adjusts icosahedron segments based on repo count (detail=4 under 50 repos, detail=1 above 150). Material and geometry instances are cached and shared by colour and size class. Pre-allocated math objects (Frustum, Matrix4) are reused per frame to eliminate garbage collection pauses. The result is a stable 60fps on 100+ repositories.
The GitHub API layer includes a 30-minute cache TTL to avoid rate limiting, with debounced search and autocomplete. All state persists to localStorage: filter sets, user preferences, collaboration data, and dark/light theme choice.
== </key features> ==
Interactive 3D graph
Each repo is a sphere sized by stars, colored by language, positioned by age and activity. Explore the full scene with orbit controls.
Real-time GitHub API data
Live search with autocomplete, 30-minute cache TTL, and debounced queries to avoid rate limiting.
Custom camera controls
Full keyboard, mouse, and touch navigation. WCAG AA compliant with screen reader support.
Data export
Export to JSON, CSV, or screenshot. Shareable collaboration snapshots.
== </key decisions> ==
DECISION 01
Three.js over a higher-level library like React Three Fiber was deliberate. I wanted full control over the render loop, geometry instancing, and performance optimisations like frustum culling and LOD scaling. R3F adds a nice declarative API but the abstraction would have made the low-level optimisations harder to implement.
DECISION 02
The 3-axis positioning model was the core design decision. Mapping age, stars, and forks to spatial coordinates means you can instantly see patterns: clusters of old popular repos, isolated new experiments, heavily forked projects sitting deep on the Z-axis. It turns a flat list into something you can read at a glance.
DECISION 03
Accessibility was built in from the start, not bolted on. Every modal uses focus trapping and restoration. The entire scene is navigable by keyboard (Tab cycles repos, arrow keys rotate, +/- zooms). Screen readers get live region updates when repos are selected. Touch controls support pinch-zoom and swipe-rotate. The bundle ships at ~197KB gzipped.
== </what i learned> ==
Low-level Three.js gives more control than React Three Fiber when performance optimizations like frustum culling and geometry instancing are critical.
Spatial encoding of data (mapping metrics to x/y/z) makes patterns visible that are invisible in flat lists.
react · three.js · webgl · github-api · vite · css
archive