Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/9233847 to your computer and use it in GitHub Desktop.
Save aaizemberg/9233847 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js: force layout (con 300 ejes)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="300 ejes" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>D3: Force layout (300 ejes)</title>
</head>
<body>
<script type="text/javascript">
var w = 600;
var h = 500;
var r = 10;
var nodes = {};
var links = [
{'source':69,'target':282},
{'source':53,'target':214},
{'source':86,'target':68},
{'source':198,'target':165},
{'source':284,'target':146},
{'source':41,'target':185},
{'source':80,'target':284},
{'source':261,'target':44},
{'source':152,'target':69},
{'source':68,'target':203},
{'source':219,'target':158},
{'source':59,'target':134},
{'source':208,'target':278},
{'source':102,'target':143},
{'source':22,'target':81},
{'source':277,'target':145},
{'source':250,'target':196},
{'source':145,'target':81},
{'source':183,'target':97},
{'source':232,'target':147},
{'source':117,'target':64},
{'source':119,'target':89},
{'source':199,'target':176},
{'source':184,'target':8},
{'source':219,'target':233},
{'source':115,'target':273},
{'source':66,'target':171},
{'source':76,'target':135},
{'source':285,'target':278},
{'source':248,'target':135},
{'source':167,'target':59},
{'source':54,'target':260},
{'source':300,'target':49},
{'source':252,'target':127},
{'source':251,'target':125},
{'source':284,'target':194},
{'source':293,'target':11},
{'source':30,'target':109},
{'source':244,'target':238},
{'source':144,'target':79},
{'source':98,'target':12},
{'source':163,'target':96},
{'source':203,'target':213},
{'source':6,'target':289},
{'source':265,'target':238},
{'source':224,'target':294},
{'source':177,'target':255},
{'source':56,'target':95},
{'source':199,'target':168},
{'source':187,'target':279},
{'source':172,'target':272},
{'source':286,'target':182},
{'source':107,'target':59},
{'source':6,'target':35},
{'source':169,'target':59},
{'source':264,'target':225},
{'source':290,'target':104},
{'source':188,'target':271},
{'source':25,'target':248},
{'source':224,'target':135},
{'source':55,'target':6},
{'source':283,'target':292},
{'source':9,'target':98},
{'source':290,'target':104},
{'source':70,'target':273},
{'source':206,'target':236},
{'source':169,'target':226},
{'source':4,'target':114},
{'source':170,'target':138},
{'source':300,'target':62},
{'source':109,'target':116},
{'source':190,'target':99},
{'source':152,'target':107},
{'source':172,'target':97},
{'source':227,'target':167},
{'source':40,'target':73},
{'source':78,'target':241},
{'source':219,'target':244},
{'source':29,'target':114},
{'source':88,'target':114},
{'source':280,'target':223},
{'source':178,'target':112},
{'source':66,'target':263},
{'source':52,'target':135},
{'source':142,'target':61},
{'source':204,'target':101},
{'source':201,'target':178},
{'source':124,'target':96},
{'source':160,'target':125},
{'source':34,'target':213},
{'source':269,'target':192},
{'source':20,'target':69},
{'source':169,'target':135},
{'source':124,'target':187},
{'source':177,'target':28},
{'source':96,'target':231},
{'source':88,'target':132},
{'source':20,'target':255},
{'source':196,'target':114},
{'source':186,'target':148},
{'source':290,'target':116},
{'source':298,'target':16},
{'source':135,'target':67},
{'source':154,'target':3},
{'source':201,'target':254},
{'source':127,'target':87},
{'source':188,'target':4},
{'source':115,'target':183},
{'source':99,'target':46},
{'source':278,'target':186},
{'source':177,'target':250},
{'source':205,'target':132},
{'source':19,'target':101},
{'source':246,'target':213},
{'source':286,'target':93},
{'source':19,'target':276},
{'source':208,'target':16},
{'source':292,'target':43},
{'source':82,'target':145},
{'source':46,'target':283},
{'source':98,'target':173},
{'source':70,'target':286},
{'source':176,'target':185},
{'source':168,'target':274},
{'source':230,'target':145},
{'source':159,'target':107},
{'source':95,'target':64},
{'source':238,'target':113},
{'source':164,'target':184},
{'source':26,'target':150},
{'source':276,'target':44},
{'source':126,'target':184},
{'source':60,'target':117},
{'source':226,'target':142},
{'source':261,'target':272},
{'source':124,'target':59},
{'source':144,'target':194},
{'source':44,'target':19},
{'source':78,'target':211},
{'source':293,'target':8},
{'source':56,'target':152},
{'source':114,'target':150},
{'source':215,'target':52},
{'source':263,'target':79},
{'source':235,'target':288},
{'source':229,'target':211},
{'source':32,'target':54},
{'source':94,'target':91},
{'source':170,'target':20},
{'source':233,'target':131},
{'source':291,'target':56},
{'source':190,'target':135},
{'source':250,'target':234},
{'source':153,'target':27},
{'source':144,'target':146},
{'source':34,'target':200},
{'source':297,'target':148},
{'source':49,'target':211},
{'source':200,'target':11},
{'source':290,'target':134},
{'source':299,'target':218},
{'source':44,'target':31},
{'source':271,'target':138},
{'source':121,'target':141},
{'source':157,'target':53},
{'source':272,'target':148},
{'source':109,'target':161},
{'source':282,'target':58},
{'source':94,'target':135},
{'source':85,'target':238},
{'source':280,'target':119},
{'source':137,'target':276},
{'source':267,'target':186},
{'source':187,'target':166},
{'source':197,'target':176},
{'source':300,'target':195},
{'source':94,'target':43},
{'source':225,'target':65},
{'source':180,'target':46},
{'source':205,'target':37},
{'source':99,'target':177},
{'source':184,'target':207},
{'source':38,'target':166},
{'source':265,'target':132},
{'source':300,'target':50},
{'source':70,'target':280},
{'source':169,'target':206},
{'source':256,'target':135},
{'source':92,'target':142},
{'source':300,'target':288},
{'source':18,'target':299},
{'source':183,'target':111},
{'source':42,'target':108},
{'source':175,'target':222},
{'source':153,'target':80},
{'source':258,'target':251},
{'source':256,'target':142},
{'source':158,'target':294},
{'source':7,'target':123},
{'source':125,'target':7},
{'source':173,'target':194},
{'source':287,'target':41},
{'source':100,'target':242},
{'source':175,'target':191},
{'source':83,'target':175},
{'source':178,'target':100},
{'source':174,'target':61},
{'source':210,'target':215},
{'source':168,'target':85},
{'source':136,'target':20},
{'source':164,'target':94},
{'source':271,'target':120},
{'source':236,'target':129},
{'source':113,'target':242},
{'source':252,'target':238},
{'source':249,'target':124},
{'source':131,'target':235},
{'source':164,'target':230},
{'source':176,'target':39},
{'source':121,'target':259},
{'source':213,'target':299},
{'source':59,'target':86},
{'source':59,'target':268},
{'source':1,'target':226},
{'source':53,'target':137},
{'source':246,'target':216},
{'source':230,'target':216},
{'source':36,'target':166},
{'source':45,'target':148},
{'source':107,'target':296},
{'source':86,'target':56},
{'source':119,'target':216},
{'source':291,'target':283},
{'source':146,'target':167},
{'source':21,'target':267},
{'source':125,'target':234},
{'source':265,'target':183},
{'source':20,'target':24},
{'source':151,'target':21},
{'source':249,'target':203},
{'source':157,'target':194},
{'source':119,'target':87},
{'source':110,'target':154},
{'source':252,'target':154},
{'source':2,'target':59},
{'source':149,'target':87},
{'source':115,'target':268},
{'source':3,'target':105},
{'source':250,'target':149},
{'source':271,'target':271},
{'source':115,'target':96},
{'source':205,'target':80},
{'source':278,'target':224},
{'source':103,'target':129},
{'source':244,'target':51},
{'source':32,'target':101},
{'source':245,'target':150},
{'source':187,'target':54},
{'source':3,'target':139},
{'source':208,'target':5},
{'source':197,'target':57},
{'source':92,'target':11},
{'source':24,'target':94},
{'source':116,'target':273},
{'source':242,'target':86},
{'source':244,'target':57},
{'source':182,'target':148},
{'source':136,'target':160},
{'source':72,'target':238},
{'source':288,'target':16},
{'source':288,'target':19},
{'source':116,'target':233},
{'source':169,'target':3},
{'source':287,'target':172},
{'source':141,'target':194},
{'source':176,'target':38},
{'source':250,'target':267},
{'source':49,'target':274},
{'source':61,'target':164},
{'source':247,'target':3},
{'source':250,'target':190},
{'source':59,'target':131},
{'source':37,'target':195},
{'source':290,'target':108},
{'source':132,'target':277},
{'source':123,'target':120},
{'source':296,'target':239},
{'source':52,'target':164},
{'source':241,'target':38},
{'source':35,'target':82},
{'source':232,'target':211},
{'source':119,'target':181},
{'source':178,'target':167},
{'source':154,'target':238},
{'source':31,'target':100},
{'source':240,'target':280},
{'source':290,'target':299},
{'source':110,'target':26},
{'source':193,'target':99},
{'source':76,'target':256},
];
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([w, h])
.linkDistance(20)
.linkStrength(1)
.friction(0.5)
.charge(-50)
.gravity(0.1) // 0.1 (default)
.theta(0.8) // 0.8 (default)
.start();
var colors = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
//.attr("pointer-events", "all")
//.attr("pointer-events", "visible")
.call(d3.behavior.zoom().on("zoom", redraw))
.append('g');
var edges = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style("stroke", "rgba(0, 0, 0, 0.1)" )
.style("stroke-width", 1 );
var nodes = svg.selectAll("circle")
.data(d3.values(nodes))
.enter()
.append("circle")
.attr("r", function(d) {return 2*d.weight;})
.style("fill", function(d) { return colors(d.weight); })
.attr("title", function(d) { return d.weight; })
.call(force.drag);
force.on("tick", function() {
edges.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; });
// comportamiento default segun los parametros del Force Layout
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
// cx y cy limitado al bounding box
// nodes.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
// .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
// modificando la posición, según drag & zoom in/out
// nodes.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
function redraw() {
// console.log("translate --> " + d3.event.translate, "scale --> " + d3.event.scale);
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment