d3.js - git branch nodes layout automation with d3 - d3.js

Question

Just found a awesome site Visualizing Git Concepts with D3. the graph is generated by d3.js, but I still not figure out how d3.js to layout the nodes automatically!
for example, one image from that page as below, I just copy the output svg content here, but I would like to know how d3.js automatically put nodes on right location!
/* styles */
body, html {
height: 100%;
}
.intro p, .concept-container p {
padding-top: 10px;
}
a.openswitch {
display: block;
}
a.openswitch.selected {
font-weight: bold;
}
.command-list, .example-list {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px 0;
border-bottom: 2px dashed #888;
border-top: 2px dashed #888;
background-color: #EEE;
}
.command-list a.openswitch {
font-family: Courier New;
}
.concept-area {
padding-bottom: 20px;
}
.concept-container {
display: none;
}
.playground-container {
margin-top: 20px;
position: relative;
}
span.cmd {
background-color: #222222;
color: #FFFFFF;
font-family: Courier New;
padding: 0 0.2em;
}
.svg-container {
margin-left:250px;
display: block;
overflow: auto;
border: 1px dotted #AAA;
}
.svg-container.remote-container {
position: absolute;
top: 0px; right: 0px;
background-color: #EFF1FF;
border-left: 1px dotted #AAA;
border-bottom: 1px dotted #AAA;
}
#ExplainGitZen-Container {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
}
#ExplainGitZen-Container .svg-container {
display: inline-block;
border: 1px dotted #AAA;
position: absolute;
top: 0; bottom: 0; right: 0; left: 250px;
margin-left: 0;
}
#ExplainGitZen-Container .svg-container.remote-container {
position: absolute;
top: 0px; right: 0px; left: auto; bottom: auto;
background-color: #EFF1FF;
border-left: 1px dotted #AAA;
border-bottom: 1px dotted #AAA;
}
#ExplainGitZen-Container .playground-container {
position: absolute;
top: 0; bottom: 20px; right: 20px; left: 20px;
}
.remote-name-display {
font-weight: bold;
text-align: right;
}
.control-box {
display: inline-block;
position: absolute;
top: 0px; bottom: 0;
width: 250px;
vertical-align: bottom;
background-color: #000;
border: 1px dotted #AAA;
}
.control-box button {
font-family: Courier New;
font-size: 12px;
margin-right: 5px;
margin-bottom: 5px;
}
.control-box .log {
overflow-y: auto;
position: absolute;
top: 0px; bottom: 20px; left: 0; right: 0;
border-bottom: 1px solid #AAA;
}
.control-box .log,
.control-box input[type="text"] {
font-family: Courier New;
font-size: 14px;
}
.control-box .log .command-entry {
padding-left: 15px;
color: #FFF;
line-height: 14px;
background: url(../images/prompt.gif) no-repeat left center transparent;
}
.control-box input[type="text"] {
position: absolute;
bottom: 0;
padding-left: 15px;
color: #FFF;
line-height: 14px;
background: url(../images/prompt.gif) no-repeat left center transparent;
}
.control-box .log .info,
.control-box .log .error {
font-size: 12px;
padding: 5px;
}
.control-box .log .info {
color: #FFC;
}
.control-box .log .error {
color: #FCC;
}
.control-box input[type="text"] {
width: 235px;
border: none;
}
circle.commit {
fill: #EEEEEE;
stroke: #888888;
stroke-width: 3;
}
circle.commit.checked-out {
fill: #CCFFCC !important;
stroke: #339900;
}
circle.commit.merge-commit {
stroke: #663300;
fill: #FFFFCC;
}
circle.commit.reverted {
fill: #FFC;
stroke: #933;
}
circle.commit.rebased {
stroke: #3300CC;
fill: #CCCCFF;
}
circle.commit.branchless {
fill: #FEFEFE;
stroke: #DDD;
}
.commit-pointer {
stroke: #666;
stroke-width: 4;
}
.merge-pointer {
stroke: #663300;
stroke-width: 4;
}
.commit-pointer.branchless,
.merge-pointer.branchless {
stroke: #DDD;
stroke-width: 2;
}
text.id-label {
text-anchor: middle;
font-family: Courier New;
font-weight: bolder;
fill: #666;
font-size: 10px;
}
text.message-label {
text-anchor: middle;
font-family: Courier New;
fill: #666;
font-size: 10px;
}
g.branch-tag > rect {
fill: #FFCC66;
stroke: #CC9900;
stroke-width: 2;
}
g.branch-tag.git-tag > rect {
fill: #7FC9FF;
stroke: #0026FF;
}
g.branch-tag.remote-branch > rect {
fill: #CCC;
stroke: #888;
}
g.branch-tag > text {
text-anchor: middle;
fill: #000;
font-size: 11px;
font-family: Arial;
}
g.head-tag > rect {
fill: #CCFFCC;
stroke: #339900;
stroke-width: 2;
}
g.head-tag > text {
text-anchor: middle;
fill: #000;
font-size: 11px;
font-family: Arial;
font-weight: bold;
text-transform: uppercase;
}
<svg id="ExplainGitDeleteBranches" height="500" width="657"><text class="remote-name-display" x="10" y="25">Local Repository</text><text class="current-branch-display" x="10" y="45">Current Branch: terran</text><g class="pointers"><line id="ExplainGitDeleteBranches-e137e9b-to-initial" class="commit-pointer" x1="24" y1="300" x2="-8.8" y2="300" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-bb92e0e-to-e137e9b" class="commit-pointer" x1="114" y1="300" x2="81.2" y2="300" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-d25ee9b-to-bb92e0e" class="commit-pointer" x1="204" y1="300" x2="171.2" y2="300" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-071ff28-to-e137e9b" class="commit-pointer" x1="121.61522368914976" y1="228.38477631085024" x2="72.06173157302028" y2="277.93826842697973" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-f5b32c8-to-bb92e0e" class="commit-pointer" x1="211.61522368914976" y1="228.38477631085024" x2="162.06173157302027" y2="277.93826842697973" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-e088135-to-f5b32c8" class="commit-pointer" x1="294" y1="210" x2="261.2" y2="210" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-9e6c322-to-bb92e0e" class="commit-pointer" x1="211.61522368914976" y1="371.6152236891498" x2="162.06173157302027" y2="322.06173157302027" marker-end="url(#triangle)"></line><line id="ExplainGitDeleteBranches-593ae02-to-9e6c322" class="commit-pointer" x1="294" y1="390" x2="261.2" y2="390" marker-end="url(#triangle)"></line></g><g class="commits"><text class="message-label" x="320" y="434"></text><text class="message-label" x="230" y="434"></text><text class="message-label" x="320" y="254"></text><text class="message-label" x="230" y="254"></text><text class="message-label" x="140" y="254"></text><text class="message-label" x="230" y="344"></text><text class="message-label" x="140" y="344"></text><text class="message-label" x="50" y="344"></text><text class="id-label" x="320" y="424">593ae02..</text><text class="id-label" x="230" y="424">9e6c322..</text><text class="id-label" x="320" y="244">e088135..</text><text class="id-label" x="230" y="244">f5b32c8..</text><text class="id-label" x="140" y="244">071ff28..</text><text class="id-label" x="230" y="334">d25ee9b..</text><text class="id-label" x="140" y="334">bb92e0e..</text><text class="id-label" x="50" y="334">e137e9b..</text><circle id="ExplainGitDeleteBranches-e137e9b" class="commit" cx="50" cy="300" r="20"></circle><circle id="ExplainGitDeleteBranches-bb92e0e" class="commit" cx="140" cy="300" r="20"></circle><circle id="ExplainGitDeleteBranches-d25ee9b" class="commit" cx="230" cy="300" r="20"></circle><circle id="ExplainGitDeleteBranches-071ff28" class="commit" cx="140" cy="210" r="20"></circle><circle id="ExplainGitDeleteBranches-f5b32c8" class="commit" cx="230" cy="210" r="20"></circle><circle id="ExplainGitDeleteBranches-e088135" class="commit" cx="320" cy="210" r="20"></circle><circle id="ExplainGitDeleteBranches-9e6c322" class="commit" cx="230" cy="390" r="20"></circle><circle id="ExplainGitDeleteBranches-593ae02" class="commit checked-out" cx="320" cy="390" r="20"></circle></g><g class="tags"><g class="branch-tag"><rect width="46" height="20" y="350" x="207"></rect><text y="364" x="230">master</text></g><g class="branch-tag"><rect width="52" height="20" y="165" x="114"></rect><text y="179" x="140">protoss</text></g><g class="branch-tag"><rect width="34" height="20" y="165" x="303"></rect><text y="179" x="320">zerg</text></g><g class="branch-tag"><rect width="46" height="20" y="440" x="297"></rect><text y="454" x="320">terran</text></g><g class="branch-tag head-tag"><rect width="34" height="20" y="465" x="303"></rect><text y="479" x="320">HEAD</text></g></g></svg>