This demo shows how to generate a circle graph layout using D3. The dataset is the same one from the Les Misérables demos [1] [2] provided in the D3 Gallery.
-
-
Save sjengle/5432087 to your computer and use it in GitHub Desktop.
D3 Circle Graph Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- python -m SimpleHTTPServer 8080 //--> | |
<!-- http://bl.ocks.org/mbostock/4062045 //--> | |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3 Graph Visualization Demo</title> | |
<!-- JavaScript Libraries //--> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<!-- CSS Style //--> | |
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900|Source+Code+Pro:300" rel="stylesheet" type="text/css"> | |
<link href="style.css" rel="stylesheet" type="text/css"> | |
<script> | |
var diameter = 500; | |
var radius = diameter / 2; | |
var margin = 20; | |
// Generates a tooltip for a SVG circle element based on its ID | |
function addTooltip(circle) { | |
var x = parseFloat(circle.attr("cx")); | |
var y = parseFloat(circle.attr("cy")); | |
var r = parseFloat(circle.attr("r")); | |
var text = circle.attr("id"); | |
var tooltip = d3.select("#plot") | |
.append("text") | |
.text(text) | |
.attr("x", x) | |
.attr("y", y) | |
.attr("dy", -r * 2) | |
.attr("id", "tooltip"); | |
var offset = tooltip.node().getBBox().width / 2; | |
if ((x - offset) < -radius) { | |
tooltip.attr("text-anchor", "start"); | |
tooltip.attr("dx", -r); | |
} | |
else if ((x + offset) > (radius)) { | |
tooltip.attr("text-anchor", "end"); | |
tooltip.attr("dx", r); | |
} | |
else { | |
tooltip.attr("text-anchor", "middle"); | |
tooltip.attr("dx", 0); | |
} | |
} | |
// Draws an arc diagram for the provided undirected graph | |
function drawGraph(graph) { | |
// create svg image | |
var svg = d3.select("body").select("#circle") | |
.append("svg") | |
.attr("width", diameter) | |
.attr("height", diameter); | |
// draw border around svg image | |
// svg.append("rect") | |
// .attr("class", "outline") | |
// .attr("width", diameter) | |
// .attr("height", diameter); | |
// create plot area within svg image | |
var plot = svg.append("g") | |
.attr("id", "plot") | |
.attr("transform", "translate(" + radius + ", " + radius + ")"); | |
// draw border around plot area | |
// plot.append("circle") | |
// .attr("class", "outline") | |
// .attr("r", radius - margin); | |
// fix graph links to map to objects instead of indices | |
graph.links.forEach(function(d, i) { | |
d.source = isNaN(d.source) ? d.source : graph.nodes[d.source]; | |
d.target = isNaN(d.target) ? d.target : graph.nodes[d.target]; | |
}); | |
// calculate node positions | |
circleLayout(graph.nodes); | |
// draw edges first | |
drawLinks(graph.links); | |
// drawCurves(graph.links); | |
// draw nodes last | |
drawNodes(graph.nodes); | |
} | |
// Calculates node locations | |
function circleLayout(nodes) { | |
// sort nodes by group | |
nodes.sort(function(a, b) { | |
return a.group - b.group; | |
}); | |
// use to scale node index to theta value | |
var scale = d3.scale.linear() | |
.domain([0, nodes.length]) | |
.range([0, 2 * Math.PI]); | |
// calculate theta for each node | |
nodes.forEach(function(d, i) { | |
// calculate polar coordinates | |
var theta = scale(i); | |
var radial = radius - margin; | |
// convert to cartesian coordinates | |
d.x = radial * Math.sin(theta); | |
d.y = radial * Math.cos(theta); | |
}); | |
} | |
// Draws nodes with tooltips | |
function drawNodes(nodes) { | |
// used to assign nodes color by group | |
var color = d3.scale.category20(); | |
d3.select("#plot").selectAll(".node") | |
.data(nodes) | |
.enter() | |
.append("circle") | |
.attr("class", "node") | |
.attr("id", function(d, i) { return d.name; }) | |
.attr("cx", function(d, i) { return d.x; }) | |
.attr("cy", function(d, i) { return d.y; }) | |
.attr("r", 5) | |
.style("fill", function(d, i) { return color(d.group); }) | |
.on("mouseover", function(d, i) { addTooltip(d3.select(this)); }) | |
.on("mouseout", function(d, i) { d3.select("#tooltip").remove(); }); | |
} | |
// Draws straight edges between nodes | |
function drawLinks(links) { | |
d3.select("#plot").selectAll(".link") | |
.data(links) | |
.enter() | |
.append("line") | |
.attr("class", "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; }); | |
} | |
// Draws curved edges between nodes | |
function drawCurves(links) { | |
// remember this from tree example? | |
var curve = d3.svg.diagonal() | |
.projection(function(d) { return [d.x, d.y]; }); | |
d3.select("#plot").selectAll(".link") | |
.data(links) | |
.enter() | |
.append("path") | |
.attr("class", "link") | |
.attr("d", curve); | |
} | |
</script> | |
</head> | |
<body> | |
<div align="center" id="circle"></div> | |
<script> | |
d3.json("miserables.json", drawGraph); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"nodes":[ | |
{"name":"Myriel","group":1}, | |
{"name":"Napoleon","group":1}, | |
{"name":"Mlle.Baptistine","group":1}, | |
{"name":"Mme.Magloire","group":1}, | |
{"name":"CountessdeLo","group":1}, | |
{"name":"Geborand","group":1}, | |
{"name":"Champtercier","group":1}, | |
{"name":"Cravatte","group":1}, | |
{"name":"Count","group":1}, | |
{"name":"OldMan","group":1}, | |
{"name":"Labarre","group":2}, | |
{"name":"Valjean","group":2}, | |
{"name":"Marguerite","group":3}, | |
{"name":"Mme.deR","group":2}, | |
{"name":"Isabeau","group":2}, | |
{"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}, | |
{"name":"Thenardier","group":4}, | |
{"name":"Cosette","group":5}, | |
{"name":"Javert","group":4}, | |
{"name":"Fauchelevent","group":0}, | |
{"name":"Bamatabois","group":2}, | |
{"name":"Perpetue","group":3}, | |
{"name":"Simplice","group":2}, | |
{"name":"Scaufflaire","group":2}, | |
{"name":"Woman1","group":2}, | |
{"name":"Judge","group":2}, | |
{"name":"Champmathieu","group":2}, | |
{"name":"Brevet","group":2}, | |
{"name":"Chenildieu","group":2}, | |
{"name":"Cochepaille","group":2}, | |
{"name":"Pontmercy","group":4}, | |
{"name":"Boulatruelle","group":6}, | |
{"name":"Eponine","group":4}, | |
{"name":"Anzelma","group":4}, | |
{"name":"Woman2","group":5}, | |
{"name":"MotherInnocent","group":0}, | |
{"name":"Gribier","group":0}, | |
{"name":"Jondrette","group":7}, | |
{"name":"Mme.Burgon","group":7}, | |
{"name":"Gavroche","group":8}, | |
{"name":"Gillenormand","group":5}, | |
{"name":"Magnon","group":5}, | |
{"name":"Mlle.Gillenormand","group":5}, | |
{"name":"Mme.Pontmercy","group":5}, | |
{"name":"Mlle.Vaubois","group":5}, | |
{"name":"Lt.Gillenormand","group":5}, | |
{"name":"Marius","group":8}, | |
{"name":"BaronessT","group":5}, | |
{"name":"Mabeuf","group":8}, | |
{"name":"Enjolras","group":8}, | |
{"name":"Combeferre","group":8}, | |
{"name":"Prouvaire","group":8}, | |
{"name":"Feuilly","group":8}, | |
{"name":"Courfeyrac","group":8}, | |
{"name":"Bahorel","group":8}, | |
{"name":"Bossuet","group":8}, | |
{"name":"Joly","group":8}, | |
{"name":"Grantaire","group":8}, | |
{"name":"MotherPlutarch","group":9}, | |
{"name":"Gueulemer","group":4}, | |
{"name":"Babet","group":4}, | |
{"name":"Claquesous","group":4}, | |
{"name":"Montparnasse","group":4}, | |
{"name":"Toussaint","group":5}, | |
{"name":"Child1","group":10}, | |
{"name":"Child2","group":10}, | |
{"name":"Brujon","group":4}, | |
{"name":"Mme.Hucheloup","group":8} | |
], | |
"links":[ | |
{"source":1,"target":0,"value":1}, | |
{"source":2,"target":0,"value":8}, | |
{"source":3,"target":0,"value":10}, | |
{"source":3,"target":2,"value":6}, | |
{"source":4,"target":0,"value":1}, | |
{"source":5,"target":0,"value":1}, | |
{"source":6,"target":0,"value":1}, | |
{"source":7,"target":0,"value":1}, | |
{"source":8,"target":0,"value":2}, | |
{"source":9,"target":0,"value":1}, | |
{"source":11,"target":10,"value":1}, | |
{"source":11,"target":3,"value":3}, | |
{"source":11,"target":2,"value":3}, | |
{"source":11,"target":0,"value":5}, | |
{"source":12,"target":11,"value":1}, | |
{"source":13,"target":11,"value":1}, | |
{"source":14,"target":11,"value":1}, | |
{"source":15,"target":11,"value":1}, | |
{"source":17,"target":16,"value":4}, | |
{"source":18,"target":16,"value":4}, | |
{"source":18,"target":17,"value":4}, | |
{"source":19,"target":16,"value":4}, | |
{"source":19,"target":17,"value":4}, | |
{"source":19,"target":18,"value":4}, | |
{"source":20,"target":16,"value":3}, | |
{"source":20,"target":17,"value":3}, | |
{"source":20,"target":18,"value":3}, | |
{"source":20,"target":19,"value":4}, | |
{"source":21,"target":16,"value":3}, | |
{"source":21,"target":17,"value":3}, | |
{"source":21,"target":18,"value":3}, | |
{"source":21,"target":19,"value":3}, | |
{"source":21,"target":20,"value":5}, | |
{"source":22,"target":16,"value":3}, | |
{"source":22,"target":17,"value":3}, | |
{"source":22,"target":18,"value":3}, | |
{"source":22,"target":19,"value":3}, | |
{"source":22,"target":20,"value":4}, | |
{"source":22,"target":21,"value":4}, | |
{"source":23,"target":16,"value":3}, | |
{"source":23,"target":17,"value":3}, | |
{"source":23,"target":18,"value":3}, | |
{"source":23,"target":19,"value":3}, | |
{"source":23,"target":20,"value":4}, | |
{"source":23,"target":21,"value":4}, | |
{"source":23,"target":22,"value":4}, | |
{"source":23,"target":12,"value":2}, | |
{"source":23,"target":11,"value":9}, | |
{"source":24,"target":23,"value":2}, | |
{"source":24,"target":11,"value":7}, | |
{"source":25,"target":24,"value":13}, | |
{"source":25,"target":23,"value":1}, | |
{"source":25,"target":11,"value":12}, | |
{"source":26,"target":24,"value":4}, | |
{"source":26,"target":11,"value":31}, | |
{"source":26,"target":16,"value":1}, | |
{"source":26,"target":25,"value":1}, | |
{"source":27,"target":11,"value":17}, | |
{"source":27,"target":23,"value":5}, | |
{"source":27,"target":25,"value":5}, | |
{"source":27,"target":24,"value":1}, | |
{"source":27,"target":26,"value":1}, | |
{"source":28,"target":11,"value":8}, | |
{"source":28,"target":27,"value":1}, | |
{"source":29,"target":23,"value":1}, | |
{"source":29,"target":27,"value":1}, | |
{"source":29,"target":11,"value":2}, | |
{"source":30,"target":23,"value":1}, | |
{"source":31,"target":30,"value":2}, | |
{"source":31,"target":11,"value":3}, | |
{"source":31,"target":23,"value":2}, | |
{"source":31,"target":27,"value":1}, | |
{"source":32,"target":11,"value":1}, | |
{"source":33,"target":11,"value":2}, | |
{"source":33,"target":27,"value":1}, | |
{"source":34,"target":11,"value":3}, | |
{"source":34,"target":29,"value":2}, | |
{"source":35,"target":11,"value":3}, | |
{"source":35,"target":34,"value":3}, | |
{"source":35,"target":29,"value":2}, | |
{"source":36,"target":34,"value":2}, | |
{"source":36,"target":35,"value":2}, | |
{"source":36,"target":11,"value":2}, | |
{"source":36,"target":29,"value":1}, | |
{"source":37,"target":34,"value":2}, | |
{"source":37,"target":35,"value":2}, | |
{"source":37,"target":36,"value":2}, | |
{"source":37,"target":11,"value":2}, | |
{"source":37,"target":29,"value":1}, | |
{"source":38,"target":34,"value":2}, | |
{"source":38,"target":35,"value":2}, | |
{"source":38,"target":36,"value":2}, | |
{"source":38,"target":37,"value":2}, | |
{"source":38,"target":11,"value":2}, | |
{"source":38,"target":29,"value":1}, | |
{"source":39,"target":25,"value":1}, | |
{"source":40,"target":25,"value":1}, | |
{"source":41,"target":24,"value":2}, | |
{"source":41,"target":25,"value":3}, | |
{"source":42,"target":41,"value":2}, | |
{"source":42,"target":25,"value":2}, | |
{"source":42,"target":24,"value":1}, | |
{"source":43,"target":11,"value":3}, | |
{"source":43,"target":26,"value":1}, | |
{"source":43,"target":27,"value":1}, | |
{"source":44,"target":28,"value":3}, | |
{"source":44,"target":11,"value":1}, | |
{"source":45,"target":28,"value":2}, | |
{"source":47,"target":46,"value":1}, | |
{"source":48,"target":47,"value":2}, | |
{"source":48,"target":25,"value":1}, | |
{"source":48,"target":27,"value":1}, | |
{"source":48,"target":11,"value":1}, | |
{"source":49,"target":26,"value":3}, | |
{"source":49,"target":11,"value":2}, | |
{"source":50,"target":49,"value":1}, | |
{"source":50,"target":24,"value":1}, | |
{"source":51,"target":49,"value":9}, | |
{"source":51,"target":26,"value":2}, | |
{"source":51,"target":11,"value":2}, | |
{"source":52,"target":51,"value":1}, | |
{"source":52,"target":39,"value":1}, | |
{"source":53,"target":51,"value":1}, | |
{"source":54,"target":51,"value":2}, | |
{"source":54,"target":49,"value":1}, | |
{"source":54,"target":26,"value":1}, | |
{"source":55,"target":51,"value":6}, | |
{"source":55,"target":49,"value":12}, | |
{"source":55,"target":39,"value":1}, | |
{"source":55,"target":54,"value":1}, | |
{"source":55,"target":26,"value":21}, | |
{"source":55,"target":11,"value":19}, | |
{"source":55,"target":16,"value":1}, | |
{"source":55,"target":25,"value":2}, | |
{"source":55,"target":41,"value":5}, | |
{"source":55,"target":48,"value":4}, | |
{"source":56,"target":49,"value":1}, | |
{"source":56,"target":55,"value":1}, | |
{"source":57,"target":55,"value":1}, | |
{"source":57,"target":41,"value":1}, | |
{"source":57,"target":48,"value":1}, | |
{"source":58,"target":55,"value":7}, | |
{"source":58,"target":48,"value":7}, | |
{"source":58,"target":27,"value":6}, | |
{"source":58,"target":57,"value":1}, | |
{"source":58,"target":11,"value":4}, | |
{"source":59,"target":58,"value":15}, | |
{"source":59,"target":55,"value":5}, | |
{"source":59,"target":48,"value":6}, | |
{"source":59,"target":57,"value":2}, | |
{"source":60,"target":48,"value":1}, | |
{"source":60,"target":58,"value":4}, | |
{"source":60,"target":59,"value":2}, | |
{"source":61,"target":48,"value":2}, | |
{"source":61,"target":58,"value":6}, | |
{"source":61,"target":60,"value":2}, | |
{"source":61,"target":59,"value":5}, | |
{"source":61,"target":57,"value":1}, | |
{"source":61,"target":55,"value":1}, | |
{"source":62,"target":55,"value":9}, | |
{"source":62,"target":58,"value":17}, | |
{"source":62,"target":59,"value":13}, | |
{"source":62,"target":48,"value":7}, | |
{"source":62,"target":57,"value":2}, | |
{"source":62,"target":41,"value":1}, | |
{"source":62,"target":61,"value":6}, | |
{"source":62,"target":60,"value":3}, | |
{"source":63,"target":59,"value":5}, | |
{"source":63,"target":48,"value":5}, | |
{"source":63,"target":62,"value":6}, | |
{"source":63,"target":57,"value":2}, | |
{"source":63,"target":58,"value":4}, | |
{"source":63,"target":61,"value":3}, | |
{"source":63,"target":60,"value":2}, | |
{"source":63,"target":55,"value":1}, | |
{"source":64,"target":55,"value":5}, | |
{"source":64,"target":62,"value":12}, | |
{"source":64,"target":48,"value":5}, | |
{"source":64,"target":63,"value":4}, | |
{"source":64,"target":58,"value":10}, | |
{"source":64,"target":61,"value":6}, | |
{"source":64,"target":60,"value":2}, | |
{"source":64,"target":59,"value":9}, | |
{"source":64,"target":57,"value":1}, | |
{"source":64,"target":11,"value":1}, | |
{"source":65,"target":63,"value":5}, | |
{"source":65,"target":64,"value":7}, | |
{"source":65,"target":48,"value":3}, | |
{"source":65,"target":62,"value":5}, | |
{"source":65,"target":58,"value":5}, | |
{"source":65,"target":61,"value":5}, | |
{"source":65,"target":60,"value":2}, | |
{"source":65,"target":59,"value":5}, | |
{"source":65,"target":57,"value":1}, | |
{"source":65,"target":55,"value":2}, | |
{"source":66,"target":64,"value":3}, | |
{"source":66,"target":58,"value":3}, | |
{"source":66,"target":59,"value":1}, | |
{"source":66,"target":62,"value":2}, | |
{"source":66,"target":65,"value":2}, | |
{"source":66,"target":48,"value":1}, | |
{"source":66,"target":63,"value":1}, | |
{"source":66,"target":61,"value":1}, | |
{"source":66,"target":60,"value":1}, | |
{"source":67,"target":57,"value":3}, | |
{"source":68,"target":25,"value":5}, | |
{"source":68,"target":11,"value":1}, | |
{"source":68,"target":24,"value":1}, | |
{"source":68,"target":27,"value":1}, | |
{"source":68,"target":48,"value":1}, | |
{"source":68,"target":41,"value":1}, | |
{"source":69,"target":25,"value":6}, | |
{"source":69,"target":68,"value":6}, | |
{"source":69,"target":11,"value":1}, | |
{"source":69,"target":24,"value":1}, | |
{"source":69,"target":27,"value":2}, | |
{"source":69,"target":48,"value":1}, | |
{"source":69,"target":41,"value":1}, | |
{"source":70,"target":25,"value":4}, | |
{"source":70,"target":69,"value":4}, | |
{"source":70,"target":68,"value":4}, | |
{"source":70,"target":11,"value":1}, | |
{"source":70,"target":24,"value":1}, | |
{"source":70,"target":27,"value":1}, | |
{"source":70,"target":41,"value":1}, | |
{"source":70,"target":58,"value":1}, | |
{"source":71,"target":27,"value":1}, | |
{"source":71,"target":69,"value":2}, | |
{"source":71,"target":68,"value":2}, | |
{"source":71,"target":70,"value":2}, | |
{"source":71,"target":11,"value":1}, | |
{"source":71,"target":48,"value":1}, | |
{"source":71,"target":41,"value":1}, | |
{"source":71,"target":25,"value":1}, | |
{"source":72,"target":26,"value":2}, | |
{"source":72,"target":27,"value":1}, | |
{"source":72,"target":11,"value":1}, | |
{"source":73,"target":48,"value":2}, | |
{"source":74,"target":48,"value":2}, | |
{"source":74,"target":73,"value":3}, | |
{"source":75,"target":69,"value":3}, | |
{"source":75,"target":68,"value":3}, | |
{"source":75,"target":25,"value":3}, | |
{"source":75,"target":48,"value":1}, | |
{"source":75,"target":41,"value":1}, | |
{"source":75,"target":70,"value":1}, | |
{"source":75,"target":71,"value":1}, | |
{"source":76,"target":64,"value":1}, | |
{"source":76,"target":65,"value":1}, | |
{"source":76,"target":66,"value":1}, | |
{"source":76,"target":63,"value":1}, | |
{"source":76,"target":62,"value":1}, | |
{"source":76,"target":48,"value":1}, | |
{"source":76,"target":58,"value":1} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Source Sans Pro', sans-serif; | |
font-weight: 300; | |
} | |
b { | |
font-weight: 900; | |
} | |
.outline { | |
fill: none; | |
stroke: #888888; | |
stroke-width: 1px; | |
} | |
#tooltip { | |
font-size: 10pt; | |
font-weight: 900; | |
fill: #000000; | |
stroke: #ffffff; | |
stroke-width: 0.25px; | |
} | |
.node { | |
stroke: #ffffff; | |
stroke-weight: 1px; | |
} | |
.link { | |
fill: none; | |
stroke: #888888; | |
stroke-weight: 1px; | |
stroke-opacity: 0.5; | |
} | |
.highlight { | |
stroke: red; | |
stroke-weight: 4px; | |
stroke-opacity: 1.0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment