jedahan/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    ./websocketd --port=8080 ./links.sh

Click to drag nodes. Dashed links are resolved suits; green links are licensing.
Thomson Reuters published a rather abysmal infographic showing the "bowl of spaghetti" that is current flurry of patent-related suits in the mobile communications industry. So, inspired by a comment by John Firebaugh, I remade the visualization to better convey the network. That company in the center? Yeah, it's the world's largest, so little wonder it has the most incoming suits.
Implemented in D3.js.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.link.active {
  stroke: green;
}

.link.disconnected {
  stroke-dasharray: 0,2 1;
}

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

text {
  font: 10px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var ws = new WebSocket('ws://localhost:8080/');

ws.onmessage = function(event) {
  data = event.data;
  console.log(data);
  var data = event.data.split(' ');
  var source = data[0];
  var destinations = data[1].split(',');
  destinations.forEach(function(destination){
    links.push({source: source, target: destination})
  })
  recompute_nodes();
  console.log(links);
};

var links = [];

var nodes = {};

// Compute the distinct nodes from the links.
var recompute_nodes = function(){
  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 width = 960,
    height = 500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

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

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("marker")
    .attr("id", function(d) { return d; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("path")
    .attr("d", "M0,-5L10,0L0,5");

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

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

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
  .enter().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", linkArc);
  circle.attr("transform", transform);
  text.attr("transform", transform);
}

function linkArc(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;
}

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

</script>

## links.csv
Apple HTC,Motorola,Nokia,Samsung
Ericsson ZTE
HTC Apple
Huawei ZTE
Kodak Apple, LG,RIM,Samsung
LG Kodak
Microsoft Inventec
Microsoft Amazon,HTC,Motorola
Microsoft Foxconn
Motorola Apple,Microsoft
Nokia Apple,Qualcomm
Oracle Google
Qualcomm Nokia
RIM Kodak
Samsung Apple,Kodak
Sony LG

## links.sh
#!/bin/bash

# Count from 1 to 10, pausing for a second between each iteration.
while read line; do
  echo $line
  sleep 1
done < links.csv

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	.link.active {
	stroke: green;
	}

	.link.disconnected {
	stroke-dasharray: 0,2 1;
	}

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

	text {
	font: 10px sans-serif;
	pointer-events: none;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var ws = new WebSocket('ws://localhost:8080/');

	ws.onmessage = function(event) {
	data = event.data;
	console.log(data);
	var data = event.data.split(' ');
	var source = data[0];
	var destinations = data[1].split(',');
	destinations.forEach(function(destination){
	links.push({source: source, target: destination})
	})
	recompute_nodes();
	console.log(links);
	};

	var links = [];

	var nodes = {};

	// Compute the distinct nodes from the links.
	var recompute_nodes = function(){
	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 width = 960,
	height = 500;

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([width, height])
	.linkDistance(60)
	.charge(-300)
	.on("tick", tick)
	.start();

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

	// Per-type markers, as they don't inherit styles.
	svg.append("defs").selectAll("marker")
	.data(["suit", "licensing", "resolved"])
	.enter().append("marker")
	.attr("id", function(d) { return d; })
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 15)
	.attr("refY", -1.5)
	.attr("markerWidth", 6)
	.attr("markerHeight", 6)
	.attr("orient", "auto")
	.append("path")
	.attr("d", "M0,-5L10,0L0,5");

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

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

	var text = svg.append("g").selectAll("text")
	.data(force.nodes())
	.enter().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", linkArc);
	circle.attr("transform", transform);
	text.attr("transform", transform);
	}

	function linkArc(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;
	}

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

	</script>
	Apple HTC,Motorola,Nokia,Samsung
	Ericsson ZTE
	HTC Apple
	Huawei ZTE
	Kodak Apple, LG,RIM,Samsung
	LG Kodak
	Microsoft Inventec
	Microsoft Amazon,HTC,Motorola
	Microsoft Foxconn
	Motorola Apple,Microsoft
	Nokia Apple,Qualcomm
	Oracle Google
	Qualcomm Nokia
	RIM Kodak
	Samsung Apple,Kodak
	Sony LG
	#!/bin/bash

	# Count from 1 to 10, pausing for a second between each iteration.
	while read line; do
	echo $line
	sleep 1
	done < links.csv