caged/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://github.com/Caged/d3/raw/master/d3.js"></script>
    <style type="text/css">

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

path {
  fill: lightsteelblue;
  stroke: steelblue;
}

    </style>
  </head>
  <body>
  <script type="text/javascript">
    var data = [
      {name:'jane', connections: ['bob', 'sue']},
      {name:'sue',  connections: ['tom', 'bob', 'jane', 'tom']},
      {name: 'sally', connections: ['bob', 'bob', 'jane', 'tom']},
      {name: 'tom', connections: []},
      {name: 'bob', connections: []}
     ]

    var w = 300,
        h = 300,
        angle = d3.scale.ordinal()
          .domain(d3.range(0, data.length))
          .rangeBands([0, 2 * Math.PI]),
        arc = d3.svg.arc()
          .innerRadius(h / 2 - 20)
          .outerRadius(h / 2 - 10)
          .startAngle(function(d, i) { return angles[d.name].startAngle })
          .endAngle(function(d, i) { return angles[d.name].endAngle })
        line = d3.svg.chord()
          .startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
          .endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
          .radius(h / 2 - 20),
        angles = {},
        connections = []


        data.forEach(function(d, i) {
          var a = angle(i)
          angles[d.name] = {
            startAngle: a,
            endAngle: a + angle.rangeBand() / 2
          }
        })

        data.forEach(function(p) {
          p.connections.forEach(function(c) {
            connections.push({
              source: angles[p.name],
              target: angles[c]
            })
          })
        })


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

    vis.selectAll("path")
        .data(data)
      .enter().append("svg:path")
        .attr("d", arc);

    vis.selectAll('path.c')
      .data(connections)
    .enter().append('svg:path')
      .attr('d', function(d) { return line(d); })
      .attr('class', 'c')

    vis.selectAll('labels')
      .data(data)
    .enter().append('svg:text')
      .attr('transform', function(d) {
        var ct = arc.centroid(d);
        return "translate(" + ct + ")"
      }).text(function(d) { console.log(d); return d.name })

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://github.com/Caged/d3/raw/master/d3.js"></script>
	<style type="text/css">

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	path {
	fill: lightsteelblue;
	stroke: steelblue;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">
	var data = [
	{name:'jane', connections: ['bob', 'sue']},
	{name:'sue', connections: ['tom', 'bob', 'jane', 'tom']},
	{name: 'sally', connections: ['bob', 'bob', 'jane', 'tom']},
	{name: 'tom', connections: []},
	{name: 'bob', connections: []}
	]

	var w = 300,
	h = 300,
	angle = d3.scale.ordinal()
	.domain(d3.range(0, data.length))
	.rangeBands([0, 2 * Math.PI]),
	arc = d3.svg.arc()
	.innerRadius(h / 2 - 20)
	.outerRadius(h / 2 - 10)
	.startAngle(function(d, i) { return angles[d.name].startAngle })
	.endAngle(function(d, i) { return angles[d.name].endAngle })
	line = d3.svg.chord()
	.startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
	.endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
	.radius(h / 2 - 20),
	angles = {},
	connections = []


	data.forEach(function(d, i) {
	var a = angle(i)
	angles[d.name] = {
	startAngle: a,
	endAngle: a + angle.rangeBand() / 2
	}
	})

	data.forEach(function(p) {
	p.connections.forEach(function(c) {
	connections.push({
	source: angles[p.name],
	target: angles[c]
	})
	})
	})


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

	vis.selectAll("path")
	.data(data)
	.enter().append("svg:path")
	.attr("d", arc);

	vis.selectAll('path.c')
	.data(connections)
	.enter().append('svg:path')
	.attr('d', function(d) { return line(d); })
	.attr('class', 'c')

	vis.selectAll('labels')
	.data(data)
	.enter().append('svg:text')
	.attr('transform', function(d) {
	var ct = arc.centroid(d);
	return "translate(" + ct + ")"
	}).text(function(d) { console.log(d); return d.name })

	</script>
	</body>
	</html>