Comparison to d3.chord

Chords from any given group are non intersecting in viz.ch(). The chord layout is created to minimize chord intersections thus reducing cluttering.
viz.ch() uses a custom arc function so that two arcs starting from same point are non intersecting.
Instead of using value/source/target to color each chord, viz.ch() splits each chord between any two groups into two chords and are colored using the respective target colors. This way one is able to quickly see the breakdown of each group from its arc.

For other options/examples, see VizJS

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}

svg text{
  text-anchor:middle;
  font-size:18px;
}
svg .values text{
  pointer-events:none;
  stroke-width: 0.5px;
}
.groups:hover{
  cursor:pointer;
  font-weight:bold;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://vizjs.org/viz.v1.1.2.min.js"></script>
<script>

var width=960, height=960
	,outerRadius = Math.min(width, height) * 0.5 - 40
    ,innerRadius = outerRadius - 30;
	
var m = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
//turn matrix into table
var data=[];
m.forEach(function(r,i){ r.forEach(function(c,j){ data.push([i,j,c])})});

var colors = ["#000000", "#FFDD89", "#957244", "#F26223"];

var ch = viz.ch().data(data).padding(.05)
	  	  .innerRadius(innerRadius)
	  	  .outerRadius(outerRadius)
	  	  .label(function(d){ return ""})
	  	  .startAngle(1.5*Math.PI)
	  	  .fill(function(d){ return colors[d];});

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

svg.append("g").attr("transform", "translate("+width/2+","+height/2+")").call(ch);

// adjust height of frame in bl.ocks.org
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");
      
</script>

Modified http://vizjs.org/viz.v1.1.2.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://vizjs.org/viz.v1.1.2.min.js