Skip to content

Instantly share code, notes, and snippets.

@MisunoKitara

MisunoKitara/.block

Last active February 19, 2026 14:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MisunoKitara/b6852eaf0eb7dd1a6580d67162b2f943 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MisunoKitara/b6852eaf0eb7dd1a6580d67162b2f943 to your computer and use it in GitHub Desktop.
Download ZIP
2025: ICTS Initiële Servicegroep Chord diagram (alle teams)
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>ICTS Initiële Servicegroep Chord Diagram</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- jQuery -->
<script src="http://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(http://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 = ["ACR","AES","AFI","AHR-Core","AHR-PyTm","AHR-Soft","AIC-Red","AIS","ALT","AMI","AOW","AOZ","AST","BaSys","CBI","CBO","CDC","CIS-IAM","CLX","CWN","FCS-Com","FCS-Sam","FII-Toep","FII-WmsDev","FOW","FOZ-HPC","FOZ-RDM","IDS","KOC","KOS","LEC","LSY","NIC","NSA","KSP","LPC","OWH/L"];
var matrix = [
[1.16358580448112, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //ACR
[0, 0.369247601030246, 0, 0, 0, 0, 0.00113965308959953, 0.0273516741503886, 0, 0.00797757162719668, 0.0148154901647938, 0, 0.021653408702391, 0.00227930617919905, 0.0045586123583981, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //AES
[0, 0, 0.7214004057165, 0, 0.00341895926879858, 0.00113965308959953, 0, 0, 0.00683791853759716, 0, 0, 0.00227930617919905, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953], //AFI
[0, 0, 0.00227930617919905, 1.03480500535637, 0.0615412668383744, 0.00797757162719668, 0, 0, 0.00113965308959953, 0.00113965308959953, 0.00227930617919905, 0, 0, 0.0136758370751943, 0.00113965308959953, 0, 0, 0.00227930617919905, 0, 0.00113965308959953, 0, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0.00227930617919905, 0.00113965308959953], //AHR-Core
[0, 0, 0, 0.0421671643151825, 0.357851070134251, 0, 0, 0, 0.00113965308959953, 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.00227930617919905, 0, 0], //AHR-PyTm
[0, 0, 0.00569826544799763, 0.00911722471679621, 0, 0.537916258290976, 0, 0, 0, 0, 0, 0.00569826544799763, 0.00113965308959953, 0, 0.00113965308959953, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0.0136758370751943, 0, 0], //AHR-Soft
[0.00683791853759716, 0, 0, 0, 0, 0, 0.19146171905272, 0, 0, 0.00113965308959953, 0, 0, 0, 0.0102568778063957, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //AIC-Red
[0, 0.0205137556127915, 0, 0, 0, 0, 0, 0.410275112255829, 0, 0.00797757162719668, 0.02393271488159, 0, 0.0398878581359834, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0], //AIS
[0, 0, 0.0284913272399881, 0.00227930617919905, 0, 0, 0, 0, 0.290611537847879, 0, 0, 0, 0, 0.00227930617919905, 0, 0.00113965308959953, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //ALT
[0.00569826544799763, 0.0262120210607891, 0, 0, 0, 0, 0.00113965308959953, 0.00569826544799763, 0, 0.429649214779021, 0.00113965308959953, 0, 0.0205137556127915, 0.00113965308959953, 0, 0, 0, 0.0045586123583981, 0, 0, 0, 0, 0, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0.00227930617919905, 0, 0.00569826544799763], //AMI
[0, 0.0205137556127915, 0, 0.00341895926879858, 0, 0, 0, 0.02393271488159, 0.00113965308959953, 0.00569826544799763, 0.36127002940305, 0, 0.021653408702391, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0.0102568778063957, 0.00797757162719668, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0045586123583981, 0, 0], //AOW
[0, 0, 0.00911722471679621, 0, 0, 0.00683791853759716, 0.00113965308959953, 0.00113965308959953, 0.00113965308959953, 0.00797757162719668, 0.00113965308959953, 1.4519180361498, 0.00797757162719668, 0, 0.00113965308959953, 0, 0, 0.00113965308959953, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0], //AOZ
[0, 0.0148154901647938, 0.0113965308959953, 0, 0, 0, 0, 0.0330499395983863, 0, 0.0205137556127915, 0.0148154901647938, 0, 0.418252683883026, 0.0045586123583981, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0], //AST
[0, 0, 0.00227930617919905, 0.00683791853759716, 0, 0, 0.00683791853759716, 0.00113965308959953, 0, 0.00227930617919905, 0, 0.00113965308959953, 0.00227930617919905, 0.74533312059809, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0.00227930617919905, 0, 0], //BaSys
[0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0.00227930617919905, 0, 0.689490119207713, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0.00113965308959953, 0, 0], //CBI
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0911722471679621, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0045586123583981, 0, 0.00113965308959953], //CBO
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0.153853167095936, 0, 0.00227930617919905, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0], //CDC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0319102865087867, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0.00341895926879858, 0, 0, 0, 0, 0, 0.00113965308959953, 0.00113965308959953, 0, 0], //CIS-IAM
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0.0341895926879858, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0], //CLX
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0.0364688988671848, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0], //CWN
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00341895926879858, 0, 0.00341895926879858, 0, 0, 0.568686891710163, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0.00113965308959953, 0.0250723679711896, 0.00113965308959953, 0.00227930617919905], //FCS-Com
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0.00113965308959953, 0.00113965308959953, 0.116244615139152, 0, 0, 0, 0, 0.00113965308959953, 0, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0.0045586123583981, 0, 0], //FCS-Sam
[0.00113965308959953, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.21653408702391, 0.0045586123583981, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0], //FII-Toep
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0.282633966220682, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0.00227930617919905, 0, 0], //FII-WmsDev
[0.00113965308959953, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0.00113965308959953, 0.00113965308959953, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0.00113965308959953, 0.00569826544799763, 0, 1.77899847286486, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0.00341895926879858, 0, 0], //FOW
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4.90848585690516, 0.0227930617919905, 0, 0, 0.00341895926879858, 0, 0, 0, 0, 0.0045586123583981, 0, 0], //FOZ-HPC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0.0148154901647938, 0.845622592482848, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0], //FOZ-RDM
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0.194880678321519, 0, 0, 0, 0.00341895926879858, 0, 0, 0.00113965308959953, 0, 0], //IDS
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0.100289471884758, 0.00113965308959953, 0, 0, 0, 0, 0.00227930617919905, 0.00227930617919905, 0], //KOC
[0.00113965308959953, 0, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0.00227930617919905, 0.00113965308959953, 0.00113965308959953, 0, 0, 0, 0, 0, 0.118523921318351, 0, 0.0045586123583981, 0.00683791853759716, 0.0170947963439929, 0.0045586123583981, 0, 0.067239532286372, 0.00113965308959953, 0.00797757162719668, 0.00683791853759716, 0.00113965308959953, 0, 24.1025231919404, 0.00569826544799763, 0.0113965308959953, 0.00227930617919905, 0.00341895926879858, 0.0512843890319787, 0.0102568778063957, 0.0136758370751943], //KOS
[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, 0, 0, 0.621110933831742, 0, 0, 0, 0.00113965308959953, 0.468397419825405, 0], //LEC
[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, 0, 0, 0, 0.115104962049552, 0, 0, 0, 0, 0], //LSY
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0, 0, 0, 0, 0.00227930617919905, 0, 0, 0, 0.00113965308959953, 0, 0.00227930617919905, 0.00113965308959953, 0, 0.403437193718232, 0.0592619606591753, 0.0148154901647938, 0, 0.00341895926879858], //NIC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00341895926879858, 0.111686002780754, 0, 0, 0], //NSA
[0.021653408702391, 0.149294554737538, 1.00859298429558, 0.450162970391813, 0.0831946755407654, 0.354432110865453, 0.00911722471679621, 0.150434207827137, 0.719121099537301, 0.518542155767784, 0.256421945159893, 0.255282292070294, 0.298589109475076, 0.14473594237914, 0.118523921318351, 0.395459622091035, 0.0512843890319787, 0.256421945159893, 0.0558430013903768, 0.141316983110341, 0.891208716066829, 0.57780411642696, 0.223372005561507, 0.736215895881294, 1.06443598568596, 0.259840904428692, 0.0923119002575616, 0.117384268228751, 0.196020331411118, 1.99211360061997, 0.218813393203109, 0.445604358033415, 0.524240421215782, 0.198299637590317, 35.927563649625, 0.230209924099104, 3.6161192532993], //Servicepunt
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0.38406309119504, 0.00113965308959953], //LPC
[0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0, 0, 0, 0, 0, 0, 0, 0, 0.00113965308959953, 0.00227930617919905, 0.00911722471679621, 0.00113965308959953, 0, 0.0113965308959953, 0.00113965308959953, 1.05645841405876], //OWH/L
];
var colors = ["#FE9900","#FFFF00","#24d613","#EC1D25","#C8125C","#E066A3","#CC0098","#670099","#10218B","#0000FE","#25BFBF","#2DC3FE","#0D9A2C","#9CF16E","#4f4f4f","#919191","#C4C4C4"];
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 = 1000,
height = 1000,
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment