Git City: Visualizing GitHub Contribution Data as 3D Architecture

What If Your GitHub Profile Was a Building in a City of Developers?

Git City is an experimental visualization platform that transforms GitHub profiles into architectural structures within a virtual skyline. The system uses real-time developer activity to generate building dimensions and lighting effects.

Why This Matters

GitHub metrics like commit graphs and repository counts often fail to convey the scale and depth of a developer’s impact in an intuitive way. While high activity doesn’t always equate to skill, Git City provides a gamified perspective that bridges the gap between raw data and visual storytelling, using modern web stacks like React Three Fiber to render interactive 3D environments.

Key Insights

• Contribution volume directly scales building height, while repository count determines the width of the structure.
• Lighting and glowing effects are triggered by project popularity and recent coding activity.
• The platform utilizes a tech stack consisting of Next.js, React, React Three Fiber (Three.js), TypeScript, and Supabase for real-time rendering and data management.
• A dedicated VS Code extension allows buildings to display live activity signals when a developer is actively writing code.
• The project serves as an experimental visualization tool rather than a performance ranking system, acknowledging that commit frequency varies by project type.

Practical Applications

• Use Case: Visualizing team contribution patterns in a virtual office environment using Three.js. Pitfall: Using activity volume as a proxy for quality, which ignores the complexity of individual commits.
• Use Case: Integrating VS Code extensions to provide real-time status updates in community platforms. Pitfall: Over-sharing activity signals that might compromise developer focus or privacy.

References:

• https://www.thegitcity.com/?ref=harshify
• https://dev.to/harshify/what-if-your-github-profile-was-a-building-in-a-city-of-developers-4jj2