When contributing to new GitHub projects, especially those which are relatively mature, it takes lots of time to understand the code base. Inspired by WinDirStat, a disk usage statistics viewer, the aim is to allow developers to quickly explore the structure of unfamiliar GitHub projects without having to trawl through web interfaces or clone the repository first.

all your rebase are belong to us

What it does

Provides an at-a-glance overview of the repository structure. Finer details can be explored via zooming and tooltips. It makes exploring large and complex projects a breeze.

Files are displayed as a directed graph, color coded based on file types, and sized accordingly to length of file.

How I built it

Data binding and wrangling along with drawing SVG components is handled with D3.js library. Requests to GitHub's API are made through jQuery AJAX.

Accomplishments that I'm proud of

I've made a functional tool that solves a real problem. And it looks great too.

What I learned

D3.js is a powerful library for data visualization.

What's next for Github Visualizer

  • Allows users to sign in via OAuth 2.0 to access private repos
  • Cross platform desktop application using Electron
  • Github integration

Built With

Share this project: