├── images └── prompt.gif ├── README.md ├── LICENSE.md ├── memtest.html ├── js ├── main.js ├── explaingit.js ├── controlbox.js └── historyview.js ├── css └── explaingit.css └── index.html /images/prompt.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlywei/explain-git-with-d3/HEAD/images/prompt.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | explain-git-with-d3 2 | =================== 3 | 4 | Use D3 to visualize simple git branching operations. 5 | 6 | This simple project is designed to help people understand some basic git concepts visually. 7 | 8 | This is my first attempt at using both SVG and D3. I hope it is helpful to you. 9 | 10 | The page can be accessed via: http://onlywei.github.io/explain-git-with-d3/ 11 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Wei Wang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /memtest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |This page exists to help me find any memory leaks that may happen.
11 | 12 |15 | Create and destroy many git history views and control boxes to find memory leaks. 16 |
17 |
16 |
17 | 22 | This website is designed to help you understand some basic git concepts visually. 23 | This is my first attempt at using both SVG and D3. I hope it is helpful to you. 24 |
25 |26 | Adding/staging your files for commit will not be covered by this site. In all sandbox playgrounds 27 | on this site, just pretend that you always have files staged and ready to commit at all times. 28 | If you need a refresher on how to add or stage files for commit, please read 29 | Git Basics. 30 |
31 |32 | Sandboxes are split by specific git commands, listed below. 33 |
34 |71 | We are going to skip instructing you on how to add your files for commit in this explanation. 72 | Let's assume you already know how to do that. If you don't, go read some other tutorials. 73 |
74 |75 | Pretend that you already have your files staged for commit and enter git commit 76 | as many times as you like in the terminal box. 77 |
78 | 79 |82 | git tag name will create a new tag named "name". 83 | Creating tags just creates a new tag pointing to the currently checked out commit. 84 |
85 |86 | Tags can be deleted using the command git tag -d name (coming soon). 87 |
88 |89 | Type git commit and git tag commands 90 | to your hearts desire until you understand this concept. 91 |
92 | 93 |96 | git branch name will create a new branch named "name". 97 | Creating branches just creates a new tag pointing to the currently checked out commit. 98 |
99 |100 | Branches can be deleted using the command git branch -d name. 101 |
102 |103 | Type git commit and git branch commands 104 | to your hearts desire until you understand this concept. 105 |
106 | 107 |110 | git checkout has many uses, 111 | but the main one is to switch between branches. 112 | For example, to switch from master branch to dev branch, 113 | I would type git checkout dev. 114 | After that, if I do a git commit, notice where it goes. Try it. 115 |
116 |117 | In addition to checking out branches, you can also checkout individual commits. Try it. 118 | Make a new commit and then type git checkout bb92e0e 119 | and see what happens. 120 |
121 |122 | Type git commit, git branch, 123 | and git checkout commands to your hearts desire 124 | until you understand this concept. 125 |
126 | 127 |130 | You can combine git branch and git checkout 131 | into a single command by typing git checkout -b branchname. 132 | This will create the branch if it does not already exist and immediately check it out. 133 |
134 | 135 |138 | git reset will move HEAD and the current branch back to wherever 139 | you specify, abandoning any commits that may be left behind. This is useful to undo a commit 140 | that you no longer need. 141 |
142 |143 | This command is normally used with one of three flags: "--soft", "--mixed", and "--hard". 144 | The soft and mixed flags deal with what to do with the work that was inside the commit after 145 | you reset, and you can read about it here. 146 | Since this visualization cannot graphically display that work, only the "--hard" flag will work 147 | on this site. 148 |
149 |150 | The ref "HEAD^" is usually used together with this command. "HEAD^" means "the commit right 151 | before HEAD. "HEAD^^" means "two commits before HEAD", and so on. 152 |
153 |154 | Note that you must never use git reset to abandon commits 155 | that have already been pushed and merged into the origin. This can cause your local repository 156 | to become out of sync with the origin. Don't do it unless you really know what you're doing. 157 |
158 | 159 |162 | To undo commits that have already been pushed and shared with the team, we cannot use the 163 | git reset command. Instead, we have to use git revert. 164 |
165 |166 | git revert will create a new commit that will undo all of the work that 167 | was done in the commit you want to revert. 168 |
169 | 170 |173 | git merge will create a new commit with two parents. The resulting 174 | commit snapshot will have the all of the work that has been done in both branches. 175 |
176 |177 | If there was no divergence between the two commits, git will do a "fast-forward" method merge. 178 | To see this happen, checkout the 'ff' branch and then type git merge dev. 179 |
180 | 181 |184 | git rebase will take the commits on this branch and "move" them so that their 185 | new "base" is at the point you specify. 186 |
187 |188 | You should pay close attention to the commit IDs of the circles as they move when you do this exercise. 189 |
190 |191 | The reason I put "move" in quotations because this process actually generates brand new commits with 192 | completely different IDs than the old commits, and leaves the old commits where they were. For this reason, 193 | you never want to rebase commits that have already been shared with the team you are working with. 194 |
195 | 196 |199 | git fetch will update all of the "remote tracking branches" in your local repository. 200 | Remote tracking branches are tagged in grey. 201 |
202 | 203 |206 | A git pull is a two step process that first does a git fetch, 207 | and then does a git merge of the remote tracking branch associated with your current branch. 208 | If you have no current branch, the process will stop after fetching. 209 |
210 |211 | If the argument "--rebase" was given by typing git pull --rebase, the second step of 212 | pull process will be a rebase instead of a merge. This can be set to the default behavior by configuration by typing: 213 | git config branch.BRANCHNAME.rebase true. 214 |
215 | 216 |219 | A git push will find the commits you have on your local branch that the corresponding branch 220 | on the origin server does not have, and send them to the remote repository. 221 |
222 |223 | By default, all pushes must cause a fast-forward merge on the remote repository. If there is any divergence between 224 | your local branch and the remote branch, your push will be rejected. In this scenario, you need to pull first and then 225 | you will be able to push again. 226 |
227 | 228 |231 | One simple example of the use of git reset is to completely restore your local repository 232 | state to that of the origin. 233 | You can do so by typing git reset origin/master. 234 |
235 |236 | Note that this won't delete untracked files, you will have to delete those separately with 237 | the command git clean -df. 238 |
239 | 240 |243 | Below is a situation in which you are working in a local branch that is all your own. You want to receive the latest code 244 | from the origin server's master branch. To update your local branch, you can do it without having to switch branches! 245 |
246 |247 | First do a git fetch, then type git rebase origin/master! 248 |
249 | 250 |253 | git branch -d is used to delete branches. 254 | I have pre-created a bunch of branches for you to delete in the playground below. 255 | Have at it. 256 |
257 | 258 |261 | Do whatever you want in this free playground. 262 |
263 | 264 |Below I have created some specific real-world scenarios that I feel are quite common and useful.
270 |