phil-pedruco/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is in answer to this Stack Overflow Question and it's an adaptation of the data in that question to Mobile Patent Suits by Mike Bostock.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Force Test</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
path.link {
  fill: none;
  stroke: #666;
  stroke-width: 3px;
}

marker#ID1 {
  fill: blue;
}
path.link.ID1 {
  stroke: blue;
}

marker#ID2 {
  fill: red;
}
path.link.ID2 {
  stroke: red;
}

circle {
  fill: #333;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}
</style>
  </head>
  <body>

    <script type="text/javascript">

    d3.csv("test.csv", function(links) {

      var nodes = {};

      // Compute the distinct nodes from the links.
      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 w = 960,
          h = 500;

      var force = d3.layout.force()
          .nodes(d3.values(nodes))
          .links(links)
          .size([w, h])
          .linkDistance(250)
          .charge(-500)
          .on("tick", tick)
          .friction(0.5)
          .linkStrength(0.1)
          .start();

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

      var path = svg.append("g").selectAll("path")
          .data(force.links())
        .enter().append("path")
          .attr("class", function (d,i) { return "link " + d.type; })
          .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

      var circle = svg.append("g").selectAll("circle")
          .data(force.nodes())
        .enter().append("circle")
          .attr("r", 8)
          .call(force.drag);

      var text = svg.append("g").selectAll("g")
          .data(force.nodes())
        .enter().append("g");

      // A copy of the text with a thick white stroke for legibility.
      text.append("text")
          .attr("x", 8)
          .attr("y", ".31em")
          .attr("class", "shadow")
          .text(function(d) { return d.name; });

      text.append("text")
          .attr("x", 8)
          .attr("y", ".31em")
          .text(function(d) { return d.name; });

      // Use elliptical arc path segments to doubly-encode directionality.
      function tick() {
        path.attr("d", function(d) {
          var dx = d.target.x - d.source.x,
              dy = d.target.y - d.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
          return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.      x + "," + d.target.y;
        });

        circle.attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });

        text.attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
      }

});
    </script>
  </body>
</html>

## test.csv

          
            id
            source
            target
            type

            
              1
              ObjectA
              ObjectC
              ID1

            
              2
              ObjectA
              ObjectB
              ID1

            
              4
              ObjectB
              ObjectC
              ID1

            
              7
              ObjectC
              ObjectA
              ID2

            
              8
              ObjectB
              ObjectA
              ID2

            
              10
              ObjectC
              ObjectB
              ID2
	<!DOCTYPE html>
	<html>
	<head>
	<title>Force Test</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	path.link {
	fill: none;
	stroke: #666;
	stroke-width: 3px;
	}

	marker#ID1 {
	fill: blue;
	}
	path.link.ID1 {
	stroke: blue;
	}

	marker#ID2 {
	fill: red;
	}
	path.link.ID2 {
	stroke: red;
	}

	circle {
	fill: #333;
	stroke: #333;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	pointer-events: none;
	}

	text.shadow {
	stroke: #fff;
	stroke-width: 3px;
	stroke-opacity: .8;
	}
	</style>
	</head>
	<body>

	<script type="text/javascript">

	d3.csv("test.csv", function(links) {

	var nodes = {};

	// Compute the distinct nodes from the links.
	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 w = 960,
	h = 500;

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([w, h])
	.linkDistance(250)
	.charge(-500)
	.on("tick", tick)
	.friction(0.5)
	.linkStrength(0.1)
	.start();

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

	var path = svg.append("g").selectAll("path")
	.data(force.links())
	.enter().append("path")
	.attr("class", function (d,i) { return "link " + d.type; })
	.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

	var circle = svg.append("g").selectAll("circle")
	.data(force.nodes())
	.enter().append("circle")
	.attr("r", 8)
	.call(force.drag);

	var text = svg.append("g").selectAll("g")
	.data(force.nodes())
	.enter().append("g");

	// A copy of the text with a thick white stroke for legibility.
	text.append("text")
	.attr("x", 8)
	.attr("y", ".31em")
	.attr("class", "shadow")
	.text(function(d) { return d.name; });

	text.append("text")
	.attr("x", 8)
	.attr("y", ".31em")
	.text(function(d) { return d.name; });

	// Use elliptical arc path segments to doubly-encode directionality.
	function tick() {
	path.attr("d", function(d) {
	var dx = d.target.x - d.source.x,
	dy = d.target.y - d.source.y,
	dr = Math.sqrt(dx * dx + dy * dy);
	return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target. x + "," + d.target.y;
	});

	circle.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	});

	text.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")";
	});
	}

	});
	</script>
	</body>
	</html>
id	source	target	type
1	ObjectA	ObjectC	ID1
2	ObjectA	ObjectB	ID1
4	ObjectB	ObjectC	ID1
7	ObjectC	ObjectA	ID2
8	ObjectB	ObjectA	ID2
10	ObjectC	ObjectB	ID2