JavaScript
var margin = {left:90, top:90, right:90, bottom:90},
width = 1000 - margin.left - margin.right, // more flexibility: Math.min(window.innerWidth, 1000)
height = 1000 - margin.top - margin.bottom, // same: Math.min(window.innerWidth, 1000)
innerRadius = Math.min(width, height) * .39,
outerRadius = innerRadius * 1.1;
var names = ["Test1","Test2","AMO-DB","YouTube","Twitter", "Google+", "Pflegeratgeber" ,"O-Mag","RuV"],
colors = ["#301E1E", "#083E77", "#342350", "#567235", "#8B161C", "#DF7C00"],
opacityDefault = 0.8;
var matrix = [
[0,1,1,1,1,1,1,1,1], //Test1
[0,0,1,1,1,1,1,0,1], //Test2
[0,1,0,1,1,1,1,1,1], //Hawkeye
[0,1,1,0,1,1,0,1,1], //The Hulk
[0,1,1,1,0,1,1,1,1], //Iron Man
[0,1,1,1,1,0,1,1,1],
[0,1,1,1,1,1,0,1,1], //Iron Man
[0,1,1,1,1,1,1,0,1],
[0,1,1,1,1,1,1,0,0] //Thor //Thor
];
////////////////////////////////////////////////////////////
/////////// Create scale and layout functions //////////////
////////////////////////////////////////////////////////////
var colors = d3.scaleOrdinal()
.domain(d3.range(names.length))
.range(colors);
var chord = d3.chord()
.padAngle(.15)
.sortChords(d3.descending)
var arc = d3.arc()
.innerRadius(innerRadius*1.01)
.outerRadius(outerRadius);
var path = d3.ribbon()
.radius(innerRadius);
////////////////////////////////////////////////////////////
////////////////////// Create SVG //////////////////////////
////////////////////////////////////////////////////////////
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
.datum(chord(matrix));
////////////////////////////////////////////////////////////
////////////////// Draw outer Arcs...