d3js compass rose by wboykinm

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'>
  <style>
    body {
      background: #593067;
      font-family: 'Cinzel Decorative', cursive;
    }
    .arc {
      fill:#e2e3e3;
      fill-opacity:0.4;
      stroke-width: 0.2px;
      stroke: #111;
    }
    .arc-heavy {
      fill:none;
      stroke-width: 0.8px;
      stroke: #e2e3e3;
    }
    .arc-minor {
      fill:#e2e3e3;
      fill-opacity:0.2;
      stroke-width: 0.8px;
      stroke: #555;
      stroke-dasharray:2,2;
    }
    .mask {
      stroke: #593067;
      stroke-width: 200px;
      fill:none;
    }
    .direction {
      font-size:24px;
      fill: #e2e3e3;
      text-anchor:middle;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
  
  // set constants
  var height = 600
  var width = 600
  var radius = 150
  var interact = radius * 0.7
  var pad = radius * 0.25
  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
  
  // build the intercardinal winds
  svg.append("circle")
    .attr("class", "arc-minor")
    .attr("cx", width/2 - interact)
    .attr("cy", height/2)
    .attr("r", interact);
    
  svg.append("circle")
    .attr("class", "arc-minor")
    .attr("cx", width/2)
    .attr("cy", height/2 + interact)
    .attr("r", interact);
    
  svg.append("circle")
    .attr("class", "arc-minor")
    .attr("cx", width/2 )
    .attr("cy", height/2 - interact)
    .attr("r", interact);
    
  svg.append("circle")
    .attr("class", "arc-minor")
    .attr("cx", width/2 + interact)
    .attr("cy", height/2)
    .attr("r", interact);
    
  // build the cardinal winds
  svg.append("circle")
    .attr("class", "arc")
    .attr("cx", width/2 - interact)
    .attr("cy", height/2 - interact)
    .attr("r", radius);
    
  svg.append("circle")
    .attr("class", "arc")
    .attr("cx", width/2 + interact)
    .attr("cy", height/2 - interact)
    .attr("r", radius);
    
  svg.append("circle")
    .attr("class", "arc")
    .attr("cx", width/2 - interact)
    .attr("cy", height/2 + interact)
    .attr("r", radius);
    
  svg.append("circle")
    .attr("class", "arc")
    .attr("cx", width/2 + interact)
    .attr("cy", height/2 + interact)
    .attr("r", radius);
    
  // add mask
  svg.append("circle")
  .attr("class", "mask")
  .attr("cx", width/2)
  .attr("cy", height/2)
  .attr("r", 212 + 100);
    
  // build the outer circle
  svg.append("circle")
    .attr("class", "arc-heavy")
    .attr("cx", width/2)
    .attr("cy", height/2)
    .attr("r", 212);
    
  // labels
  svg.append("text")
    .attr("class","direction")
    .attr("y",pad)
    .attr("x",width/2)
    .text("N")
    
  svg.append("text")
    .attr("class","direction")
    .attr("y",height - pad)
    .attr("x",width/2)
    .text("S")
    
  svg.append("text")
    .attr("class","direction")
    .attr("y",height/2)
    .attr("x",pad)
    .attr("dy","0.5em")
    .text("W")
    
  svg.append("text")
    .attr("class","direction")
    .attr("y",height/2)
    .attr("x",width - pad)
    .attr("dy","0.4em")
    .text("E")
  </script>
</body>
</html>