All three of us have interest in education at UC Berkeley, whether that be through teaching CS 61B (Data Structures) or spreading STEM education to local elementary and middle schools. Especially seeing the misunderstandings of some students upon entering CS 61B about Git, we believed that creating an interactive Git visualizer would enable students to understand more about the essential platform.

What it does

GitVis takes an existing Git repository and visually displays the progressions of commits over time. Hovering over each commit node reveals properties about the commit. In addition, clicking on a node merges the node with the HEAD branch. Lastly, using the tagging feature allows you to tag particular nodes with the tag of your choice.

How I built it

GitVis was built through parsing the .git directory of the git repository. We created algorithms to determine what branch a commit was on (in the case of merges, this proved challenging). In essence, we created a graph structure from the parsed .git directory information. From there, we used Dash and NetworkX to create a local hosted visualization and interactive environment for the git directory.

Challenges I ran into

Learning to build an interactive environment using HTML and Dash proved difficult as minute details make an enormous difference in end output. In addition, parsing merges in the .git directory information proved difficult alongside creating the general structure to send via CSV for interpretation by our data to visualization software.

Accomplishments that I'm proud of

We're proud of using a tool we're all familiar with and taking on a challenge that is completely new to us: building an interactive environment. We are also proud of being able to create a tool that, with further development, could actually be used to teach up and coming Git users

What I learned

We learned to create an interactive environment.

Built With

Share this project: