Last active
August 29, 2015 13:59
-
-
Save revelutions/10574638 to your computer and use it in GitHub Desktop.
Testing d3js force directed graph with collision
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":"0471081124","title":"Lessons Learned in Software Testing: A Context-Driven Approach","count":11,"group":1},{"name":"0471358460","title":"Testing Computer Software, 2nd Edition","count":7,"group":1},{"name":"0201796198","title":"How to Break Software: A Practical Guide to Testing W/CD","count":9,"group":1},{"name":"0470404159","title":"Managing the Testing Process: Practical Tools and Techniques for Managing Hardware and Software Testing","count":9,"group":1},{"name":"0672327988","title":"Software Testing (2nd Edition)","count":5,"group":1},{"name":"0321534468","title":"Agile Testing: A Practical Guide for Testers and Agile Teams","count":10,"group":1},{"name":"1439229074","title":"Software Testing: Fundamental Principles and Essential Knowledge","count":4,"group":1},{"name":"0321803027","title":"How Google Tests Software","count":10,"group":1},{"name":"0201432870","title":"Automated Software Testing: Introduction, Management, and Performance: Introduction, Management, and Performance","count":1,"group":1},{"name":"158053791X","title":"A Practitioner's Guide to Software Test Design","count":5,"group":1},{"name":"0735624259","title":"How We Test Software at Microsoft","count":4,"group":1},{"name":"0321205685","title":"User Stories Applied: For Agile Software Development","count":1,"group":1},{"name":"0321336380","title":"Continuous Integration: Improving Software Quality and Reducing Risk","count":1,"group":1},{"name":"0321579364","title":"Succeeding with Agile: Software Development Using Scrum","count":1,"group":1},{"name":"0321637704","title":"Coaching Agile Teams: A Companion for ScrumMasters, Agile Coaches, and Project Managers in Transition (Addison-Wesley Signature Series (Cohn))","count":1,"group":1},{"name":"0321601912","title":"Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation (Addison-Wesley Signature Series (Fowler))","count":3,"group":1},{"name":"0131479415","title":"Agile Estimating and Planning","count":1,"group":1},{"name":"0137043295","title":"Essential Scrum: A Practical Guide to the Most Popular Agile Process (Addison-Wesley Signature Series (Cohn))","count":1,"group":1},{"name":"0977616649","title":"Agile Retrospectives: Making Good Teams Great","count":1,"group":1},{"name":"0321636414","title":"Exploratory Software Testing: Tips, Tricks, Tours, and Techniques to Guide Test Design","count":2,"group":1},{"name":"0321369440","title":"How to Break Web Software: Functional and Security Testing of Web Applications and Web Services. Book & CD","count":1,"group":1},{"name":"0321194330","title":"How to Break Software Security","count":1,"group":1},{"name":"1933952121","title":"Managing the Test People: A Guide to Practical Technical Management","count":1,"group":1},{"name":"0321580516","title":"Implementing Automated Software Testing: How to Save Time and Lower Costs While Raising Quality","count":3,"group":1},{"name":"0321754069","title":"Experiences of Test Automation: Case Studies of Software Test Automation","count":4,"group":1},{"name":"1617290084","title":"Specification by Example: How Successful Teams Deliver the Right Software","count":2,"group":1},{"name":"1849515743","title":"Selenium Testing Tools Cookbook","count":1,"group":1},{"name":"157231902X","title":"MCSE Training Kit: Networking Essentials Plus, Third Edition (IT Professional)","count":1,"group":1},{"name":"0764541471","title":"UNIX For Dummies","count":1,"group":1},{"name":"0131489062","title":"Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and Iterative Development (3rd Edition)","count":1,"group":1},{"name":"1580535089","title":"Systematic Software Testing (Artech House Computer Library)","count":1,"group":1},{"name":"1935182021","title":"JUnit in Action, Second Edition","count":1,"group":1},{"name":"1604270322","title":"Mastering Software Quality Assurance: Best Practices, Tools and Techniques for Software Developers","count":1,"group":1},{"name":"6056414000","title":"Software Testing Tips: Experiences & Realities","count":1,"group":1},{"name":"0201331403","title":"Software Test Automation","count":1,"group":1},{"name":"0321784154","title":"ATDD by Example: A Practical Guide to Acceptance Test-Driven Development (Addison-Wesley Signature Series (Beck))","count":1,"group":1},{"name":"0596159811","title":"Beautiful Testing: Leading Professionals Reveal How They Improve Software (Theory in Practice)","count":1,"group":1},{"name":"0596520662","title":"The Art of Application Performance Testing: Help for Programmers and Quality Assurance","count":1,"group":1}],"links":[{"source":0,"target":1,"count":1},{"source":1,"target":0,"count":1},{"source":1,"target":2,"count":1},{"source":1,"target":3,"count":1},{"source":1,"target":4,"count":1},{"source":1,"target":5,"count":1},{"source":1,"target":6,"count":1},{"source":1,"target":7,"count":1},{"source":1,"target":8,"count":1},{"source":1,"target":9,"count":1},{"source":1,"target":10,"count":1},{"source":0,"target":5,"count":1},{"source":5,"target":11,"count":1},{"source":5,"target":12,"count":1},{"source":5,"target":13,"count":1},{"source":5,"target":14,"count":1},{"source":5,"target":15,"count":1},{"source":5,"target":0,"count":1},{"source":5,"target":7,"count":1},{"source":5,"target":16,"count":1},{"source":5,"target":17,"count":1},{"source":5,"target":18,"count":1},{"source":0,"target":2,"count":1},{"source":2,"target":0,"count":1},{"source":2,"target":1,"count":1},{"source":2,"target":7,"count":1},{"source":2,"target":19,"count":1},{"source":2,"target":20,"count":1},{"source":2,"target":10,"count":1},{"source":2,"target":5,"count":1},{"source":2,"target":21,"count":1},{"source":2,"target":3,"count":1},{"source":2,"target":9,"count":1},{"source":0,"target":3,"count":1},{"source":3,"target":0,"count":1},{"source":3,"target":5,"count":1},{"source":3,"target":1,"count":1},{"source":3,"target":7,"count":1},{"source":3,"target":6,"count":1},{"source":3,"target":22,"count":1},{"source":3,"target":2,"count":1},{"source":3,"target":23,"count":1},{"source":3,"target":4,"count":1},{"source":3,"target":24,"count":1},{"source":0,"target":7,"count":1},{"source":7,"target":5,"count":1},{"source":7,"target":10,"count":1},{"source":7,"target":24,"count":1},{"source":7,"target":15,"count":1},{"source":7,"target":0,"count":1},{"source":7,"target":2,"count":1},{"source":7,"target":25,"count":1},{"source":7,"target":19,"count":1},{"source":7,"target":3,"count":1},{"source":7,"target":26,"count":1},{"source":0,"target":4,"count":1},{"source":4,"target":0,"count":1},{"source":4,"target":1,"count":1},{"source":4,"target":27,"count":1},{"source":4,"target":28,"count":1},{"source":4,"target":9,"count":1},{"source":4,"target":5,"count":1},{"source":4,"target":6,"count":1},{"source":4,"target":3,"count":1},{"source":4,"target":2,"count":1},{"source":4,"target":7,"count":1},{"source":0,"target":9,"count":1},{"source":9,"target":0,"count":1},{"source":9,"target":29,"count":1},{"source":9,"target":30,"count":1},{"source":9,"target":4,"count":1},{"source":9,"target":1,"count":1},{"source":9,"target":5,"count":1},{"source":9,"target":2,"count":1},{"source":9,"target":31,"count":1},{"source":9,"target":7,"count":1},{"source":9,"target":3,"count":1},{"source":0,"target":6,"count":1},{"source":6,"target":0,"count":1},{"source":6,"target":5,"count":1},{"source":6,"target":1,"count":1},{"source":6,"target":3,"count":1},{"source":6,"target":4,"count":1},{"source":6,"target":7,"count":1},{"source":6,"target":32,"count":1},{"source":6,"target":33,"count":1},{"source":6,"target":2,"count":1},{"source":6,"target":10,"count":1},{"source":0,"target":24,"count":1},{"source":24,"target":7,"count":1},{"source":24,"target":5,"count":1},{"source":24,"target":34,"count":1},{"source":24,"target":23,"count":1},{"source":24,"target":0,"count":1},{"source":24,"target":15,"count":1},{"source":24,"target":35,"count":1},{"source":24,"target":2,"count":1},{"source":24,"target":25,"count":1},{"source":24,"target":3,"count":1},{"source":0,"target":36,"count":1},{"source":36,"target":0,"count":1},{"source":36,"target":7,"count":1},{"source":36,"target":1,"count":1},{"source":36,"target":5,"count":1},{"source":36,"target":3,"count":1},{"source":36,"target":24,"count":1},{"source":36,"target":9,"count":1},{"source":36,"target":23,"count":1},{"source":36,"target":2,"count":1},{"source":36,"target":37,"count":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
circle.node { | |
stroke: #fff; | |
stroke-width: 1.5px; | |
} | |
line.link { | |
stroke: #999; | |
stroke-opacity: .6; | |
} |
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
var width = 960, | |
height = 500, | |
root, | |
node1, | |
link; | |
var color = d3.scale.category20(); | |
var force = d3.layout.force() | |
.charge(-350) | |
.linkDistance(100) | |
.gravity(2) | |
.size([width, height]) | |
.on("tick", tick); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
function tick(e) { | |
var q = d3.geom.quadtree(root.nodes), | |
i = 0, | |
n = root.nodes.length; | |
while (++i < n) q.visit(collide(root.nodes[i])); | |
link | |
.transition() | |
.duration(100) | |
.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; }); | |
node1 | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
} | |
function collide(node) { | |
// change radius to count | |
// node.count + 16 | |
var r = node.count + 16, | |
nx1 = node.x - r, | |
nx2 = node.x + r, | |
ny1 = node.y - r, | |
ny2 = node.y + r; | |
return function(quad, x1, y1, x2, y2) { | |
if (quad.point && (quad.point !== node)) { | |
var x = node.x - quad.point.x, | |
y = node.y - quad.point.y, | |
l = Math.sqrt(x * x + y * y), | |
r = node.radius + quad.point.radius; | |
if (l < r) { | |
l = (l - r) / l * .5; | |
node.x -= x *= l; | |
node.y -= y *= l; | |
quad.point.x += x; | |
quad.point.y += y; | |
} | |
} | |
return x1 > nx2 | |
|| x2 < nx1 | |
|| y1 > ny2 | |
|| y2 < ny1; | |
}; | |
} | |
//miserables.json | |
d3.json("0471081124_force.json", function(json) { | |
root = json; | |
root.radius = 0; | |
root.fixed = true; | |
force | |
.nodes(json.nodes) | |
.links(json.links) | |
.start(); | |
link = svg.selectAll("line.link") | |
.data(json.links) | |
.enter().append("line") | |
.attr("class", "link") | |
.style("stroke-width", function(d) { return Math.sqrt(d.value); }); | |
node1 = svg.selectAll("circle.node") | |
.data(json.nodes) | |
.enter().append("circle") | |
.attr("class", "node") | |
// d.count + 5 | |
.attr("r", function(d) {return d.count + 5; }) | |
.style("fill", function(d) { return color(d.group); }) | |
.call(force.drag); | |
node1.append("title") | |
.text(function(d) { return d.name; }); | |
force.on("tick", tick); | |
}); |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Force-Directed Layout</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<link type="text/css" rel="stylesheet" href="force.css"/> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script type="text/javascript" src="forcec.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment