Skip to content

Instantly share code, notes, and snippets.

@MisunoKitara

MisunoKitara/.block

Last active February 27, 2025 14:06
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save MisunoKitara/085e92a84e9b000cecfb4a6024eebca3 to your computer and use it in GitHub Desktop.
Download ZIP
2024: 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 2024</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","CLX","CNT","COZ","CWN","FCS-Com","FCS-Sam","FII-Toep","FII-WmsDev","FOW","FOZ-HPC","FOZ-RDM","KOC","KOS","KOS-A","LEC","LPC","LSY","OWI","Servicepunt"];
var matrix = [
[0.891411821323883, 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, 0, 0, 0, 0.00218751367196045], //ACR
[0, 0.453909086931793, 0, 0, 0, 0, 0.00109375683598022, 0.0109375683598022, 0, 0.0120313251957825, 0.0120313251957825, 0, 0.0273439208995056, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00328127050794067, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00218751367196045], //AES
[0, 0, 0.717504484403027, 0.00328127050794067, 0.00109375683598022, 0.00109375683598022, 0.00109375683598022, 0, 0.0229688935555847, 0, 0, 0.0109375683598022, 0.00109375683598022, 0.00328127050794067, 0.00218751367196045, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0], //AFI
[0.00109375683598022, 0, 0.00656254101588135, 0.841099006868793, 0.0492190576191101, 0.0153125957037231, 0, 0, 0.00218751367196045, 0.00109375683598022, 0.00109375683598022, 0.00109375683598022, 0, 0.0109375683598022, 0.0043750273439209, 0.00109375683598022, 0, 0.00328127050794067, 0, 0, 0, 0, 0.0043750273439209, 0.00109375683598022, 0.00546878417990112, 0, 0.00109375683598022, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0.00546878417990112, 0.00546878417990112], //AHR-Core
[0, 0, 0, 0.0371877324233276, 0.382814892593079, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //AHR-PyTm
[0, 0, 0.00656254101588135, 0.0131250820317627, 0, 0.493284333027081, 0, 0, 0, 0.00218751367196045, 0, 0.00656254101588135, 0, 0.00218751367196045, 0, 0, 0, 0.00328127050794067, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0240626503915649], //AHR-Soft
[0, 0, 0, 0, 0, 0, 0.167344795904974, 0, 0.00328127050794067, 0.00109375683598022, 0, 0, 0, 0.00765629785186157, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022], //AIC-Red
[0, 0.0732817080106751, 0, 0.00109375683598022, 0, 0, 0, 0.382814892593079, 0, 0.00765629785186157, 0.0087500546878418, 0, 0.0142188388677429, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //AIS
[0, 0, 0.0284376777354858, 0, 0, 0, 0, 0, 0.257032856455353, 0, 0, 0, 0, 0.00328127050794067, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0.00328127050794067, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0], //ALT
[0.00218751367196045, 0.0207813798836243, 0, 0, 0, 0, 0.00109375683598022, 0.0109375683598022, 0, 0.72844205276283, 0.0043750273439209, 0, 0.0273439208995056, 0, 0.00218751367196045, 0, 0, 0.0240626503915649, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0.00218751367196045], //AMI
[0, 0.0240626503915649, 0.00109375683598022, 0.00218751367196045, 0, 0, 0.00328127050794067, 0.0109375683598022, 0.00109375683598022, 0.0087500546878418, 0.374064837905237, 0, 0.0131250820317627, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00109375683598022, 0.00765629785186157, 0.0043750273439209, 0.00109375683598022, 0, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0.00328127050794067], //AOW
[0, 0.00109375683598022, 0.00984381152382202, 0, 0, 0.0120313251957825, 0, 0, 0.00109375683598022, 0.0153125957037231, 0, 1.26985168657304, 0.00984381152382202, 0.0043750273439209, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0043750273439209, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.0043750273439209], //AOZ
[0.00109375683598022, 0.0251564072275452, 0.00328127050794067, 0, 0, 0, 0.00328127050794067, 0.0218751367196045, 0, 0.0295314345714661, 0.0109375683598022, 0, 0.459377871111694, 0.00984381152382202, 0, 0, 0, 0.00218751367196045, 0, 0.00109375683598022, 0, 0, 0, 0, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0], //AST
[0.00218751367196045, 0, 0.00109375683598022, 0.00109375683598022, 0, 0.00109375683598022, 0.00765629785186157, 0, 0, 0, 0.00328127050794067, 0.00328127050794067, 0.00109375683598022, 0.659535372096076, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00109375683598022], //BaSys
[0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0.00109375683598022, 0, 0, 0.00109375683598022, 0, 0.00109375683598022, 0.669379183619898, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0], //CBI
[0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.043750273439209, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045], //CBO
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.148750929693311, 0, 0.00109375683598022, 0.00218751367196045, 0, 0.00218751367196045, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0.00109375683598022, 0, 0], //CDC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0.258126613291333, 0, 0, 0, 0.0043750273439209, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0, 0, 0.00218751367196045, 0.00218751367196045, 0.00765629785186157], //CIS
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0350002187513672, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //CLX
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00328127050794067, 0.00109375683598022, 0.666097913111957, 0.00109375683598022, 0, 0, 0, 0, 0.00218751367196045, 0, 0, 0, 0, 0.0087500546878418, 0, 0, 0, 0.00109375683598022, 0.00546878417990112, 0.0142188388677429], //CNT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //COZ
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0.00328127050794067, 0, 0.0185938662116638, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0.00109375683598022], //CWN
[0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0, 0.00765629785186157, 0, 0, 0, 0.00109375683598022, 0.570941068381677, 0.00218751367196045, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00328127050794067, 0.0240626503915649], //FCS-Com
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.100625628910181, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0.00328127050794067], //FCS-Sam
[0.00109375683598022, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0.0514065712910706, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //FII-Toep
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0.00218751367196045, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0.00109375683598022, 0.639847749048432, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0], //FII-WmsDev
[0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.0087500546878418, 0, 2.33845211532572, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.0043750273439209], //FOW
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00328127050794067, 0, 0, 0, 0, 0, 0, 4.18361989762436, 0.0317189482434265, 0, 0.00328127050794067, 0, 0, 0, 0, 0, 0.00109375683598022], //FOZ-HPC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00218751367196045, 0, 0, 0, 0.00328127050794067, 0.380627378921118, 0, 0.00546878417990112, 0, 0, 0, 0, 0, 0], //FOZ-RDM
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.00328127050794067, 0, 0.00109375683598022, 0, 0, 0, 0, 0.00109375683598022, 0.00218751367196045, 0, 0.00109375683598022, 0, 0, 0, 0.0481253007831299, 0, 0, 0, 0, 0, 0, 0], //KOC
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0.132344577153607, 0.00109375683598022, 0.00328127050794067, 0.00546878417990112, 0, 0.00656254101588135, 0.0207813798836243, 0.0043750273439209, 0, 0.0459377871111694, 0.00109375683598022, 0.00546878417990112, 0.00328127050794067, 0.00218751367196045, 1.43938399614998, 0.0809380058625366, 0, 0.0229688935555847, 0.00218751367196045, 0.00218751367196045, 0.00765629785186157], //KOS
[0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0.00218751367196045, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0.00109375683598022, 0.00109375683598022, 0, 0.00109375683598022, 0, 0.00109375683598022, 0, 0, 0.00109375683598022, 0.132344577153607, 24.5110906943168, 0.00328127050794067, 0.0043750273439209, 0, 0.0120313251957825, 0.0131250820317627], //KOS-A
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0043750273439209, 0, 0, 0.00109375683598022, 0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0.601566259789124, 0.320470752942206, 0, 0, 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.00109375683598022, 0.00546878417990112, 0.344533403333771, 0, 0, 0.00109375683598022], //LPC
[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, 0, 0, 0.172813580084876, 0.00328127050794067, 0.00109375683598022], //LSY
[0, 0, 0, 0.00109375683598022, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.00109375683598022, 0, 0, 0.00109375683598022, 0, 0, 0.00328127050794067, 0, 0.00109375683598022, 0.00328127050794067, 0, 0, 0.00109375683598022, 0.00109375683598022, 0, 0, 0, 0, 0.00218751367196045, 0.00109375683598022, 0.0043750273439209, 0.00765629785186157, 0.962506015662598, 0.0043750273439209], //OWI
[0.0284376777354858, 0.184844905280658, 0.943912149450934, 0.297501859386621, 0.0393752460952881, 0.34234588966181, 0.0164063525397034, 0.191407446296539, 0.63328520803255, 0.53594084963031, 0.296408102550641, 0.220938880868005, 0.272345452159076, 0.14437590234939, 0.119219495121845, 0.227501421883887, 0.0568753554709717, 0.538128363302271, 0.0754692216826355, 0.992037450234064, 0.00218751367196045, 0.0743754648466553, 0.895786848667804, 0.566566041037757, 0.206720042000263, 0.753598459990375, 1.12547578422365, 0.285470534190839, 0.0525003281270508, 0.179376121100757, 1.2556328477053, 1.6701666885418, 0.181563634772717, 0.19687623047644, 0.38937743360896, 3.39830248939056, 34.3363083519272], //Servicepunt"
];
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