eurica/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple modification of the Force directed d3.js demo that keeps the x co-ordinate fixed.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{margin:0; overflow:hidden}
.link {
  stroke: #999;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = window.innerWidth,
    height = window.innerHeight;


var graph = {
  nodes:[],
  links:[]
}
var max_depth = 4
var avg_children = 3
var n = 0
id = function() {
  return n++;
}
make_children = function (depth, parent) {
  var me = id()
  node = {name:"name"+me, depth:depth}

  if(depth==0){
    node.fixedx=1
  } else {
      node.fixedx = (width/(max_depth+1)) * ( depth + Math.random() )
  }

  graph.nodes.push(node)
  if(parent!=null) graph.links.push({source:parent,target:me,value:1})

  s = ""
  for(var i=0;i<=depth;i++) s+="-";
  s+=me
  var children_local = depth ? avg_children * Math.random() * 2 : avg_children
  if(depth<max_depth) {
    for(var j=0;j<children_local;j++) {
      make_children(depth+1, me)
    }
  }
}
make_children(0)


var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

force
    .nodes(graph.nodes)
    .links(graph.links)

var n = graph.nodes.length;
graph.nodes.forEach(function(d, i) {
  d.x = width * Math.random();
  d.y = height * Math.random();
  if(d.fixedx) d.x=d.fixedx
});


force.start();

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d) { return color(d.depth); })
    .on("click", function(d) {console.log(d)})
    .call(force.drag);

node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

node.append("title")
    .text(function(d) { return d.name; });


force.on("tick", function() {

  graph.nodes.forEach(function(d, i) {
    if(d.fixedx) d.x=d.fixedx
  });

  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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body{margin:0; overflow:hidden}
	.link {
	stroke: #999;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = window.innerWidth,
	height = window.innerHeight;



	var graph = {
	nodes:[],
	links:[]
	}
	var max_depth = 4
	var avg_children = 3
	var n = 0
	id = function() {
	return n++;
	}
	make_children = function (depth, parent) {
	var me = id()
	node = {name:"name"+me, depth:depth}

	if(depth==0){
	node.fixedx=1
	} else {
	node.fixedx = (width/(max_depth+1)) * ( depth + Math.random() )
	}

	graph.nodes.push(node)
	if(parent!=null) graph.links.push({source:parent,target:me,value:1})

	s = ""
	for(var i=0;i<=depth;i++) s+="-";
	s+=me
	var children_local = depth ? avg_children * Math.random() * 2 : avg_children
	if(depth<max_depth) {
	for(var j=0;j<children_local;j++) {
	make_children(depth+1, me)
	}
	}
	}
	make_children(0)


	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-120)
	.linkDistance(30)
	.size([width, height]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	force
	.nodes(graph.nodes)
	.links(graph.links)

	var n = graph.nodes.length;
	graph.nodes.forEach(function(d, i) {
	d.x = width * Math.random();
	d.y = height * Math.random();
	if(d.fixedx) d.x=d.fixedx
	});


	force.start();

	var link = svg.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return Math.sqrt(d.value); });

	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", 5)
	.style("fill", function(d) { return color(d.depth); })
	.on("click", function(d) {console.log(d)})
	.call(force.drag);

	node.append("image")
	.attr("xlink:href", "https://github.com/favicon.ico")
	.attr("x", -8)
	.attr("y", -8)
	.attr("width", 16)
	.attr("height", 16);

	node.append("title")
	.text(function(d) { return d.name; });


	force.on("tick", function() {

	graph.nodes.forEach(function(d, i) {
	if(d.fixedx) d.x=d.fixedx
	});

	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>