d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

99 lines (93 loc) • 16.5 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Force-Directed Graph</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='forcedirected_graph'>Force-Directed Graph</h1> <div class='gallery' id='chart'> </div><link href='force.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='../d3.geom.js?1.12.0' type='text/javascript'> </script><script src='force.js' type='text/javascript'> </script> Layout algorithm inspired by <a href='http://www.csse.monash.edu.au/~tdwyer/'>Tim Dwyer</a> and <a href='http://web.archive.org/web/20080410171619/http://www.teknikus.dk/tj/gdc2001.htm'>Thomas Jakobsen</a>. Data based on character coappearence in Victor Hugo’s Les Misérables, compiled by <a href='http://www-cs-faculty.stanford.edu/~uno/sgb.html'>Donald Knuth</a>. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 var w = 960, 2 h = 500, 3 fill = d3.scale.category20(); 4 5 var vis = d3.select("#chart") 6 .append("svg:svg") 7 .attr("width", w) 8 .attr("height", h); 9 10 d3.json("miserables.json", function(json) { 11 var force = d3.layout.force() 12 .nodes(json.nodes) 13 .links(json.links) 14 .size([w, h]) 15 .start(); 16 17 var link = vis.selectAll("line.link") 18 .data(json.links) 19 .enter().append("svg:line") 20 .attr("class", "link") 21 .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 22 .attr("x1", function(d) { return d.source.x; }) 23 .attr("y1", function(d) { return d.source.y; }) 24 .attr("x2", function(d) { return d.target.x; }) 25 .attr("y2", function(d) { return d.target.y; }); 26 27 var node = vis.selectAll("circle.node") 28 .data(json.nodes) 29 .enter().append("svg:circle") 30 .attr("class", "node") 31 .attr("cx", function(d) { return d.x; }) 32 .attr("cy", function(d) { return d.y; }) 33 .attr("r", 5) 34 .style("fill", function(d) { return fill(d.group); }) 35 .call(force.drag); 36 37 node.append("svg:title") 38 .text(function(d) { return d.name; }); 39 40 vis.style("opacity", 1e-6) 41 .transition() 42 .duration(1000) 43 .style("opacity", 1); 44 45 force.on("tick", function() { 46 link.attr("x1", function(d) { return d.source.x; }) 47 .attr("y1", function(d) { return d.source.y; }) 48 .attr("x2", function(d) { return d.target.x; }) 49 .attr("y2", function(d) { return d.target.y; }); 50 51 node.attr("cx", function(d) { return d.x; }) 52 .attr("cy", function(d) { return d.y; }); 53 }); 54 }); </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>