Stretched Chord Diagram - From educations to occupations

An example of using the Circular Flow diagram with actual data, as explained in my blog on How to create a Flow diagram with a circular Twist

It shows what types of educations (on the left) lead to what types of occupations (on the right) about 1.5 years after graduating. The data is based on about 18000 HBO graduates in 2014 in the Netherlands used for the State of the State project

forked from nbremer's block: Stretched Chord Diagram - From educations to occupations

forked from scresawn's block: Stretched Chord Diagram - From educations to occupations

forked from anonymous's block: Stretched Chord Diagram - From educations to occupations

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>From your Education to your Job</title>

<script src="https://d3js.org/d3.v3.js"></script>
	<script src="d3.stretched.chord.js"></script>
	<script src="d3.layout.chord.sort.js"></script>
	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
	
	<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">How much does your education define where you end up working?</div>

<div id="chart"></div>
	
	<div style="width: 100%;">
		<div class="explanation">
		This chart shows how students from different educational sciences end up in their occupational sectors a year after graduation.
		On the left we see the different educational tracks and on the right are the occupational sectors.
		Thus there is a flow from left to right. The thickness of a line represents the number of students.
		</div>
	</div>
	
	
	
	<svg height="0cm" width="0cm">
		<defs>
			<linearGradient id="gradientLinearPerLine" x1="0%" y1="0%" x2="100%" y2="0%">

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