the enrollment cycle

Forked from : d3 spiral calendar block which is based on the spiral created by syntagmatic for John Hunter.

This is still using d3 v3 since I can't quite get the new d3.radialLine() to work using the latest release of d3-shape v1.2.0.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=PT+Sans:200,300,400,700' rel='stylesheet' type='text/css'>
    <title>Calendar spiral in d3.js</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style>
      body {
        font-family: 'PT Sans', sans-serif;
/*         margin: auto; */
      }
      .axis path {
        fill: none;
        stroke: #999;
        stroke-width: 1px;
        stroke-dasharray: 2 3;
      }
      text.months {
        font-size: 13px;
        font-weight: 100;
        fill: lightslategray;
      }
      text.title {
        font-size: 24px;
      }
      circle.tick { 
        /*fill: rgba(153, 153, 153, 0.2);*/
        stroke: #999;
        stroke-dasharray: 2 3;
      }
      path.spiral {
        fill: none;
        stroke: white;
        stroke-width: 1px;
      }
       path.spiral0, 
       path.spiral201 {
        fill: none;
        stroke: #abd9e9;
        stroke-width: 14px;
      }   
      path.spiral1, 
      path.spiral211 {
        fill: none;
        stroke: #74add1;
        stroke-width: 14px;
      }      
      path.spiral2, 
      path.spiral221 {
        fill: none;
        stroke: #4575b4;
        stroke-width: 14px;
      }
      path.spiral3, 
      path.spiral231 {
        fill: none;
        stroke: #313695;
        stroke-width: 14px;
      }
      path.spiral4, 
      path.spiral24 {
        fill: none;
        stroke: #66bd63;
        stroke-width: 14px;
      }
      circle.dot {
	      fill: white;
	      stroke-width: 1px;
      }
      
      circle.dot0 {
        stroke: #419FF7;
      }
      circle.dot1 {
        stroke: #E94685;
      }
      circle.dot2 {
        stroke: #79F347;
      }
      circle.dot3 {
        stroke: #7941F7;
      }
      
      text.year {
	      fill: #525252;
/*	      opacity: 0.5;*/
	      font-size: 32px;
	      font-weight: 800;
      }

text.labelText2, text.labelText3,
      text.labelText22, text.labelText23,
      text.labelText4, text.labelText24
       {
        fill: #eee;
        font-size: 13px;
      }

text.labelText0, text.labelText1,
      text.labelText20, text.labelText21 {
        fill: #eee;
        font-size: 13px;
      }

.termText {
        fill: #888;
        font-size: 16px;
      }

#chart {
        margin-top: 300px;
        margin-left: -10px;
      }
     
    </style>
  </head>
  <body>

https://d3js.org/d3.v3.min.js