mbostock/.block

## .block
license: gpl-3.0

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

circle {
  fill: #000;
  stroke: #fff;
  stroke-width: 2px;
}

path {
  fill: none;
  stroke: #999;
  stroke-width: 1.5px;
}

text {
  font: bold 10px sans-serif;
}

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

var width = 960,
    height = 500,
    radius = 240;

var angle = d3.scale.ordinal()
    .rangePoints([0, 360], 1);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("network.json", function(error, nodes) {
  if (error) throw error;

  var nodeByName = d3.map(),
      links = [];

  nodes.forEach(function(d) { nodeByName.set(d.name, d); });

  nodes.forEach(function(source) {
    source.connections.forEach(function(target) {
      links.push({source: source, target: nodeByName.get(target)});
    });
  });

  angle.domain(nodes.map(function(d) { return d.name; }));

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("path")
      .data(links)
    .enter().append("path")
      .attr("d", curve);

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("g")
      .data(nodes)
    .enter().append("g")
      .attr("transform", function(d) { return "rotate(" + angle(d.name) + ")translate(" + radius + ",0)"; });

  node.append("circle")
      .attr("r", 5);

  node.append("text")
      .attr("dy", ".35em")
      .attr("x", 6)
      .text(function(d) { return d.name; })
    .filter(function(d) { return (angle(d.name) + 90) % 360 > 180; }) // flipped
      .attr("x", -6)
      .attr("transform", "rotate(-180)")
      .style("text-anchor", "end");
});

function curve(link) {
  var a0 = angle(link.source.name) / 180 * Math.PI,
      a1 = angle(link.target.name) / 180 * Math.PI,
      x0 = Math.cos(a0) * radius, y0 = Math.sin(a0) * radius,
      x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius,
      dx = x0 - x1,
      dy = y0 - y1,
      l = Math.sqrt(dx * dx + dy * dy);
  return "M" + x0 + "," + y0
      + "A" + l * 2 + "," + l * 2 + " 0 0 1 "
      + x1 + "," + y1;
}

</script>

## network.json
[
  {"name": "Bob", "connections": ["Jane", "Tom", "Sue"]},
  {"name": "Jane", "connections": ["Bob", "Sue"]},
  {"name": "Sue", "connections": ["Tom", "Bob", "Jane", "Tom"]},
  {"name": "Tom", "connections": []}
]

## thumbnail.png

      
    Raw
  

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

	circle {
	fill: #000;
	stroke: #fff;
	stroke-width: 2px;
	}

	path {
	fill: none;
	stroke: #999;
	stroke-width: 1.5px;
	}

	text {
	font: bold 10px sans-serif;
	}

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

	var width = 960,
	height = 500,
	radius = 240;

	var angle = d3.scale.ordinal()
	.rangePoints([0, 360], 1);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	d3.json("network.json", function(error, nodes) {
	if (error) throw error;

	var nodeByName = d3.map(),
	links = [];

	nodes.forEach(function(d) { nodeByName.set(d.name, d); });

	nodes.forEach(function(source) {
	source.connections.forEach(function(target) {
	links.push({source: source, target: nodeByName.get(target)});
	});
	});

	angle.domain(nodes.map(function(d) { return d.name; }));

	var link = svg.append("g")
	.attr("class", "links")
	.selectAll("path")
	.data(links)
	.enter().append("path")
	.attr("d", curve);

	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("g")
	.data(nodes)
	.enter().append("g")
	.attr("transform", function(d) { return "rotate(" + angle(d.name) + ")translate(" + radius + ",0)"; });

	node.append("circle")
	.attr("r", 5);

	node.append("text")
	.attr("dy", ".35em")
	.attr("x", 6)
	.text(function(d) { return d.name; })
	.filter(function(d) { return (angle(d.name) + 90) % 360 > 180; }) // flipped
	.attr("x", -6)
	.attr("transform", "rotate(-180)")
	.style("text-anchor", "end");
	});

	function curve(link) {
	var a0 = angle(link.source.name) / 180 * Math.PI,
	a1 = angle(link.target.name) / 180 * Math.PI,
	x0 = Math.cos(a0) * radius, y0 = Math.sin(a0) * radius,
	x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius,
	dx = x0 - x1,
	dy = y0 - y1,
	l = Math.sqrt(dx * dx + dy * dy);
	return "M" + x0 + "," + y0
	+ "A" + l * 2 + "," + l * 2 + " 0 0 1 "
	+ x1 + "," + y1;
	}

	</script>
	[
	{"name": "Bob", "connections": ["Jane", "Tom", "Sue"]},
	{"name": "Jane", "connections": ["Bob", "Sue"]},
	{"name": "Sue", "connections": ["Tom", "Bob", "Jane", "Tom"]},
	{"name": "Tom", "connections": []}
	]