onlywei / explain-git-with-d3 Goto Github PK
View Code? Open in Web Editor NEWUse D3 to visualize simple git branching operations.
License: MIT License
Use D3 to visualize simple git branching operations.
License: MIT License
Hi. Have you considered adding a license for your code so other people can play with it?
If you want, you can use Github Pages since all the files are html/css/js. That way you won't have to upload to ftp each time?
I've been thinking it would be very cool to have a version of your app that just sits and watches a real git repo as you make commits, pulls, pushes, rebases, etc. and shows the effects visually. It would be especially useful when teaching people about git techniques, because it would provide instant feedback on what just happened to the repo DAG, and we'd still be able to look at git log
, etc. for more detailed information.
Do you know anything like this that exists, and/or do you think it's worth adding as a variant here?
Current text:
...snapshot will have the all of the work that has been done...
Change to:
...snapshot will have all of the work that has been done...
I did not found any way to export the graph to a SVG file. Is it possible? How hard would it be to add such feature (if missing)?
https://onlywei.github.io/explain-git-with-d3/#reset
This hard/soft/mixed link can be updated to this link: https://git-scm.com/book/en/v2/Git-Tools-Reset-Demystified
If the user quickly enters git commit
repeatedly, the rendering of the new commits appears to interrupt the rendering of past commits. It would be difficult to reproduce this behavior by typing the full command git commit
repeatedly. Instead, type git commit
once and then use the up arrow to select the previous command and press enter. Doing so in rapid succession results in something like the following:
The generated code:
<g class="commits">
<text class="id-label" x="590" y="114">d80cc13..</text>
<text class="id-label" x="500" y="114">930215d..</text>
<text class="id-label" x="410" y="114">78a3c03..</text>
<text class="id-label" x="320" y="114">9c30525..</text>
<text class="id-label" x="230" y="114">da24642..</text>
<text class="id-label" x="140" y="114">1fb4ff4..</text>
<text class="id-label" x="50" y="114">e137e9b..</text>
<circle id="ExplainGitCommit-e137e9b" class="commit" cx="50" cy="80" r="20"></circle>
<circle id="ExplainGitCommit-1fb4ff4" class="commit" cx="140" cy="80" r="20"></circle>
<circle id="ExplainGitCommit-da24642" class="commit" cx="230" cy="80" r="1.7241377279999999"></circle>
<circle id="ExplainGitCommit-9c30525" class="commit" cx="320" cy="80" r="3.093314208"></circle>
<circle id="ExplainGitCommit-78a3c03" class="commit" cx="410" cy="80" r="1.744826144"></circle>
<circle id="ExplainGitCommit-930215d" class="commit" cx="500" cy="80" r="2.4304032960000006"></circle>
<circle id="ExplainGitCommit-d80cc13" class="commit checked-out" cx="590" cy="80" r="20"></circle>
</g>
Notice the radius of each commit circle.
Finally, I wanted to say thank you for this extremely useful tool!
It seems like it's grey'ed out commit fd94e4e
I created in a branch and then merged. See the attached image below.
Unless I'm interpreting this wrong, it seems grey commits are prune-able (outside of the reflog which isn't visualized here), but this clearly has references in place from master. Excellent job otherwise! I'll likely use this to help explain the revision tree operations to people. Thank you.
To reproduce:
git checkout -b newbranch
git commit
git merge master
Expected Results: "Already up-to-date".
Actual Results: It generates a weird franken-commit:
This also happens with git rebase origin/master
on the Update Private Local Branch with Latest from Origin example:
In this instance, my-branch
originally pointed at dccdc4d...
, and the git rebase origin/master
command created two new commits even though my-branch
was already up-to-date.
If you decide to host on GitHub pages as shown in #2, you should also think about pointing all relevant js and css from local so that you can load via https.
Would love to see a standalone git visualizer tool that users could user on their repositories based on this visualization! If in the browser and hooks up to a github repository, even better! Consider it a feature request. (Anything like this already available?). The visualization scheme here is nice.
When I prepare a sequence of GIT commands for the lesson I put it to the Google Doc which automatically changes the first letter to capital one. In the terminal, command starting with uppercase is not a problem.
I would imagine this to include adding specific url fragment at the end of an url and parsing it at page load to initialize the specific example.
What would be even better is to be able to make my own custom examples. It would include serializing the current commit and origin data to json, converting it to base64 and add it to an url fragment or parameter.
This site is already pretty useful for explaining git concepts. Even laymen can digest most of what is happening. Since I plan to use it in presentations, loading an example instantly would be great.
starting with http://onlywei.github.io/explain-git-with-d3/#fetchrebase:
git fetch
Fetched 3 commits on master.
git rebase master
git rebase my-branch
Already up-to-date.
git checkout master
git checkout master
git commit
git rebase origin/master
git checkout my-branch
git commit
git rebase master
git checkout dccdc4d
git rebase my-branch
Cannot find commit: null
git checkout -b new
null is not an object (evaluating 'this.getCommit('HEAD').tags')
In http://onlywei.github.io/explain-git-with-d3/#freeplay:
Do whatever you want in this free playground.
$ git checkout HEAD
$ git commit
$ git commit
# generated hash: d525e9e...
$ git checkout master
$ git checkout -b branch1
$ git commit
$ git commit
git checkout d525e9e
$ git merge branch1
Not a good idea to make commits while in a detached HEAD state.
I thought I was allowed to do anything here? 😄
This would make the git checkout
example clearer, when you git checkout bb92e0e
like it suggests. Right now the only difference from git checkout master
is the “Current Branch” text at the top left of the visualization, which is easily missed.
This would also make the git checkout -b
example clearer. If you git checkout -b foo
and git checkout -b bar
, it looks like HEAD
is just another branch, but colored green because it’s the most important.
It could look something like this:
╭────╮
--│ │
╰────╯
bb92e0e…
[master] ← [HEAD]
[tested]
╭────╮
--│ │
╰────╯ ↖︎
bb92e0e… [HEAD]
[master]
[tested]
hi all
thank you for this wonderful tool. it's amazing. it's helped me understand git.
chrs
Pop up modal window with list of supported commands
Hi there, not a real issue but couldn't find another way to contact you.
This is pretty cool and I have been meaning to do sort of this for some time now. I even registered a domain for it: simgity.com (a simulator for git) and I'd happily donate it to you if you want.
hey,
just discovered your project via a friend. Looks promising!
Reading the readme, I figured out http://www.wei-wang.com/ExplainGitWithD3/
does not work, whereas the other url you mention in your update seems to work. Maybe you should consider deleting the first url in the readme?
best
Arnaud
On the git merge example, enter the following commands
git checkout dev
git merge master
git checkout master
git merge --no-ff dev
This results in the error branchStartCommit is null
.
On osx and windows, head
is the same as HEAD
.
And as of git 1.8.5, @
is also the same.
Would be great to have a support for git rebase --onto
.
What an awesome learning tool! ❤️
I have a fork going at https://github.com/JakeGinnivan/explain-git-with-d3 being hosted at http://jake.ginnivan.net/explain-git-with-d3/ which has a bunch of extra features like:
Hopefully this stuff gets merged into this repo eventually, until then feel free to submit pull requests to my fork and I will review/merge and update my hosted version
Would be useful when explaining GitFlow
I assume it thinks it's a remote. A workaround is to use feature-branch naming instead
In a fresh session in the playground:
$ git reset --hard HEAD^
newLoc.tags is undefined
For example, git branch -a
creates a branch called "-a" instead of listing all of the branches or saying "I don't understand that".
Right now it doesn't look like detached head is updated.
Is there a way to exit Zen mode (without refreshing the browser)? If so, I haven't been able to figure it out.
In the git checkout
example, I tried to type git checkout bb92
to check out the commit labeled “bb92e0e…” on the graph. I got the error “Cannot find commit: bb92”. I had to type the full 7-character name to perform the checkout
command.
Abbreviated commits hashes should work, to save the user typing when exploring Git. The command line should only display an error if the hash is ambiguous, like “Ambiguous abbreviated ref: e”, or if no commit begins with that prefix, like “No such ref: 123”.
The code that identifies a ref given its name is getCommit
in historyview.js
.
try the following:
git commit
git fetch
git merge origin/master
git push
after the push, the branch origin/master
has not been updated from its position got after the fetch, which is not consistent with how git actually works (it should end up on the same commit as master).
HEAD~n
(or more generally <rev>~n
) refers to the n-th generation ancestor (see git help gitrevision
).
When we play with your interface, and add many object on tree view, you should show scrollbars if content is more larger than the container
I cannot commit to branches with the /
character, and I assume there may be other valid git branch names with special characters that might fail in this app.
git checkout -b feat/a
HEAD
points to the appropriate commitgit commit
Not a good idea to make commits while in a detached HEAD state.
git checkout -b feat-b
HEAD
points to appropriate commitgit commit
HEAD
follows; all as expectedI've seen many orgs that use /
in branch names for things like release/9.5
, bug/PROD-1234
, feat/SOME-9876
. Would be nice to allow /
in the name and maybe investigate other valid special characters in branch names and allow them.
@maya did some very cool work on the style of the page: https://github.com/maya/explain-git-with-d3
I changed some text to make it more accessible to a git novice.
If you're open to it, I'd suggest renaming the repo from "explain-git-with-d3" -> "understanding-git-visually". The difference being that it shifts the subject of the project from the creators and the tools that you used to the person learning git and what value this tool brings them.
PS Very cool project! Hope this helps!
Shouldn't the arrows between commits be pointing in the opposite direction? i.e., The arrow from the first commit should point to the 2nd commit. The 2nd commit should merge to the 3rd.
And during a merge, the arrow should point from the source branch to the target branch.
Or am I completely misunderstanding something?
A ZenMode would be great, I think this would be a great presentation tool. Zen mode will get rid of the stuff around the command line and viz
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.