D3 Examples - 2017: Team coherentie KlaSCe

2017: Team coherentie KlaSCe

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Team coherentie KlaSCe</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>
    
    <!-- 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;
        }   
        
        line {
          stroke: #000;
          stroke-width: 1.px;
        }
​
        text {
          font-size: 8px;
        }
​
        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 KlaSCe?</div>
​
    <div id="chart"></div>
    
    <div style="width: 100%;">
        <div class="explanation">
        
        </div>
    </div>
    
    <script src="script.js"></script>
    Dit diagram toont de team interactie voor dienst KlaSCe. Om een duidelijk overzicht te houden zijn niet alle teams opgenomen in dit diagram, alleen de grootste. 
  </body>
</html>
    