Last active
December 18, 2015 23:19
-
-
Save bhyde/5861233 to your computer and use it in GitHub Desktop.
D3, a slightly sorted
This file contains hidden or 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
| <head> | |
| <style> | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #666; | |
| stroke-width: 1.5px; | |
| marker-end:url(#arrow1); | |
| } | |
| marker{ | |
| fill:none; | |
| stroke: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var graph = {"nodes":[{"name":"plot-window","group":1},{"name":"uiop","group":1},{"name":"alexandria","group":1},{"name":"log4cl","group":1},{"name":"bordeaux-threads","group":1},{"name":"optima","group":1},{"name":"closer-mop","group":1},{"name":"hunchentoot","group":1},{"name":"chunga","group":1},{"name":"trivial-gray-streams","group":1},{"name":"cl-base64","group":1},{"name":"cl-fad","group":1},{"name":"cl-ppcre","group":1},{"name":"flexi-streams","group":1},{"name":"cl+ssl","group":1},{"name":"cffi","group":1},{"name":"trivial-features","group":1},{"name":"babel","group":1},{"name":"trivial-garbage","group":1},{"name":"md5","group":1},{"name":"rfc2388","group":1},{"name":"trivial-backtrace","group":1},{"name":"usocket","group":1},{"name":"cl-who","group":1},{"name":"cl-interpol","group":1},{"name":"cl-unicode","group":1},{"name":"named-readtables","group":1},{"name":"parenscript","group":1},{"name":"anaphora","group":1},{"name":"css-lite","group":1},{"name":"clws","group":1},{"name":"chanl","group":1},{"name":"iolib","group":1},{"name":"iolib.base","group":1},{"name":"iolib.multiplex","group":1},{"name":"iolib.syscalls","group":1},{"name":"cffi-grovel","group":1},{"name":"iolib.streams","group":1},{"name":"iolib.sockets","group":1},{"name":"ironclad","group":1},{"name":"nibbles","group":1},{"name":"split-sequence","group":1},{"name":"cl-json","group":1}],"links":[{"target":3,"source":4,"wieght":1},{"target":36,"source":15,"wieght":1},{"target":36,"source":2,"wieght":1},{"target":7,"source":8,"wieght":1},{"target":7,"source":10,"wieght":1},{"target":7,"source":11,"wieght":1},{"target":7,"source":12,"wieght":1},{"target":7,"source":13,"wieght":1},{"target":7,"source":14,"wieght":1},{"target":7,"source":19,"wieght":1},{"target":7,"source":20,"wieght":1},{"target":7,"source":21,"wieght":1},{"target":7,"source":22,"wieght":1},{"target":7,"source":4,"wieght":1},{"target":37,"source":33,"wieght":1},{"target":37,"source":34,"wieght":1},{"target":37,"source":15,"wieght":1},{"target":37,"source":18,"wieght":1},{"target":17,"source":16,"wieght":1},{"target":17,"source":2,"wieght":1},{"target":30,"source":31,"wieght":1},{"target":30,"source":32,"wieght":1},{"target":30,"source":39,"wieght":1},{"target":30,"source":8,"wieght":1},{"target":30,"source":10,"wieght":1},{"target":30,"source":13,"wieght":1},{"target":30,"source":41,"wieght":1},{"target":0,"source":1,"wieght":1},{"target":0,"source":2,"wieght":1},{"target":0,"source":3,"wieght":1},{"target":0,"source":5,"wieght":1},{"target":0,"source":7,"wieght":1},{"target":0,"source":23,"wieght":1},{"target":0,"source":24,"wieght":1},{"target":0,"source":26,"wieght":1},{"target":0,"source":27,"wieght":1},{"target":0,"source":29,"wieght":1},{"target":0,"source":30,"wieght":1},{"target":0,"source":42,"wieght":1},{"target":34,"source":33,"wieght":1},{"target":34,"source":35,"wieght":1},{"target":34,"source":15,"wieght":1},{"target":38,"source":33,"wieght":1},{"target":38,"source":35,"wieght":1},{"target":38,"source":37,"wieght":1},{"target":38,"source":17,"wieght":1},{"target":38,"source":15,"wieght":1},{"target":38,"source":36,"wieght":1},{"target":38,"source":4,"wieght":1},{"target":8,"source":9,"wieght":1},{"target":33,"source":2,"wieght":1},{"target":24,"source":25,"wieght":1},{"target":4,"source":2,"wieght":1},{"target":31,"source":4,"wieght":1},{"target":14,"source":15,"wieght":1},{"target":14,"source":9,"wieght":1},{"target":14,"source":13,"wieght":1},{"target":14,"source":4,"wieght":1},{"target":14,"source":18,"wieght":1},{"target":39,"source":40,"wieght":1},{"target":35,"source":16,"wieght":1},{"target":35,"source":15,"wieght":1},{"target":35,"source":36,"wieght":1},{"target":35,"source":33,"wieght":1},{"target":15,"source":2,"wieght":1},{"target":15,"source":16,"wieght":1},{"target":15,"source":17,"wieght":1},{"target":27,"source":12,"wieght":1},{"target":27,"source":28,"wieght":1},{"target":27,"source":26,"wieght":1},{"target":25,"source":12,"wieght":1},{"target":32,"source":33,"wieght":1},{"target":32,"source":34,"wieght":1},{"target":32,"source":37,"wieght":1},{"target":32,"source":38,"wieght":1},{"target":13,"source":9,"wieght":1},{"target":11,"source":4,"wieght":1},{"target":11,"source":2,"wieght":1},{"target":5,"source":2,"wieght":1},{"target":5,"source":6,"wieght":1}]}; | |
| var width = 960, height = 500; | |
| var color = d3.scale.category20(); | |
| var force = d3.layout.force() | |
| .charge(-120) | |
| .linkDistance(50) | |
| .size([width, height]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Our arrow head marker | |
| svg.append("defs").append("marker") | |
| .attr("id", "arrow1") | |
| .attr("refX", 6 + 3) /*must be smarter way to calculate shift*/ | |
| .attr("refY", 2) | |
| .attr("markerWidth", 6) | |
| .attr("markerHeight", 4) | |
| .attr("orient", "auto") | |
| .append("path") | |
| .attr("d","M 0 0 L 10 5 L 0 10"); | |
| force.nodes(graph.nodes) | |
| .links(graph.links) | |
| .start(); | |
| var link = svg.selectAll("line.link") | |
| .data(force.links()) | |
| .enter() | |
| .append("line") | |
| .attr("class", "link"); | |
| var node = svg.selectAll(".node") | |
| .data(force.nodes()) | |
| .enter().append("circle") | |
| .attr("class", "node") | |
| .attr("r", 5) | |
| .style("fill", function(d) { return color(d.group); }) | |
| .call(force.drag); | |
| node.append("title").text(function(d) { return d.name; }); | |
| force.on("tick", function(e) { | |
| // kick things slightly into directed graph order | |
| var k = -3 * e.alpha; | |
| force.links().forEach(function(d, i) { | |
| d.source.y -= k; | |
| d.target.y += k; | |
| }); | |
| 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; }); | |
| node.attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment