Compare this to the d3.chord example
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.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="//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>