xxxxxxxxxx
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Team coherentie: Ceif</title>
<!-- D3.js -->
<script src="https://d3js.org/d3.v3.js"></script>
<script src="d3.stretched.chord.js"></script>
<script src="d3.layout.chord.sort.js"></script>
<!-- Pym.js - iframe height handler for the Blog -->
<script src="pym.min.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Open Sans & CSS -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #525252;
text-align: center;
}
html, body {
width: auto;
height: auto;
}
line {
stroke: #000;
stroke-width: 1.px;
}
text {
font-size: 8px;
}
.titles{
font-size: 10px;
}
path.chord {
fill-opacity: .80;
}
.title {
text-anchor: middle;
fill: #3B3B3B;
font-weight: 300;
font-size: 16px;
}
.titleLine {
stroke: #DCDCDC;
shape-rendering: crispEdges;
}
.title-h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 24px;
font-weight: 500;
line-height: 1.1;
color: #3B3B3B;
}
@media (min-width: 500px) {
.explanation {
width: 50%;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="title-h3">Hoeveel interactie is er tussen en met de teams van Ceif?</div>
<div id="chart"></div>
<div style="width: 100%;">
<div class="explanation">
Dit diagram toont de team interactie voor dienst Ceif. Om een duidelijk overzicht te houden zijn niet alle teams opgenomen in dit diagram, alleen diegene met het grootste aandeel.
</div>
</div>
<!-- Animated gradient for Chord Diagram -->
<!-- Doesn't work in IE... -->
<svg height="0cm" width="0cm">
<defs>
<linearGradient id="gradientLinearPerLine" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="-100%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="-1;0" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-75%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="-0.75;0.25" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-50%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="-0.5;0.5" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-25%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="-0.25;0.75" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="0%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="0;1" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="25%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="0.25;1.25" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="50%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="0.5;1.5" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="75%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="0.75;1.75" dur="9s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="1;2" dur="9s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
</svg>
<svg height="0cm" width="0cm">
<defs>
<linearGradient id="gradientLinear" x1="-100%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="-100%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="-1;0" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-75%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="-0.75;0.25" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-50%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="-0.5;0.5" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="-25%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="-0.25;0.75" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="0%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="0;1" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="25%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="0.25;1.25" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="50%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="0.5;1.5" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="75%" stop-color="#BEBEBE" stop-opacity=".5">
<animate attributeName="offset" values="0.75;1.75" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#858585" stop-opacity=".5">
<animate attributeName="offset" values="1;2" dur="5s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
</svg>
<script src="script.js"></script>
</body>
</html>
Modified http://d3js.org/d3.v3.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.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js