Chord Diagram for Authors

see all steps to build it here: http://www.rjbaxley.com/p/publications.html

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id="chart"> </div>

CSS

#chart {
  font: 10px sans-serif;
}

.chord path {
  fill-opacity: .67;
  stroke: #000;
  stroke-width: .5px;
}

JavaScript

//Weighted graph example
//
//
// From http://mkweb.bcgsc.ca/circos/guide/tables/

var Amat = [
    [0,4,3],
    [2,0,1],
    [1,2,0]
    ];
var chord = d3.layout.chord().padding(.05).sortSubgroups(d3.descending).matrix((Amat));
var names = ["A","B","C"];

var width = 350,
    height = 350,
    innerRadius = Math.min(width, height) * .41,
    outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal().domain(d3.range(9)).range(["#FFDD89", "#957244", "#F26223"]);

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

svg.append("g")
    .selectAll("path")
    .data(chord.groups)
    .enter()
    .append("path")
    .style("fill", function(d) {
    return fill(d.index);
})
    .style("stroke", function(d) {
    return fill(d.index);
})
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)).on("mouseover", fade(.1))
    .on("mouseout", fade(1))
    .attr("id", function(d,i) { return "p"+i;});


svg.append("g")
  .selectAll("text")
    .data(chord.groups)
  .enter().append("text")
      .attr("dy", 15)
      .attr("x", 6)
    .append("textPath")
        .attr("xlink:href", function(d,i) { return "#p" + i; })
        .text(function(d,i) { return names[i]; });;


var ticks = svg.append("g").selectAll("g").data(chord.groups).enter().append("g").selectAll("g").data(groupTicks).enter().append("g").attr("transform", function(d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + outerRadius + ",0)";
});

ticks.append("line").attr("x1", 1).attr("y1", 0).attr("x2", 5).attr("y2", 0).style("stroke", "#000");

ticks.append("text").attr("x", 8).attr("dy", ".35em").attr("text-anchor", function(d) {
    return d.angle > Math.PI ? "end" : null;
}).attr("transform", function(d) {
    return d.angle > Math.PI ? "rotate(180)translate(-16)" : null;
}).text(function(d) {
    return d.label;
});

svg.append("g")
   ...