Force Layout

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>force-layout</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>

.node {
	stroke: #fff;
	stroke-width: 1.5px;
}

.link {
	stroke: #999;
	stroke-opacity: .6;
}

</style>
</head>
<body>
<script>

var dataset = {
	nodes: [
		{id: 0, name: "Taro", sex: "M"},
		{id: 1, name: "Ken", sex: "M"},
		{id: 2, name: "Hana", sex: "F"},
		{id: 3, name: "Mike" ,sex: "M"},
		{id: 4, name: "Bob" ,sex: "M"},
		{id: 5, name: "Anna" ,sex: "F"}
	],
	links: [
		{source: 0, target: 1},
		{source: 0, target: 3},
		{source: 0, target: 4},
		{source: 1, target: 2},
		{source: 1, target: 5},
		{source: 2, target: 5},
		{source: 3, target: 4},
		{source: 4, target: 5}
	]
}

var width = 960;
var height = 500;

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

var force = d3.layout.force()
	.nodes(dataset.nodes)
	.links(dataset.links)
	.charge(-200)
	.linkDistance(200)
	.size([width, height])
	.start();

var link = svg.selectAll(".link")
	.data(dataset.links)
	.enter()
	.append("line")
	.attr("class", "link");

node.append("title")
	.text(function(d) { return d.name; });

force.on("tick", function() {
	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; });

node.attr("cx", function(d) { return d.x; })
		.attr("cy", function(d) { return d.y; });
});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js