<!DOCTYPE html>
<html>
<head>
<title>Force Plus Append</title>
<script type="text/javascript" src="//d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="append_force.js"></script>
</head>
<body onload="viz01();">
<div id="viz01_main"></div>
</body>
</html>
function viz01() {
w = 960;
h = 600;
nodeHash = new Array();
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
var nodes = force.nodes(),
links = force.links();
var vis = d3.select("div#viz01_main").append("svg:svg")
.attr("width", w)
.attr("height", h);
force.on("tick", function() {
vis.selectAll("g.node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
vis.selectAll("line.link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
});
function restart() {
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("svg:line", "g.node")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", function(d) { return (d.relation == "spouseOf") ? "YellowGreen" : "SkyBlue"})
.style("stroke-width", 4)
;
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id;});
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.call(force.drag)
.on("dblclick", step3);
node.append("svg:circle")
.attr("class", "circle")
.attr("r", 8);
node.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", function(d) { return (d.gender == "M") ? "male.svg" : "female.svg" })
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
nodeEnter.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
node.exit().remove();
force.start();
}
function step1() {
d3.json("darwin.json", function(json) {
for ( x = 0; x < json.nodes.length; x++ ) {
nodes.push(json.nodes[x]);
nodeHash[json.nodes[x].id] = x;
}
for ( x = 0; x < json.links.length; x++ ) {
links.push({source: json.nodes[json.links[x].source], target: json.nodes[json.links[x].target], "relation": json.links[x].relation, "id": json.links[x].id });
}
restart();
}
)
}
function step2() {
nodes.splice(1, 1); // remove b
links.shift(); // remove a-b
links.pop(); // remove b-c
restart();
}
function step3(d, i) {
var pathClick = "erasmus.json";
d3.json(pathClick, function(json) {
for ( x = 0; x < json.nodes.length; x++ ) {
var found = false;
for ( y = 0; y < nodes.length; y++ ) {
if (nodes[y].id == json.nodes[x].id) {
found = true;
}
}
if (found == false) {
nodes.push(json.nodes[x]);
nodeHash[json.nodes[x].id] = nodes.length - 1;
}
}
for ( x = 0; x < json.links.length; x++ ) {
var found = false;
for ( y = 0; y < links.length; y++ ) {
if (links[y].id == json.links[x].id) {
found = true;
break;
}
}
if (found == false) {
links.push({source: nodes[nodeHash[json.links[x].sid]], target: nodes[nodeHash[json.links[x].tid]], "relation": json.links[x].relation, "id": json.links[x].id });
}
}
restart();
})
}
restart();
setTimeout(step1, 500);
} //end viz01()
{
"nodes": [
{
"id": "I7771",
"gender": "F",
"name": "[Margaret] Elizabeth Darwin",
"group": 0
},
{
"id": "I12888",
"gender": "M",
"name": "Richard Buckley Litchfield",
"group": 0
},
{
"id": "I7502",
"gender": "F",
"name": "Elizabeth Darwin",
"group": 0
},
{
"id": "I7498",
"gender": "F",
"name": "Anne Elizabeth Darwin",
"group": 0
},
{
"id": "I7511",
"gender": "F",
"name": "Emily Catherine Darwin",
"group": 0
},
{
"id": "I7657",
"gender": "F",
"name": "Florence Henrietta Fisher",
"group": 0
},
{
"id": "I7503",
"gender": "M",
"name": "Francis Darwin FRS",
"group": 0
},
{
"id": "I7506",
"gender": "M",
"name": "Charles Waring Darwin",
"group": 0
},
{
"id": "I7493",
"gender": "M",
"name": "Josiah Wedgwood FRS FSA FSEAMC",
"group": 0
},
{
"id": "I7682",
"gender": "F",
"name": "Elizabeth Frances Fraser",
"group": 0
},
{
"id": "I7497",
"gender": "M",
"name": "William Erasmus Darwin",
"group": 0
},
{
"id": "I7656",
"gender": "F",
"name": "Ellen Wordsworth Crofts",
"group": 0
},
{
"id": "I7653",
"gender": "F",
"name": "Maud du Puy",
"group": 0
},
{
"id": "I7463",
"gender": "F",
"name": "Emma Wedgwood",
"group": 0
},
{
"id": "I7461",
"gender": "F",
"name": "Susannah Wedgwood",
"group": 0
},
{
"id": "I7508",
"gender": "F",
"name": "Caroline Sarah Darwin",
"group": 0
},
{
"id": "I7500",
"gender": "F",
"name": "Henrietta Emma Darwin",
"group": 0
},
{
"id": "I7494",
"gender": "F",
"name": "Sarah Wedgwood",
"group": 0
},
{
"id": "I7496",
"gender": "F",
"name": "Elizabeth Allen",
"group": 0
},
{
"id": "I7652",
"gender": "F",
"name": "Sara Price Ashburner Sedgwick",
"group": 0
},
{
"id": "I7707",
"gender": "F",
"name": "Ruth Francis Darwin CBE",
"group": 0
},
{
"id": "I7923",
"gender": "F",
"name": "Frances Crofts Darwin",
"group": 0
},
{
"id": "I7455",
"gender": "F",
"name": "Mary Howard",
"group": 0
},
{
"id": "I7499",
"gender": "F",
"name": "Mary Eleanor Darwin",
"group": 0
},
{
"id": "I7706",
"gender": "F",
"name": "[Emma] Nora Darwin",
"group": 0
},
{
"id": "I7683",
"gender": "F",
"name": "[Charlotte] Mildred Massingberd",
"group": 0
},
{
"id": "I7841",
"gender": "M",
"name": "William Robert Darwin",
"group": 0
},
{
"id": "I7504",
"gender": "M",
"name": "Leonard Darwin",
"group": 0
},
{
"id": "I7705",
"gender": "M",
"name": "2nd Lieut. Erasmus Darwin",
"group": 0
},
{
"id": "I7761",
"gender": "M",
"name": "Charles Galton Darwin KBE MC FRS",
"group": 0
},
{
"id": "I7654",
"gender": "F",
"name": "Amy Ruck",
"group": 0
},
{
"id": "I7507",
"gender": "F",
"name": "Marianne Darwin",
"group": 0
},
{
"id": "I7727",
"gender": "F",
"name": "Gwendoline Mary Darwin",
"group": 0
},
{
"id": "I7460",
"gender": "M",
"name": "Robert Waring Darwin MD FRS",
"group": 0
},
{
"id": "I7655",
"gender": "M",
"name": "Bernard Richard Meirion Darwin",
"group": 0
},
{
"id": "I7510",
"gender": "M",
"name": "Erasmus Alvey Darwin",
"group": 0
},
{
"id": "I7509",
"gender": "F",
"name": "Susan Elizabeth Darwin",
"group": 0
},
{
"id": "I5906",
"gender": "M",
"name": "Erasmus Darwin",
"group": 0
},
{
"id": "I7495",
"gender": "M",
"name": "Josiah Wedgwood II",
"group": 0
},
{
"id": "I7501",
"gender": "M",
"name": "George Howard Darwin FRS KCB",
"group": 0
},
{
"id": "I7462",
"gender": "M",
"name": "Charles Robert Darwin FRS",
"group": 0
},
{
"id": "I7505",
"gender": "M",
"name": "Horace Darwin JP KBE FRS",
"group": 0
},
{
"id": "I7691",
"gender": "F",
"name": "Hon. Emma Cecilia Farrer",
"group": 0
}
],
"links": [
{
"source": 1,
"target": 16,
"sid": "I12888",
"tid": "I7500",
"value": 5,
"relation": "spouseOf",
"id": "7519"
},
{
"source": 41,
"target": 42,
"sid": "I7505",
"tid": "I7691",
"value": 5,
"relation": "spouseOf",
"id": "15854"
},
{
"source": 28,
"target": 41,
"sid": "I7705",
"tid": "I7505",
"value": 5,
"relation": "childOf",
"id": "15855"
},
{
"source": 20,
"target": 41,
"sid": "I7707",
"tid": "I7505",
"value": 5,
"relation": "childOf",
"id": "15857"
},
{
"source": 24,
"target": 41,
"sid": "I7706",
"tid": "I7505",
"value": 5,
"relation": "childOf",
"id": "15859"
},
{
"source": 27,
"target": 9,
"sid": "I7504",
"tid": "I7682",
"value": 5,
"relation": "spouseOf",
"id": "15865"
},
{
"source": 27,
"target": 25,
"sid": "I7504",
"tid": "I7683",
"value": 5,
"relation": "spouseOf",
"id": "15866"
},
{
"source": 6,
"target": 11,
"sid": "I7503",
"tid": "I7656",
"value": 5,
"relation": "spouseOf",
"id": "15926"
},
{
"source": 21,
"target": 6,
"sid": "I7923",
"tid": "I7503",
"value": 5,
"relation": "childOf",
"id": "15927"
},
{
"source": 6,
"target": 5,
"sid": "I7503",
"tid": "I7657",
"value": 5,
"relation": "spouseOf",
"id": "15929"
},
{
"source": 6,
"target": 30,
"sid": "I7503",
"tid": "I7654",
"value": 5,
"relation": "spouseOf",
"id": "15930"
},
{
"source": 34,
"target": 6,
"sid": "I7655",
"tid": "I7503",
"value": 5,
"relation": "childOf",
"id": "15931"
},
{
"source": 10,
"target": 19,
"sid": "I7497",
"tid": "I7652",
"value": 5,
"relation": "spouseOf",
"id": "15933"
},
{
"source": 39,
"target": 12,
"sid": "I7501",
"tid": "I7653",
"value": 5,
"relation": "spouseOf",
"id": "15934"
},
{
"source": 32,
"target": 39,
"sid": "I7727",
"tid": "I7501",
"value": 5,
"relation": "childOf",
"id": "15935"
},
{
"source": 29,
"target": 39,
"sid": "I7761",
"tid": "I7501",
"value": 5,
"relation": "childOf",
"id": "15937"
},
{
"source": 0,
"target": 39,
"sid": "I7771",
"tid": "I7501",
"value": 5,
"relation": "childOf",
"id": "15939"
},
{
"source": 26,
"target": 39,
"sid": "I7841",
"tid": "I7501",
"value": 5,
"relation": "childOf",
"id": "15941"
},
{
"source": 13,
"target": 38,
"sid": "I7463",
"tid": "I7495",
"value": 5,
"relation": "childOf",
"id": "16186"
},
{
"source": 13,
"target": 18,
"sid": "I7463",
"tid": "I7496",
"value": 5,
"relation": "childOf",
"id": "16187"
},
{
"source": 14,
"target": 8,
"sid": "I7461",
"tid": "I7493",
"value": 5,
"relation": "childOf",
"id": "16190"
},
{
"source": 14,
"target": 17,
"sid": "I7461",
"tid": "I7494",
"value": 5,
"relation": "childOf",
"id": "16191"
},
{
"source": 40,
"target": 13,
"sid": "I7462",
"tid": "I7463",
"value": 5,
"relation": "spouseOf",
"id": "16231"
},
{
"source": 10,
"target": 40,
"sid": "I7497",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16232"
},
{
"source": 10,
"target": 13,
"sid": "I7497",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16233"
},
{
"source": 3,
"target": 40,
"sid": "I7498",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16234"
},
{
"source": 3,
"target": 13,
"sid": "I7498",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16235"
},
{
"source": 23,
"target": 40,
"sid": "I7499",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16236"
},
{
"source": 23,
"target": 13,
"sid": "I7499",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16237"
},
{
"source": 16,
"target": 40,
"sid": "I7500",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16238"
},
{
"source": 16,
"target": 13,
"sid": "I7500",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16239"
},
{
"source": 39,
"target": 40,
"sid": "I7501",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16240"
},
{
"source": 39,
"target": 13,
"sid": "I7501",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16241"
},
{
"source": 2,
"target": 40,
"sid": "I7502",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16242"
},
{
"source": 2,
"target": 13,
"sid": "I7502",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16243"
},
{
"source": 6,
"target": 40,
"sid": "I7503",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16244"
},
{
"source": 6,
"target": 13,
"sid": "I7503",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16245"
},
{
"source": 27,
"target": 40,
"sid": "I7504",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16246"
},
{
"source": 27,
"target": 13,
"sid": "I7504",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16247"
},
{
"source": 41,
"target": 40,
"sid": "I7505",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16248"
},
{
"source": 41,
"target": 13,
"sid": "I7505",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16249"
},
{
"source": 7,
"target": 40,
"sid": "I7506",
"tid": "I7462",
"value": 5,
"relation": "childOf",
"id": "16250"
},
{
"source": 7,
"target": 13,
"sid": "I7506",
"tid": "I7463",
"value": 5,
"relation": "childOf",
"id": "16251"
},
{
"source": 33,
"target": 14,
"sid": "I7460",
"tid": "I7461",
"value": 5,
"relation": "spouseOf",
"id": "16257"
},
{
"source": 31,
"target": 33,
"sid": "I7507",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16258"
},
{
"source": 31,
"target": 14,
"sid": "I7507",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16259"
},
{
"source": 15,
"target": 33,
"sid": "I7508",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16260"
},
{
"source": 15,
"target": 14,
"sid": "I7508",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16261"
},
{
"source": 36,
"target": 33,
"sid": "I7509",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16262"
},
{
"source": 36,
"target": 14,
"sid": "I7509",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16263"
},
{
"source": 35,
"target": 33,
"sid": "I7510",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16264"
},
{
"source": 35,
"target": 14,
"sid": "I7510",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16265"
},
{
"source": 40,
"target": 33,
"sid": "I7462",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16266"
},
{
"source": 40,
"target": 14,
"sid": "I7462",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16267"
},
{
"source": 4,
"target": 33,
"sid": "I7511",
"tid": "I7460",
"value": 5,
"relation": "childOf",
"id": "16268"
},
{
"source": 4,
"target": 14,
"sid": "I7511",
"tid": "I7461",
"value": 5,
"relation": "childOf",
"id": "16269"
},
{
"source": 33,
"target": 37,
"sid": "I7460",
"tid": "I5906",
"value": 5,
"relation": "childOf",
"id": "16283"
},
{
"source": 33,
"target": 22,
"sid": "I7460",
"tid": "I7455",
"value": 5,
"relation": "childOf",
"id": "16284"
}
]
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
id="Layer_1"
x="0px"
y="0px"
width="4.1305933"
height="15.999999"
viewBox="0 0 4.1305934 15.999999"
enable-background="new 0 0 25.814 100"
xml:space="preserve"
inkscape:version="0.48.1 "
sodipodi:docname="noun_project_443.svg"><metadata
id="metadata11"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs9" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="728"
inkscape:window-height="480"
id="namedview7"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="2.91"
inkscape:cx="2.065317"
inkscape:cy="8.0004997"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<ellipse
cx="12.907"
cy="7.7519999"
rx="6.072"
ry="7.7509999"
id="ellipse3"
sodipodi:cx="12.907"
sodipodi:cy="7.7519999"
sodipodi:rx="6.072"
sodipodi:ry="7.7509999"
transform="matrix(0.16000161,0,0,0.16000161,1.5906573e-4,-1.61586e-4)" />
<path
d="m 4.0603601,2.8942674 h -1.343854 c -0.217442,0.136321 -0.651046,1.661296 -0.651046,1.661296 0,0 -0.433765,-1.524975 -0.651047,-1.661296 H 0.07024007 c -0.382404,0.604806 0.928649,2.468185 0.770088,3.084031 -1.142092,4.4344436 -0.211683,5.5286946 0.54272503,5.8314176 l 0.279203,4.190282 h 0.403044 0.403364 l 0.278883,-4.190122 c 0.754567,-0.302723 1.684497,-1.396814 0.542885,-5.8314176 -0.158881,-0.615846 1.152332,-2.479225 0.769928,-3.084191 z"
id="path5"
inkscape:connector-curvature="0" />
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
id="Layer_1"
x="0px"
y="0px"
width="5.1266108"
height="16"
viewBox="0 0 5.1266107 16"
enable-background="new 0 0 32.041 100"
xml:space="preserve"
inkscape:version="0.48.1 "
sodipodi:docname="noun_project_442.svg"><metadata
id="metadata11"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs9" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1060"
inkscape:window-height="800"
id="namedview7"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="2.91"
inkscape:cx="-46.405767"
inkscape:cy="-17.203211"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<path
d="M 5.1266107,3.448034 C 4.8088477,3.00115 3.1421112,2.894429 3.1421112,2.894429 L 2.5633854,4.555726 1.9844996,2.894269 c 0,0 -1.66657666,0.106721 -1.98449985530796,0.553605 V 9.262332 H 0.99232974 L 1.6123359,16 H 2.5632254 3.514115 L 4.1341213,9.262653 H 5.1264507 V 3.448034 z"
id="path3"
inkscape:connector-curvature="0" />
<ellipse
cx="16.021"
cy="7.7519999"
rx="6.073"
ry="7.7509999"
id="ellipse5"
sodipodi:cx="16.021"
sodipodi:cy="7.7519999"
sodipodi:rx="6.073"
sodipodi:ry="7.7509999"
transform="matrix(0.1600016,0,0,0.1600016,-2.5530796e-7,-1.5999e-4)" />
</svg>