block by nbremer 1527c2dd26a26d9ee942

Stretched Chord - Step 1 - How to set up a Chord Diagram matrix to show Flows

Full Screen

Step 1 (out of 6) from my blog on How to create a Flow diagram with a circular Twist in which the data has been set up in such a way that all chords flow only between arcs on the left and right half

An example based on actual data can be found here

script.js

////////////////////////////////////////////////////////////
//////////////////////// 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","C","B","A"];

var matrix = [
	[0,0,0,10,5,15], //X
	[0,0,0,5,15,20], //Y
	[0,0,0,15,5,5], //Z
	[10,5,15,0,0,0], //C
	[5,15,5,0,0,0], //B
	[15,20,5,0,0,0] //A
];

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","#EDC951","#CC333F","#00A0B0"]);

////////////////////////////////////////////////////////////
//////////////////// 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 colors = ["#00A0B0","#CC333F","#EDC951"];
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(""); 
	});

index.html

<!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>