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: #fff;
      font-family: 'Cinzel Decorative', cursive;
    }
    .arc {
      fill:none;
      fill-opacity:0.4;
      stroke-width: 0.6px;
      stroke: #111;
    }
    .arc-heavy {
      fill:none;
      stroke-width: 0.8px;
      stroke: #555;
    }
    .arc-minor {
      fill:none;
      fill-opacity:0.2;
      stroke-width: 0.4px;
      stroke: #555;
      stroke-dasharray:2,2;
    }
    .location {
      fill:none;
      fill-opacity:0.2;
      stroke-width: 0.8px;
      stroke: #555;
    }
    .mask {
      stroke: #fff;
      stroke-width: 200px;
      fill:none;
    }
    .direction {
      font-size:24px;
      fill: #555;
      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);
    
  // build the outer toposcope ring
  svg.append("circle")
    .attr("class", "arc-heavy")
    .attr("cx", width/2)
    .attr("cy", height/2)
    .attr("r", 242);
  // build the toposcope locations
  var locations = [
    {
      name: 'middlebury',
      bearing: 238
    },
    {
      name: 'vuelta larga',
      bearing: 175 
    },
    {
      name: 'boston',
      bearing: 162
    },
    {
      name: 'harwichport',
      bearing: 152
    },
    {
      name: 'mont albert',
      bearing: 40
    },
    { 
      name: 'central city',
      bearing: 270
    }
  ]
  for (var i = 0; i < locations.length; i++) {
    var outerRadius = 227
    var rads = (locations[i].bearing - 90) * Math.PI / 180
    var x = Math.cos(rads) * outerRadius + (width/2);
    var y = Math.sin(rads) * outerRadius + (width/2);
    svg.append("circle")
      .attr("class", "location")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", 15)
  }
    
  // labels
  svg.append("text")
    .attr("class","direction")
    .attr("y",pad)
    .attr("x",width/2)
    .text("N")
  </script>
</body>
</html>