Visualizing Git Concepts with D3.js

#1

Post by sebg » Sat, Mar 22, 2014, 7:43 PM UTC

Visualizing Git Concepts with D3.js
wei-wang.com

Re: Visualizing Git Concepts with D3.js

#2

Post by specialk » Sat, Mar 22, 2014, 8:02 PM UTC

I see this as a great tool for teaching the basics of git. Definitely saving this for the next time I have to explain why branching is useful and how it works. Great tool.

Re: Visualizing Git Concepts with D3.js

#3

Post by allengeorge » Sat, Mar 22, 2014, 8:06 PM UTC

I thought this was pretty awesome :) Would be great if it were fleshed out a little more with more complex examples. Kudos!

Re: Visualizing Git Concepts with D3.js

#4

Post by pdq » Sat, Mar 22, 2014, 8:38 PM UTC

See also "Learn Git Branching": http://pcottle.github.io/learnGitBranching/?demo

Re: Visualizing Git Concepts with D3.js

#5

Post by jakejake » Sat, Mar 22, 2014, 8:40 PM UTC

This is fantastic. It's amazing how the right graphic can really clarify a somewhat tricky concept like merging.

Re: Visualizing Git Concepts with D3.js

#6

Post by lalos » Sat, Mar 22, 2014, 8:42 PM UTC

This is great for teaching git, a nice add-on to the tool would be to add command by command playback of custom scenarios and see them pan out. Also it would be interesting to grab tons of different history records from developers' shells and get common git patterns and play them back with this tool.

Re: Visualizing Git Concepts with D3.js

#7

Post by xtc » Sat, Mar 22, 2014, 8:48 PM UTC

This is great, thanks.

Re: Visualizing Git Concepts with D3.js

#8

Post by robbles » Sat, Mar 22, 2014, 8:54 PM UTC

This is really cool - I wish I'd had this for teaching git a few weeks ago.

FYI - it looks like branch creation is broken. Creating a branch and following with `git commit` gives the error "Not a good idea to make commits while in a detached HEAD state." It's not a detached HEAD, it's a branch.

Re: Visualizing Git Concepts with D3.js

#9

Post by thatnodeguy » Sat, Mar 22, 2014, 9:15 PM UTC

I absolutely love D3, it's what we've been seeking for a very long time and finally a decent product was created. Prepare to see this blow up and take over the web soon.

Re: Visualizing Git Concepts with D3.js

#10

Post by ColinDabritz » Sat, Mar 22, 2014, 9:22 PM UTC

thatnodeguy wrote: post #9

I absolutely love D3, it's what we've been seeking for a very long time and finally a decent product was created. Prepare to see this blow up and take over the web soon.

D3 already underlies quite a few popular visualization libraries. While you can use D3 directly, it's kind of a toolkit for creating visualizations, so it's often hiding 'behind the scenes' in libraries you already know and love.