Step 2 (out of 6) from my blog on How to create a Flow diagram with a circular Twist in which a dummy arc (in light grey) has been added to visually separate the source of the flows and the target of the flows.
An example based on actual data can be found here
////////////////////////////////////////////////////////////
//////////////////////// Set-up ////////////////////////////
////////////////////////////////////////////////////////////
var screenWidth = $(window).width();
var margin = {left: 50, top: 10, right: 50, bottom: 10},
width = Math.min(screenWidth, 800) - margin.left - margin.right,
height = Math.min(screenWidth, 800)*5/6 - margin.top - margin.bottom;
var svg = d3.select("#chart").append("svg")
.attr("width", (width + margin.left + margin.right))
.attr("height", (height + margin.top + margin.bottom));
var wrapper = svg.append("g").attr("class", "chordWrapper")
.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");;
var outerRadius = Math.min(width, height) / 2 - 100,
innerRadius = outerRadius * 0.95,
opacityDefault = 0.7; //default opacity of chords
////////////////////////////////////////////////////////////
////////////////////////// Data ////////////////////////////
////////////////////////////////////////////////////////////
var Names = ["X","Y","Z","Dummy","C","B","A","Dummy"];
var matrix = [
[0,0,0,0,10,5,15,0], //X
[0,0,0,0,5,15,20,0], //Y
[0,0,0,0,15,5,5,0], //Z
[0,0,0,0,0,0,0,40], //Dummy stroke
[10,5,15,0,0,0,0,0], //C
[5,15,5,0,0,0,0,0], //B
[15,20,5,0,0,0,0,0], //A
[0,0,0,40,0,0,0,0] //Dummy stroke
];
var chord = d3.layout.chord()
.padding(.02)
.sortSubgroups(d3.descending) //sort the chords inside an arc from high to low
.sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom
.matrix(matrix);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var path = d3.svg.chord()
.radius(innerRadius);
var fill = d3.scale.ordinal()
.domain(d3.range(Names.length))
.range(["#C4C4C4","#C4C4C4","#C4C4C4","#E0E0E0","#EDC951","#CC333F","#00A0B0","#E0E0E0"]);
////////////////////////////////////////////////////////////
//////////////////// Draw outer Arcs ///////////////////////
////////////////////////////////////////////////////////////
var g = wrapper.selectAll("g.group")
.data(chord.groups)
.enter().append("g")
.attr("class", "group");;
g.append("path")
.style("stroke", function(d) { return fill(d.index); })
.style("fill", function(d) { return fill(d.index); })
.attr("d", arc);
////////////////////////////////////////////////////////////
////////////////////// Append Names ////////////////////////
////////////////////////////////////////////////////////////
g.append("text")
.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2);})
.attr("dy", ".35em")
.attr("class", "titles")
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("transform", function(d,i) {
var c = arc.centroid(d);
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 55) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "")
})
.text(function(d,i) { return Names[i]; });
//+ "translate(" + (innerRadius + 55) + ")"
////////////////////////////////////////////////////////////
//////////////////// Draw inner chords /////////////////////
////////////////////////////////////////////////////////////
var chords = wrapper.selectAll("path.chord")
.data(chord.chords)
.enter().append("path")
.attr("class", "chord")
.style("stroke", "none")
.style("fill", function(d,i) { return fill(d.target.index); })
.style("opacity", opacityDefault)
.attr("d", path);
////////////////////////////////////////////////////////////
///////////////////////// Tooltip //////////////////////////
////////////////////////////////////////////////////////////
//Arcs
g.append("title")
.text(function(d, i) {return Math.round(d.value) + " people in " + Names[i];});
//Chords
chords.append("title")
.text(function(d) {
return [Math.round(d.source.value), " people from ", Names[d.target.index], " to ", Names[d.source.index]].join("");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Stretched Chord to show Flows</title>
<!-- D3.js -->
<script src="//d3js.org/d3.v3.js"></script>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Open Sans & CSS -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #525252;
text-align: center;
}
line {
stroke: #000;
stroke-width: 1.px;
}
text {
font-size: 8px;
}
.titles{
font-size: 10px;
}
path.chord {
fill-opacity: .80;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>