Skip to content

Instantly share code, notes, and snippets.

@nautat

nautat/README.md

Created August 9, 2012 04:50
Show Gist options
  • Save nautat/3301103 to your computer and use it in GitHub Desktop.
Save nautat/3301103 to your computer and use it in GitHub Desktop.
Download ZIP
Force-Directed Layout with 2 panels
Raw
README.md

Experiment to create 2 panel with d3js Force-Directed Layout.

Raw
data.json
{"test1":
{"nodes":[
{"radius":15,"weight":5,"group":0,"name":"node1"},
{"radius":15,"weight":5,"group":1,"name":"node2"}],
"links":[
{"source":0,"target":1,"density":1,"strength":1,"distance":180}
]
},
"test2":
{"nodes":[
{"radius":15,"weight":5,"group":0,"name":"node1"},
{"radius":15,"weight":5,"group":1,"name":"node2"}],
"links":[
{"source":0,"target":1,"density":1,"strength":1,"distance":180}
]
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout with 2 panels</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
</head>
<style>
body {
margin: 5px auto 5px auto;
text-align: center;
}
svg {
text-align: center;
border: 1px solid #DEDEDE;
}
.link {
stroke: gray;
stroke-width: 1;
opacity: 0.8;
}
.node {
stroke: white;
stroke-width: 2;
}
.text {
color: black;
font: 10px sans-serif;
pointer-events: none;
}
</style>
<body>
<script type="text/javascript">
var force = {};
var svg = {};
var link = {};
var node = {};
var text = {};
var color = d3.scale.category20();
d3.json("data.json", function(json) {
var w = 940, h = 250;
var k = d3.keys(json)
d3.select("body").style("width", w+'px');
d3.select("body").style("height", h+'px');
for (i in json) {
svg[i] = d3.select("body")
.append("svg")
.attr("width", '940px')
.attr("height", '250px')
.attr("id", i);
force[i] = d3.layout.force()
.charge(-500)
.linkDistance(200)
.gravity(.1)
.nodes(json[i].nodes)
.links(json[i].links)
.size([w, h])
.start();
link[i] = svg[i].selectAll("line")
.data(json[i].links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.density); });
node[i] = svg[i].selectAll("circle")
.data(json[i].nodes)
.enter().append("circle")
.on("mouseover", animatemove)
.on("mouseout", animateout)
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.attr("r", function(d) { return d.radius; })
.call(force[i].drag);
text[i] = svg[i].selectAll("text")
.data(json[i].nodes)
.enter().append("text")
.attr("class", "text")
.text(function(d) { return d.name; });
force[i].on("tick", (function(_) {
return function() {
node[_].attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
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; });
text[_].attr("x", function(d) { return d.x-d.radius-5; })
.attr("y", function(d) { return d.y-d.radius-5; });
};
})(i));
};
function animatemove() {
d3.select(this)
.transition(0)
.style("fill", "red")
.attr("r", function(d) { return d.radius+5; });
};
function animateout() {
d3.select(this)
.transition(0)
.attr("r", function(d) { return d.radius; })
.style("fill", function(d) { return color(d.group); });
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment