TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Visualizing Git Concepts with D3

265 pointsby giladover 4 years ago

12 comments

kevsimover 4 years ago
This is cool!<p>For anyone wishing to learn why git is the way it is, I always recommend reading Git From the Bottom Up [0]. I don&#x27;t consider myself a git guru, but I found this to be a really great read to understand the underlying concepts.<p>0: <a href="https:&#x2F;&#x2F;jwiegley.github.io&#x2F;git-from-the-bottom-up&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jwiegley.github.io&#x2F;git-from-the-bottom-up&#x2F;</a>
评论 #24961070 未加载
crispyambulanceover 4 years ago
This is nice. I wish it existed years ago.<p>Since the git commandline isn&#x27;t ever going to be anything but insane and confusing, it really helps to be able to visualize what&#x27;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&#x2F;or tools which map neatly and consistently to concepts.<p>The concepts behind git operations aren&#x27;t hard. It&#x27;s the incoherent commands that make people miserable, confused and mistake-prone. Git operations become crystal clear when represented graphically.
评论 #24961099 未加载
ghevshooover 4 years ago
Don’t miss the awesome “zen mode”.<p><a href="https:&#x2F;&#x2F;onlywei.github.io&#x2F;explain-git-with-d3&#x2F;#zen" rel="nofollow">https:&#x2F;&#x2F;onlywei.github.io&#x2F;explain-git-with-d3&#x2F;#zen</a><p>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.
评论 #24957983 未加载
评论 #24958908 未加载
stinosover 4 years 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 (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=7450528" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=7450528</a>) is dead now unfortunately, would have been good to get inspiration from. <a href="https:&#x2F;&#x2F;learngitbranching.js.org" rel="nofollow">https:&#x2F;&#x2F;learngitbranching.js.org</a> is still alive though.
评论 #24958579 未加载
DataCrayonover 4 years ago
I like it!<p>For those interested, I&#x27;m working on a D3 book on how to create unique visualisations with D3 <a href="https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;" rel="nofollow">https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;</a>
评论 #24959544 未加载
adkadskhjover 4 years ago
Somewhat of an aside, has anyone seen a way to visualize this type of graph without javascript? I&#x27;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&#x27;ve seen are super laggy.<p>Ultimately i think i just want to find a decent way to use CSS to replicate this style - but i&#x27;ve not seen any CSS gurus manage to produce that.<p>Though, WebGL might be the best way regardless.
评论 #24960448 未加载
评论 #24960084 未加载
评论 #24960129 未加载
Noumenon72over 4 years 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?
评论 #24961382 未加载
_genesisover 4 years 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.
geongeorgekover 4 years ago
Thank you this is what I was missing last month when I took a git workshop. Amazing work!
maccardover 4 years ago
Afraid this just doesn&#x27;t work for me on FF 82.0.2 on windows 10
评论 #24958699 未加载
评论 #24963121 未加载
评论 #24958689 未加载
dionianover 4 years ago
this is amazing, i learned a lot about git from a similar, non-interactive talk,. this is much better<p>one suggestion, let user hit up arrow to auto-type suggested command
jvilaltaover 4 years ago
Nice, thanks for putting this together.