HTML
<!DOCTYPE html xmlns:xlink="http://www.w3.org/1999/xlink">>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
//Constants for the SVG
var width = 900,
height = 600;
//Set up the colour scale
var color = d3.scale.category20();
//Set up the force layout
var force = d3.layout.force()
.charge(-100)
.linkDistance(100)
.size([width, height]);
//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// hard-code some json
var graph = {
"nodes":[
{"name":"Myriel","group":1, url: "http://www.anywhere.com"},
{"name":"Napoleon","group":1, url: "http://www.anywhere.com"},
{"name":"Mlle.Baptistine","group":1, url: "http://www.anywhere.com"},
{"name":"Mme.Magloire","group":1, url: "http://www.anywhere.com"},
{"name":"CountessdeLo","group":1, url: "http://www.anywhere.com"},
{"name":"Geborand","group":1, url: "http://www.anywhere.com"},
{"name":"Champtercier","group":1, url: "http://www.anywhere.com"},
{"name":"Cravatte","group":1, url: "http://www.anywhere.com"},
{"name":"Count","group":1, url: "http://www.anywhere.com"},
{"name":"OldMan","group":1, url: "http://www.anywhere.com"},
{"name":"Labarre","group":2, url: "http://www.anywhere.com"},
{"name":"Valjean","group":2, url: "http://www.anywhere.com"},
{"name":"Marguerite","group":3, url: "http://www.anywhere.com"},
{"name":"Mme.deR","group":2, url: "http://www.yahoo.com"},
{"name":"Isabeau","group":2, url: "http://www.yahoo.com"},
{"name":"Gervais","group":2},
{"name":"Tholomyes","group":3},
{"name":"Listolier","group":3},
{"name":"Fameuil","group":3},
{"name":"Blacheville","group":3},
{"name":"Favourite","group":3},
{"name":"Dahlia","group":3},
{"name":"Zephine","group":3},
{"name":"Fantine","group":3},
{"name":"Mme.Thenardier","group":4},
...