├── LICENSE.md ├── README.md ├── css └── explaingit.css ├── images └── prompt.gif ├── index.html ├── js ├── controlbox.js ├── explaingit.js ├── historyview.js └── main.js └── memtest.html /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /css/explaingit.css: -------------------------------------------------------------------------------- 1 | /* styles */ 2 | 3 | body, html { 4 | height: 100%; 5 | } 6 | 7 | .intro p, .concept-container p { 8 | padding-top: 10px; 9 | } 10 | 11 | a.openswitch { 12 | display: block; 13 | } 14 | 15 | a.openswitch.selected { 16 | font-weight: bold; 17 | } 18 | 19 | .command-list, .example-list { 20 | margin-top: 10px; 21 | margin-bottom: 10px; 22 | padding: 10px 0; 23 | border-bottom: 2px dashed #888; 24 | border-top: 2px dashed #888; 25 | background-color: #EEE; 26 | } 27 | 28 | .command-list a.openswitch { 29 | font-family: Courier New; 30 | } 31 | 32 | .concept-area { 33 | padding-bottom: 20px; 34 | } 35 | 36 | .concept-container { 37 | display: none; 38 | } 39 | 40 | .playground-container { 41 | margin-top: 20px; 42 | position: relative; 43 | } 44 | 45 | span.cmd { 46 | background-color: #222222; 47 | color: #FFFFFF; 48 | font-family: Courier New; 49 | padding: 0 0.2em; 50 | } 51 | 52 | .svg-container { 53 | margin-left:250px; 54 | display: block; 55 | overflow: auto; 56 | border: 1px dotted #AAA; 57 | } 58 | 59 | .svg-container.remote-container { 60 | position: absolute; 61 | top: 0px; right: 0px; 62 | background-color: #EFF1FF; 63 | border-left: 1px dotted #AAA; 64 | border-bottom: 1px dotted #AAA; 65 | } 66 | 67 | #ExplainGitZen-Container { 68 | position: absolute; 69 | top: 0; bottom: 0; right: 0; left: 0; 70 | } 71 | 72 | #ExplainGitZen-Container .svg-container { 73 | display: inline-block; 74 | border: 1px dotted #AAA; 75 | position: absolute; 76 | top: 0; bottom: 0; right: 0; left: 250px; 77 | margin-left: 0; 78 | } 79 | 80 | #ExplainGitZen-Container .svg-container.remote-container { 81 | position: absolute; 82 | top: 0px; right: 0px; left: auto; bottom: auto; 83 | background-color: #EFF1FF; 84 | border-left: 1px dotted #AAA; 85 | border-bottom: 1px dotted #AAA; 86 | } 87 | 88 | #ExplainGitZen-Container .playground-container { 89 | position: absolute; 90 | top: 0; bottom: 20px; right: 20px; left: 20px; 91 | } 92 | 93 | .remote-name-display { 94 | font-weight: bold; 95 | text-align: right; 96 | } 97 | 98 | .control-box { 99 | display: inline-block; 100 | position: absolute; 101 | top: 0px; bottom: 0; 102 | width: 250px; 103 | vertical-align: bottom; 104 | background-color: #000; 105 | border: 1px dotted #AAA; 106 | } 107 | 108 | .control-box button { 109 | font-family: Courier New; 110 | font-size: 12px; 111 | margin-right: 5px; 112 | margin-bottom: 5px; 113 | } 114 | 115 | .control-box .log { 116 | overflow-y: auto; 117 | position: absolute; 118 | top: 0px; bottom: 20px; left: 0; right: 0; 119 | border-bottom: 1px solid #AAA; 120 | } 121 | 122 | .control-box .log, 123 | .control-box input[type="text"] { 124 | font-family: Courier New; 125 | font-size: 14px; 126 | } 127 | 128 | .control-box .log .command-entry { 129 | padding-left: 15px; 130 | color: #FFF; 131 | line-height: 14px; 132 | background: url(../images/prompt.gif) no-repeat left center transparent; 133 | } 134 | 135 | .control-box input[type="text"] { 136 | position: absolute; 137 | bottom: 0; 138 | padding-left: 15px; 139 | color: #FFF; 140 | line-height: 14px; 141 | background: url(../images/prompt.gif) no-repeat left center transparent; 142 | } 143 | 144 | .control-box .log .info, 145 | .control-box .log .error { 146 | font-size: 12px; 147 | padding: 5px; 148 | } 149 | 150 | .control-box .log .info { 151 | color: #FFC; 152 | } 153 | 154 | .control-box .log .error { 155 | color: #FCC; 156 | } 157 | 158 | .control-box input[type="text"] { 159 | width: 235px; 160 | border: none; 161 | } 162 | 163 | circle.commit { 164 | fill: #EEEEEE; 165 | stroke: #888888; 166 | stroke-width: 3; 167 | } 168 | 169 | circle.commit.checked-out { 170 | fill: #CCFFCC !important; 171 | stroke: #339900; 172 | } 173 | 174 | circle.commit.merge-commit { 175 | stroke: #663300; 176 | fill: #FFFFCC; 177 | } 178 | 179 | circle.commit.reverted { 180 | fill: #FFC; 181 | stroke: #933; 182 | } 183 | 184 | circle.commit.rebased { 185 | stroke: #3300CC; 186 | fill: #CCCCFF; 187 | } 188 | 189 | circle.commit.branchless { 190 | fill: #FEFEFE; 191 | stroke: #DDD; 192 | } 193 | 194 | .commit-pointer { 195 | stroke: #666; 196 | stroke-width: 4; 197 | } 198 | 199 | .merge-pointer { 200 | stroke: #663300; 201 | stroke-width: 4; 202 | } 203 | 204 | .commit-pointer.branchless, 205 | .merge-pointer.branchless { 206 | stroke: #DDD; 207 | stroke-width: 2; 208 | } 209 | 210 | text.id-label { 211 | text-anchor: middle; 212 | font-family: Courier New; 213 | font-weight: bolder; 214 | fill: #666; 215 | font-size: 10px; 216 | } 217 | 218 | text.message-label { 219 | text-anchor: middle; 220 | font-family: Courier New; 221 | fill: #666; 222 | font-size: 10px; 223 | } 224 | 225 | g.branch-tag > rect { 226 | fill: #FFCC66; 227 | stroke: #CC9900; 228 | stroke-width: 2; 229 | } 230 | 231 | g.branch-tag.git-tag > rect { 232 | fill: #7FC9FF; 233 | stroke: #0026FF; 234 | } 235 | 236 | g.branch-tag.remote-branch > rect { 237 | fill: #CCC; 238 | stroke: #888; 239 | } 240 | 241 | g.branch-tag > text { 242 | text-anchor: middle; 243 | fill: #000; 244 | font-size: 11px; 245 | font-family: Arial; 246 | } 247 | 248 | g.head-tag > rect { 249 | fill: #CCFFCC; 250 | stroke: #339900; 251 | stroke-width: 2; 252 | } 253 | 254 | g.head-tag > text { 255 | text-anchor: middle; 256 | fill: #000; 257 | font-size: 11px; 258 | font-family: Arial; 259 | font-weight: bold; 260 | text-transform: uppercase; 261 | } 262 | -------------------------------------------------------------------------------- /images/prompt.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlywei/explain-git-with-d3/b5b7373d0ecde0f1214dccce4d31c57cc9541a74/images/prompt.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |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 |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 |