D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jarib
Full window
Github gist
Kraftgraf for formueskatt v0.1
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Force-Directed Layout</title> <script src="https://d3js.org/d3.v2.js"></script> <style type="text/css"> circle { stroke-width: 1.5px; } line { stroke: #999; } </style> </head> <body> <script type="text/javascript"> var width = 960, height = 500, radius = 6, fill = d3.scale.category20(); var force = d3.layout.force() .gravity(.01) .charge(-120) .linkDistance(60) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("issue-graph.json", function(json) { var link = svg.selectAll("line") .data(json.links) .enter().append("line"); var node = svg.selectAll("circle") .data(json.nodes) .enter().append("circle") .attr("r", radius - .75) .style("fill", function(d) { return fill(d.group); }) .style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); }) .call(force.drag); force .nodes(json.nodes) .links(json.links) .on("tick", tick) .start(); function tick() { node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 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; }); } }); </script> </body> </html>
Modified
http://d3js.org/d3.v2.js
to a secure url
https://d3js.org/d3.v2.js