Hierarchical Chord Chart

by boinky

HTML

<div class="content"></div>

CSS

.faculty-group text,
.area-group text 
{
  font: 11px sans-serif;
  pointer-events: none;
}

.faculty-group path,
.area-group path 
{
  stroke: #000;
  fill-opacity: 0.7;
}
.area-group path {
	fill-opacity: 0.5;
}

path.chord {
  stroke-width: .75;
  fill-opacity: .75;
}

JavaScript

var areas = [
	{"id":"2","area":"Group A","color":"#374900"},
	{"id":"3","area":"Group B","color":"#0f2d4f"},
	{"id":"4","area":"Group C","color":"#2f0f4f"},
	{"id":"5","area":"Group D","color":"#4c2506"},
	{"id":"6","area":"Group E","color":"#595605"}
];

var data = [
    {"id":"DM459","first_name":"Person One","area":"2","active":"1","plans":[
        {"destination":"BC234","count":"1"},
        {"destination":"AB123","count":"1"}
    ]},
    {"id":"CD459","first_name":"Person Two","area":"3","active":"1","plans":[
        {"destination":"AB123","count":"2"}
    ]},
    {"id":"MN549","first_name":"Person Three","area":"3","active":"1","plans":[
        {"destination":"GH529","count":"2"}
    ]},
    {"id":"GH529","first_name":"Person Four","area":"4","active":"1","plans":[
        {"destination":"EF329","count":"1"},
        {"destination":"MN549","count":"2"}
    ]},
    {"id":"AB123","first_name":"Person Five","area":"5","active":"1","plans":[
        {"destination":"BC234","count":"5"},
        {"destination":"CD459","count":"2"},
        {"destination":"DM459","count":"1"},
        {"destination":"EF329","count":"1"}
    ]},
    {"id":"BC234","first_name":"Person Six","area":"5","active":"1","plans":[
        {"destination":"AB123","count":"5"},
        {"destination":"DM459","count":"1"},
        {"destination":"EF329","count":"1"}
    ]},
    {"id":"EF329","first_name":"Person Seven","area":"6","active":"1","plans":[
        {"destination":"BC234","count":"1"},
        {"destination":"AB123","count":"1"},
        {"destination":"GH529","count":"1"}
    ]}
];

// initialize square matrix for plan and assign faculty unique ids
var plans = [], 
	faculty = {};
for(var i = 0; i < data.length; i++) {
	plans[i] = [];
	// stash a unique integer for each faculty member
	faculty[data[i].id] = i; 
	for (var j = 0; j < data.length; j++) {
		plans[i][j] = 0;
	}
}

console.log(plans);
console.log(faculty);
// populate the plan...