Translocation Diagram

Translocation diagram shows how a snippet of one group relates to another snippet of another group. Each arc shows that relationship. This is especially useful in genetics research to show the translocations of a snippet of DNA from one chromosome (group) to another chromosome. The set up for this sample is very simple to an existing D3 chord diagram with exception to the data matrix. Pull new D3 code from https://github.com/rkophs/d3/tree/translocation_graph.

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

body {
  font: 10px sans-serif;
}

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

</style>
<body>
<script src="rkophs.modified.d3.min.js"></script>
<script>

var groups = [60, 70, 80, 90];
var translocations = [
  [0, 10, 1, 15, 5, 5], //[srcGrp, srcGroupSubLocation, targetGrp, targetGrpSubLocation, srcWidth, targetWidth, optionalAttrsObject]
  [3, 20, 2, 25, 10, 5],
  [2, 30, 2, 45, 3, 5],
  [1, 40, 0, 35, 15, 5],
];

var translocation = d3.layout.translocation()
    .padding(.05)
    .groups(groups)
    .edges(translocations);

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

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

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

svg.append("g").selectAll("path")
    .data(translocation.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));

var ticks = svg.append("g").selectAll("g")
    .data(translocation.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("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return d.label; });

svg.append("g")
    .attr("class", "chord")
    .selectAll("path")
    .data(translocation.edges)
    .enter().append("path")
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("fill", function(d) { return fill(d.source.index); })
    .style("stroke", function(d) { return fill(d.source.index); })
    .style("opacity", 1);

// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, 5).map(function(v, i) {
    return {
      angle: v * k + d.startAngle,
      label: i % 5 ? null : v
    };
  });
}

// Returns an event handler for fading a given chord group.
function fade(opacity) {
  return function(g, i) {
    svg.selectAll(".chord path")
        .filter(function(d) { return d.source.index != i; })
      .transition()
        .style("opacity", opacity);
  };
}

</script>