Visualize Your GitHub Profile as a 3D City
Ever feel like your GitHub profile is just a flat, static list of numbers and repositories? It tells a story, but maybe not in the most engaging way. What if you could walk through your coding history? That’s the idea behind Git City, a project that turns your GitHub data into a personal, explorable 3D metropolis.
It takes your commits, languages, and activity and maps them onto a digital cityscape. Your repositories become buildings, your activity shapes the skyline, and your contributions light up the streets. It’s a fresh, visual take on the developer profile we all know.
What It Does
Git City is an interactive 3D visualization tool. You plug in a GitHub username, and it fetches that user's public data. It then uses Three.js to construct a city where each building represents a repository. The building's height corresponds to the commit count, and the color indicates the primary programming language used. The city layout and lighting are generated based on your overall activity, creating a unique skyline for every developer.
Why It’s Cool
The clever part is how it translates abstract data into a tangible, spatial metaphor. A bustling city center represents a period of high activity, while quieter districts might align with less active times. It’s not just a chart; it’s an environment you can navigate with your keyboard. This makes it a fantastic tool for getting a quick, intuitive sense of a developer's projects and habits at a glance, or just for creating a fun, shareable representation of your own work.
It’s built with a straightforward tech stack (JavaScript, Three.js, the GitHub API) that many web developers will find familiar, which also makes the project itself an interesting codebase to explore.
How to Try It
The easiest way to see it in action is to check out the live demo. You can find it hosted directly via GitHub Pages:
- Go to the Git City GitHub repository: https://github.com/srizzon/git-city
- In the README, look for the link to the GitHub Pages site (or you can often find it in the repository's "Environments" section).
- On the live page, simply enter any public GitHub username into the input field and hit go.
Your city will generate in your browser. Use your mouse to look around and the WASD keys to fly through your personal code metropolis.
Final Thoughts
Git City is one of those projects that blends utility with pure developer whimsy. It’s a creative alternative to the standard GitHub contribution graph and a neat way to visually compare coding footprints with friends. While it might not replace your resume, it’s a compelling experiment in data visualization that reminds us our code tells a story—and sometimes that story looks best from a bird's-eye view, flying between skyscrapers built on commits.
Found this interesting? Follow @githubprojects for more cool tools and projects from the GitHub community.
Repository: https://github.com/srizzon/git-city