8 ms·

Visualizing Git Concepts with D3

265 points by gilad 6y ago

ghevshoo 6y ago
Don’t miss the awesome “zen mode”. https://onlywei.github.io/explain-git-with-d3/#zen https://onlywei.github.io/explain-git-with-d3/#zen This the the best tool I’ve found to demonstrate to people, how commits that no longer appear in your history due to rebase or amend etc, are still there in your repository.
- Bishonen88 6y ago
  Zen mode works ~1 out of 3 tries. The other 2, it doesn't render anything other than the top part. Seems a hard refresh (command+shift+r) does the trick on chrome
- Amorymeltzer 6y ago
  I use rebase a lot and consider myself quite comfortable with it, but even for me I find this hugely helpful in visualizing what actually happens.
kevsim 6y ago
This is cool! For anyone wishing to learn why git is the way it is, I always recommend reading Git From the Bottom Up [0]. I don't consider myself a git guru, but I found this to be a really great read to understand the underlying concepts. 0: https://jwiegley.github.io/git-from-the-bottom-up/ https://jwiegley.github.io/git-from-the-bottom-up/
- gilad 6y ago
  Pls consider submitting the link above as a standalone HN item, it’s great
stinos 6y ago
Sounds vaguely familiar, and indeed I had bokmarked a site which did this exactly (just more elaborate, IIRC was built as a complete tutorial). Site (https://news.ycombinator.com/item?id=7450528 https://news.ycombinator.com/item?id=7450528) is dead now unfortunately, would have been good to get inspiration from. https://learngitbranching.js.org https://learngitbranching.js.org is still alive though.
- cinntaile 6y ago
  It's the same guy so that probably explains why it looks familiar. According to the commits in this repo the website you refer to was the same content, only slightly delayed compared to the github page. https://github.com/onlywei/explain-git-with-d3/commit/93fe6261032895ca1a07f5635cee6de94a77d57a https://github.com/onlywei/explain-git-with-d3/commit/93fe62...
maccard 6y ago
Afraid this just doesn't work for me on FF 82.0.2 on windows 10
- fortydegrees 6y ago
  Neither for FF 81.0.1 on macOS Catalina
- arthurmorgan 6y ago
  It worked for me after reloading and turning off uBlock. Maybe you also need to reload a few times.
  - solarkraft 6y ago
    From my little testing it seems like uBlock doesn't make a difference (shows 0 blocked elements) and it's really the reloading that does the trick. It seems to switch between working and not working every few seconds. Edit: I just tested a bit more and last time the non-working period was a good minute. I'll stop DoSing now.
- stjohnswarts 6y ago
  Probably one of your extensions blocking it. Turn off stuff like ublock and privacy badger and reload. I tried on Mac Firefox and it does indeed fail in even safe mode.
DataCrayon 6y ago
I like it! For those interested, I'm working on a D3 book on how to create unique visualisations with D3 https://datacrayon.com/shop/product/visualisation-with-d3/ https://datacrayon.com/shop/product/visualisation-with-d3/
- deleted 6y ago
  [deleted]
crispyambulance 6y ago
This is nice. I wish it existed years ago. Since the git commandline isn't ever going to be anything but insane and confusing, it really helps to be able to visualize what's going on. I think a sizeable portion of developers reason about their work graphically, even though their work appears textual. Being able to do this successfully demands an iron-clad understanding the tools, and/or tools which map neatly and consistently to concepts. The concepts behind git operations aren't hard. It's the incoherent commands that make people miserable, confused and mistake-prone. Git operations become crystal clear when represented graphically.
- fwip 6y ago
  The last commit was 3 years ago, so, it did. :) It would be awesome if somebody wanted to update this with the newer, more ergonomic git commands. (Like `git switch`).
jvilalta 6y ago
Nice, thanks for putting this together.
adkadskhj 6y ago
Somewhat of an aside, has anyone seen a way to visualize this type of graph without javascript? I'm looking to visualize hundreds of graph relationships and am hoping to not use JS. Admittedly though this example looks fairly performant, all the other ones i've seen are super laggy. Ultimately i think i just want to find a decent way to use CSS to replicate this style - but i've not seen any CSS gurus manage to produce that. Though, WebGL might be the best way regardless.
- zests 6y ago
  How insane are you? Old me would have been able to do this in LaTeX.
- daanluttik 6y ago
  You can do a lot with Graphviz it had bindings for many libraries.
- jcranmer 6y ago
  The graphviz tools, also known by dot (the most well-known tool), are a good way of visualizing smallish graphs, up to a few thousand nodes. Although do note that graph layout tends to be heavily dependent on what kind of graph you actually want to visualize; an algorithm that works well for one type of graph may look atrocious for other kinds of graphs. The algorithm used by dot (Sugiyama layout) works well for trees or any other graph where the structure is well-approximated by a tree. Control-flow graphs are the prototypical example of the latter (being the use case dot was explicitly designed for), but the VCS commit graph is also going to fit in well in this model. If you have a graph which has many more cycles in it, or has a crisscrossing connectivity pattern like a hypercube, the resulting layout from dot is going to be a giant ball of twine.
  - adkadskhj 6y ago
    Interesting. In case you're curious: The graph is git-like structure, but a tree. Trees of close-to-b-trees specifically, where each (key) value can point to another tree. There's really no limit to how wide these are, or how many connected trees there are - so i'll have to put artificial visualization limits on this. Still, i'd like to be able to view large trees of trees, with thousands of nodes in a performant manner. Most demos i've seen on JS libraries have been laggy with just a handful of nodes - but they're also trying to do fancy animations/etc by default. Hopefully i can hook up D3 with some minimal effort - or perhaps render it in a game library. /shrug
dionian 6y ago
this is amazing, i learned a lot about git from a similar, non-interactive talk,. this is much better one suggestion, let user hit up arrow to auto-type suggested command
Noumenon72 6y ago
This is why I refuse to use Git from the command line -- it all makes perfect sense visually. Why mess around with hashes when you could just be clicking on the commit you want in a GUI and telling it to move?
- stinos 6y ago
  Because it's really hard to automate that, just to give one example?
geongeorgek 6y ago
Thank you this is what I was missing last month when I took a git workshop. Amazing work!
_genesis 6y ago
I have the same idea for a practice project :) Also, because I love git and want to help people get better grasp of it.

265 points by gilad 6y ago

Don’t miss the awesome “zen mode”. https://onlywei.github.io/explain-git-with-d3/#zen https://onlywei.github.io/explain-git-with-d3/#zen This the the best tool I’ve found to demonstrate to people, how commits that no longer appear in your history due to rebase or amend etc, are still there in your repository.

Bishonen88 6y ago
Zen mode works ~1 out of 3 tries. The other 2, it doesn't render anything other than the top part. Seems a hard refresh (command+shift+r) does the trick on chrome
Amorymeltzer 6y ago
I use rebase a lot and consider myself quite comfortable with it, but even for me I find this hugely helpful in visualizing what actually happens.

kevsim 6y ago

This is cool! For anyone wishing to learn why git is the way it is, I always recommend reading Git From the Bottom Up [0]. I don't consider myself a git guru, but I found this to be a really great read to understand the underlying concepts. 0: https://jwiegley.github.io/git-from-the-bottom-up/ https://jwiegley.github.io/git-from-the-bottom-up/

gilad 6y ago
Pls consider submitting the link above as a standalone HN item, it’s great

stinos 6y ago

Sounds vaguely familiar, and indeed I had bokmarked a site which did this exactly (just more elaborate, IIRC was built as a complete tutorial). Site (https://news.ycombinator.com/item?id=7450528 https://news.ycombinator.com/item?id=7450528) is dead now unfortunately, would have been good to get inspiration from. https://learngitbranching.js.org https://learngitbranching.js.org is still alive though.

cinntaile 6y ago
It's the same guy so that probably explains why it looks familiar. According to the commits in this repo the website you refer to was the same content, only slightly delayed compared to the github page. https://github.com/onlywei/explain-git-with-d3/commit/93fe6261032895ca1a07f5635cee6de94a77d57a https://github.com/onlywei/explain-git-with-d3/commit/93fe62...

maccard 6y ago

Afraid this just doesn't work for me on FF 82.0.2 on windows 10

fortydegrees 6y ago
Neither for FF 81.0.1 on macOS Catalina
arthurmorgan 6y ago
It worked for me after reloading and turning off uBlock. Maybe you also need to reload a few times.
- solarkraft 6y ago
  From my little testing it seems like uBlock doesn't make a difference (shows 0 blocked elements) and it's really the reloading that does the trick. It seems to switch between working and not working every few seconds. Edit: I just tested a bit more and last time the non-working period was a good minute. I'll stop DoSing now.
stjohnswarts 6y ago
Probably one of your extensions blocking it. Turn off stuff like ublock and privacy badger and reload. I tried on Mac Firefox and it does indeed fail in even safe mode.

DataCrayon 6y ago

I like it! For those interested, I'm working on a D3 book on how to create unique visualisations with D3 https://datacrayon.com/shop/product/visualisation-with-d3/ https://datacrayon.com/shop/product/visualisation-with-d3/

deleted 6y ago
[deleted]

crispyambulance 6y ago

This is nice. I wish it existed years ago. Since the git commandline isn't ever going to be anything but insane and confusing, it really helps to be able to visualize what's going on. I think a sizeable portion of developers reason about their work graphically, even though their work appears textual. Being able to do this successfully demands an iron-clad understanding the tools, and/or tools which map neatly and consistently to concepts. The concepts behind git operations aren't hard. It's the incoherent commands that make people miserable, confused and mistake-prone. Git operations become crystal clear when represented graphically.

fwip 6y ago
The last commit was 3 years ago, so, it did. :) It would be awesome if somebody wanted to update this with the newer, more ergonomic git commands. (Like `git switch`).

jvilalta 6y ago

Nice, thanks for putting this together.

adkadskhj 6y ago

Somewhat of an aside, has anyone seen a way to visualize this type of graph without javascript? I'm looking to visualize hundreds of graph relationships and am hoping to not use JS. Admittedly though this example looks fairly performant, all the other ones i've seen are super laggy. Ultimately i think i just want to find a decent way to use CSS to replicate this style - but i've not seen any CSS gurus manage to produce that. Though, WebGL might be the best way regardless.

zests 6y ago
How insane are you? Old me would have been able to do this in LaTeX.
daanluttik 6y ago
You can do a lot with Graphviz it had bindings for many libraries.
jcranmer 6y ago
The graphviz tools, also known by dot (the most well-known tool), are a good way of visualizing smallish graphs, up to a few thousand nodes. Although do note that graph layout tends to be heavily dependent on what kind of graph you actually want to visualize; an algorithm that works well for one type of graph may look atrocious for other kinds of graphs. The algorithm used by dot (Sugiyama layout) works well for trees or any other graph where the structure is well-approximated by a tree. Control-flow graphs are the prototypical example of the latter (being the use case dot was explicitly designed for), but the VCS commit graph is also going to fit in well in this model. If you have a graph which has many more cycles in it, or has a crisscrossing connectivity pattern like a hypercube, the resulting layout from dot is going to be a giant ball of twine.
- adkadskhj 6y ago
  Interesting. In case you're curious: The graph is git-like structure, but a tree. Trees of close-to-b-trees specifically, where each (key) value can point to another tree. There's really no limit to how wide these are, or how many connected trees there are - so i'll have to put artificial visualization limits on this. Still, i'd like to be able to view large trees of trees, with thousands of nodes in a performant manner. Most demos i've seen on JS libraries have been laggy with just a handful of nodes - but they're also trying to do fancy animations/etc by default. Hopefully i can hook up D3 with some minimal effort - or perhaps render it in a game library. /shrug

dionian 6y ago

this is amazing, i learned a lot about git from a similar, non-interactive talk,. this is much better one suggestion, let user hit up arrow to auto-type suggested command

Noumenon72 6y ago

This is why I refuse to use Git from the command line -- it all makes perfect sense visually. Why mess around with hashes when you could just be clicking on the commit you want in a GUI and telling it to move?

stinos 6y ago
Because it's really hard to automate that, just to give one example?

geongeorgek 6y ago

Thank you this is what I was missing last month when I took a git workshop. Amazing work!

_genesis 6y ago

I have the same idea for a practice project :) Also, because I love git and want to help people get better grasp of it.