The 2014 version of the Chord Diagram created for the Global Mobile Consumer Survey held by Deloitte each year. It shows the flows of people between the phone brand of their previous phone and the current phone
For an explanation on how to understand this chart, please take a look at my "Storytelling" version of the same Chord Diagram but with 2013 data
forked from nbremer's block: Chord diagram 2014 - End result
forked from MisunoKitara's block: Chord diagram ICTS General
forked from MisunoKitara's block: 2017: ICTS Initiele Servicegroep Chord diagram
forked from MisunoKitara's block: 2019: ICTS Initiele Servicegroep Chord diagram
xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Chord Diagram - ICTS globaal 2019</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
body {
/*background: url(https://mbostock.github.io/d3/talk/20111018/texture-noise.png);*/
overflow: hidden;
margin: 0;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica;
}
#footer {
position: absolute;
top: 0;
z-index: 1;
display: block;
font-size: 36px;
font-weight: 300;
text-shadow: 0 1px 0 #fff;
top: 640px;
right: 140px;
text-align: right;
}
line {
stroke: #000;
stroke-width: 1.px;
}
.hint {
position: absolute;
right: 0;
width: 350px;
font-size: 12px;
color: #999;
}
text {
font-size: 10px;
}
.titles{
font-size: 12px;
}
path.chord {
fill-opacity: .80;
}
</style>
</head>
<body>
<br><br>
<div id="cont" class="container-fluid">
<div class="row text-center">
<div class="col-sm-12 column"><div id="chart"></div></div>
</div>
</div>
<script type="text/javascript">
var NameProvider = ["domein HR","domein ICTS","LoFi","Domein ISP-ES","Domein Onderwijs","Domein Studenten","Domein Mobiliteit en Inschrijvingen","CRM","Domein Onderzoek","Ondersteuning PC-klassen","Ondersteuning lokale infrastructuur","Systeembeheer lokale infrastructuur","AIX","Systeembeheer UNIX","Windows","Datacenter","Netwerken","Fac. Inter intranet","Fac. Onderwijs","Fac. Onderzoek","Fac. Communicatie en Samenwerking","CCIS","CCBI","Beveiligingscoördinator","KAOS","Communicatie & Opleiding","Aankoopadvies","Servicepunt"];
var matrix = [
[1.81904482696039, 0.00977230528681716, 0.0195446105736343, 0, 0, 0.00139604361240245, 0.00139604361240245, 0, 0.00139604361240245, 0, 0.00837626167441471, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0.0209406541860368, 0, 0.00418813083720735, 0.0027920872248049, 0.0027920872248049, 0, 0, 0, 0.00837626167441471], //domein HR
[0.0111683488992196, 1.74924264634027, 0.00139604361240245, 0.00139604361240245, 0.0027920872248049, 0.00139604361240245,0, 0.00139604361240245, 0.00139604361240245, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0.0027920872248049], //domein ICTS
[0.00139604361240245, 0.0404852647596711, 1.80508439083637, 0, 0.00139604361240245, 0, 0, 0, 0.0139604361240245, 0, 0.00418813083720735, 0.00139604361240245, 0, 0, 0.0027920872248049, 0, 0, 0, 0, 0, 0, 0, 0.00558417444960981, 0, 0, 0, 0.00698021806201226, 0.0027920872248049], //LoFi
[0, 0.00139604361240245, 0, 1.3639346093172, 0.107495358154989, 0.0209406541860368, 0.0418813083720735, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00698021806201226, 0, 0, 0, 0, 0], //Domein ISP-ES
[0.00418813083720735, 0.0209406541860368, 0.00698021806201226, 0.0851586603565496, 0.832041992991861, 0.0376931775348662,0.015356479736427, 0.00837626167441471, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0237327414108417, 0.00977230528681716, 0.00139604361240245, 0, 0, 0.0027920872248049, 0, 0, 0, 0, 0.0027920872248049], //Domein Onderwijs
[0.00418813083720735, 0.0209406541860368, 0.00698021806201226, 0.0851586603565496, 0.832041992991861, 0.0376931775348662, 0.015356479736427, 0.00837626167441471, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0237327414108417, 0.00977230528681716, 0.00139604361240245, 0, 0, 0.0027920872248049, 0, 0, 0, 0, 0.0027920872248049], //Domein Studenten
[0, 0.0111683488992196, 0, 0.0181485669612319, 0.0027920872248049, 0.0600298753333054, 1.0819337996119, 0.00418813083720735, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00977230528681716, 0, 0, 0, 0, 0, 0.00139604361240245], //Domein Mobiliteit en Inschrijvingen
[0, 0, 0, 0, 0, 0,0, 1.35835043486759, 0, 0, 0.00558417444960981, 0, 0, 0, 0, 0, 0, 0.0027920872248049, 0, 0, 0, 0.00139604361240245, 0.00139604361240245, 0, 0, 0, 0, 0], //CRM
[0.00698021806201226, 0.00698021806201226, 0.00977230528681716, 0.00558417444960981, 0, 0.0167525233488294, 0.00418813083720735, 0, 2.2769471318284, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0027920872248049, 0.00139604361240245, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0.00698021806201226], //Domein Onderzoek
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0.765031899596543, 0, 0.0027920872248049, 0, 0, 0, 0, 0.00698021806201226, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Ondersteuning PC-klassen
[0.00139604361240245, 0, 0, 0, 0, 0,0, 0, 0, 0, 0.286188940542503, 0, 0, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0], //Ondersteuning lokale infrastructuur
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Systeembeheer lokale infrastructuur
[0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //AIX
[0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0.0502575700464883, 0, 0.00139604361240245, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Systeembeheer UNIX
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0293169158604515, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0], //Windows
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0027920872248049, 0.280604766092893, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Datacenter
[0, 0, 0, 0, 0, 0,0, 0, 0, 0.00139604361240245, 0.00418813083720735, 0, 0, 0, 0, 0.00139604361240245, 1.56636093311555, 0.00418813083720735, 0, 0, 0, 0, 0, 0.00418813083720735, 0.00139604361240245, 0, 0.00139604361240245, 0.00418813083720735], //Netwerken
[0, 0, 0.00139604361240245, 0, 0, 0, 0, 0.00698021806201226, 0, 0, 0.0027920872248049, 0, 0, 0, 0, 0.00139604361240245, 0.0027920872248049, 0.386704080635479, 0.00558417444960981, 0.0027920872248049, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0.00139604361240245], //Fac. Inter intranet
[0, 0, 0, 0, 0.00977230528681716, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00698021806201226, 1.33880582429395, 0.00139604361240245, 0.00139604361240245, 0.00139604361240245, 0, 0, 0, 0, 0, 0.0027920872248049], //Fac. Onderwijs
[0, 0, 0, 0, 0, 0,0, 0.027920872248049, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0, 0.00139604361240245, 5.76984825005933, 0.00139604361240245, 0, 0, 0.417417040108333, 0, 0.127039968728623, 0.00558417444960981], //Fac. Onderzoek
[0, 0, 0, 0, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0.00139604361240245, 0.00418813083720735, 1.37091482737921, 0, 0, 0.00139604361240245, 0.0125643925116221, 0, 0, 0, 0.00558417444960981], //Fac. Communicatie en Samenwerking
[0.00139604361240245, 0, 0, 0, 0, 0, 0.00558417444960981, 0, 0, 0, 0.00139604361240245, 0.00139604361240245, 0, 0, 0, 0, 0.0027920872248049, 0.00139604361240245, 0, 0.00558417444960981, 0, 0.139604361240245, 0, 0, 0, 0.00139604361240245, 0, 0.0558417444960981], //CCIS
[0.0237327414108417, 0.00139604361240245, 0.00139604361240245, 0.00139604361240245, 0.0027920872248049, 0,0.00558417444960981, 0.00139604361240245, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.977230528681716, 0, 0, 0, 0, 0], //CCBI
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Beveiligingscoördinator
[0, 0, 0.00139604361240245, 0, 0, 0, 0, 0.00139604361240245, 0, 0.0321090030852564, 0.0195446105736343, 0.00418813083720735, 0, 0.0195446105736343, 0.0209406541860368, 0.224763021596795, 0.0446733955968784, 0.152168753751867, 0.00139604361240245, 0.0474654828216833, 0.597506666108249, 0.00977230528681716, 0, 0.00139604361240245, 1.63616311373567, 0.00977230528681716, 0.0935349220309643, 0.0418813083720735], //KAOS
[0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Communicatie & Opleiding
[0, 0, 0.00837626167441471, 0, 0, 0, 0, 0, 0, 0, 0.00558417444960981, 0, 0, 0, 0, 0, 0, 0.00139604361240245, 0, 0.00837626167441471, 0.058633831720903, 0, 0, 0.00139604361240245, 0.164733146263489, 0.0027920872248049, 19.8615124736497, 0.0460694392092809], //Aankoopadvies
[0.480239002666443, 0.145188535689855, 1.14894389300722, 0.409040778433918, 0.258268068294454, 0.343426728651003, 0.636595887255518, 0.129832055953428, 0.230347196046404, 0.43835769429437, 3.82795158520752, 0.795744859069397, 0.00139604361240245, 0.0600298753333054, 0.120059750666611, 0.106099314542586, 0.830645949379459, 0.872527257751532, 0.93395317669724, 1.23689464058857, 1.34299395513116, 0.42160517094554, 0.0893467911937569, 0.469070653767224, 0.150772710139465, 0.129832055953428, 1.23131046613896, 31.9275174156441], //Servicepunt
];
var colors = ["#C4C4C4","#919191","#4f4f4f","#EC1D25","#C8125C","#a912c3","#10218B","#2dc3fe","#9cf16e","#24d613","#0d9a2c","#2dc3fe","#9cf16e","#24d613","#0d9a2c","#bde3f8","#bde3f8"];
var chord = d3.layout.chord()
.padding(.04)
.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 width = 1500,
height = 1500,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.05;
var fill = d3.scale.ordinal()
.domain(d3.range(NameProvider.length))
.range(colors);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var svg = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height+50)
.append("svg:g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2+30) + ")");
////////////////////////////////////////////////////////////
////////////////// Draw outer Arcs /////////////////////////
////////////////////////////////////////////////////////////
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group")
.on("mouseover", fade(.02))
.on("mouseout", fade(.80));
g.append("svg:path")
.style("stroke", function(d) { return fill(d.index); })
.style("fill", function(d) { return fill(d.index); })
.attr("d", arc);
////////////////////////////////////////////////////////////
////////////////// Append Ticks ////////////////////////////
////////////////////////////////////////////////////////////
var ticks = svg.append("svg:g").selectAll("g.ticks")
.data(chord.groups)
.enter().append("svg:g").selectAll("g.ticks")
.attr("class", "ticks")
.data(groupTicks)
.enter().append("svg:g")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + outerRadius+40 + ",0)";
});
ticks.append("svg:line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 0)
.style("stroke", "#000");
ticks.append("svg:text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return d.label; });
////////////////////////////////////////////////////////////
////////////////// Append Names ////////////////////////////
////////////////////////////////////////////////////////////
g.append("svg: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) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 55) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d,i) { return NameProvider[i]; });
////////////////////////////////////////////////////////////
////////////////// Draw inner chords ///////////////////////
////////////////////////////////////////////////////////////
svg.selectAll("path.chord")
.data(chord.chords)
.enter().append("svg:path")
.attr("class", "chord")
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
.style("fill", function(d) { return fill(d.source.index); })
.attr("d", d3.svg.chord().radius(innerRadius));
////////////////////////////////////////////////////////////
////////////////// Extra Functions /////////////////////////
////////////////////////////////////////////////////////////
// Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(d, i) {
svg.selectAll("path.chord")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.style("stroke-opacity", opacity)
.style("fill-opacity", opacity);
};
}//fade
// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
var k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, 1).map(function(v, i) {
return {
angle: v * k + d.startAngle,
label: i % 5 ? null : v + "%"
};
});
}//groupTicks
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js