JavaScript
//Width and height for SVG area
var w = 500;
var h = 300;
// nb_group, angle, intensity: Used in clustering the nodes
var nb_group=4;
var angle = 2*Math.PI/nb_group;
var intensity = 100;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var colors = d3.scale.category10()
.range(["#FFFF00", //YELLOW
"#377eb8", //BLUE
"#4daf4a", //GREEN
"#e41a1c", //RED
]);
var dataset = {
"nodes":[
{"id":0,"name":"A","nodeCategory":"1"},
{"id":1,"name":"AA","nodeCategory":"1"},
{"id":2,"name":"B","nodeCategory":"2"},
{"id":3,"name":"BB","nodeCategory":"2"},
{"id":4,"name":"C","nodeCategory":"3"},
{"id":5,"name":"CC","nodeCategory":"3"},
{"id":6,"name":"D","nodeCategory":"4"},
{"id":7,"name":"DD","nodeCategory":"4"},
{"id":8,"name":"DDD","nodeCategory":"4"}
],
"edges":[
{"source":0,"target":2,"value":""},
{"source":1,"target":3,"value":""},
{"source":2,"target":4,"value":""},
{"source":3,"target":5,"value":""},
{"source":4,"target":6,"value":""},
{"source":5,"target":7,"value":""},
{"source":6,"target":8,"value":""},
{"source":7,"target":0,"value":""},
{"source":8,"target":1,"value":""}
]
}
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.gravity(.05)
.charge(-100)
.linkDistance(100)
.size([w, h])
.start();
var drag = force.drag()
.on("dragstart", dragstart);
var edges = svg.selectAll("line")
.data(dataset.edges)
...