RegularPolys

CorpGlory

See how is it made: https://www.youtube.com/watch?v=_xvkNo989qY

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 960;
    var height = 500;
    var lineLength = 150;
    var legendWidth = 360;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var poly = undefined;
    var angle = undefined;
    var angleRad = undefined;
    var angleOut = undefined;
    var angleOutRad = undefined;
    
    function drawArcs() {
      function getD(inRad, outRadOffset, startAngle, endAngle) {
        return d3.arc()
      	.innerRadius(inRad)
      	.outerRadius(inRad + outRadOffset)
      	.startAngle(startAngle)
      	.endAngle(endAngle)();
      }
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.2, 1, 
        		Math.PI / 2, Math.PI / 2 - angleRad
      		)
         );
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.18, 1, 
        		Math.PI + Math.PI / 2, 
        		Math.PI + Math.PI / 2 + angleOutRad
      		)
         )
      	.attr('transform', `translate(${lineLength}, 0)`)
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.18 + 2, 1, 
        		Math.PI + Math.PI / 2, 
        		Math.PI + Math.PI / 2 + angleOutRad
      		)
         )
      	.attr('transform', `translate(${lineLength}, 0)`)
      
      var arcOut2AngleStart = 3 * Math.PI / 2;
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.08, 1, 
						arcOut2AngleStart + angleOutRad, 
        		arcOut2AngleStart - angleOutRad
      		)
         )
      	.attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.08 + 2, 1, 
						arcOut2AngleStart + angleOutRad, 
        		arcOut2AngleStart - angleOutRad
      		)
         )
      	.attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
      poly
      	.append('path')
      	.attr('d', 
          getD(
        		lineLength * 0.08 + 4, 1, 
						arcOut2AngleStart + angleOutRad, 
        		arcOut2AngleStart - angleOutRad
      		)
         )
      	.attr('transform', 
          `rotate(${-angle}), translate(${lineLength}, 0)`
        )
    }
    
    function drawLabels() {
      var f = d3.format('.1f');
      poly
        .append('text')
      	.text(f(angle))
      	.attr('y', -lineLength * 0.22 * Math.sin(angleRad/2))
      	.attr('x', lineLength * 0.22 * Math.cos(angleRad/2))
      	.attr('text-anchor', 'start')
      	.style('font-size', 10)
      	.style('font-family', 'monospace')
      poly.append("text")
      .text(f(angleOut) + "°")
      .attr("y", -lineLength * 0.22 * Math.sin(angleOutRad/2))
      .attr("x", lineLength - lineLength * 0.22 * Math.cos(angleOutRad/2))
      .attr('text-anchor', "end")
      .style("font-size", 10)
      .style("font-family", "monospace")
      poly
        .append('text')
      	.text(f(angleOut * 2))
      	.attr('y', -lineLength * 0.77 * Math.sin(angleRad))
      	.attr('x', lineLength * (0.77 * Math.cos(angleRad)))
      	.attr('text-anchor', 'middle')
      	.style('font-size', 10)
      	.style('font-family', 'monospace')
    }
    
    function drawPoly(count) {
      if(poly) {
        poly.remove();
      }
      poly = svg.append('g');
      angle = 360 / count;
      angleRad = Math.PI * angle / 180;
      angleOut = (180 - angle) / 2;
      angleOutRad = Math.PI * angleOut / 180;
      
      for(var i = 0; i < count; i++) {
        poly
          .append('line')
          .attr('stroke', '#ddd')
          .attr('x1', 0)
          .attr('y1', 0)
          .attr('x2', lineLength)
          .attr('y2', 0)
        	.attr('transform', `rotate(${angle * i})`)

poly
        	.append('line')
        	.attr('stroke', 'black')
        	.attr('x1', lineLength)
        	.attr('y1', 0)
        	.attr('x2', Math.cos(angleRad) * lineLength)
        	.attr('y2', -Math.sin(angleRad) * lineLength)
        	.attr('transform', `rotate(${angle * i})`)
      }
      
      drawArcs();
      drawLabels();
      
      poly
      	.attr(
        	'transform', 
        	`translate(${(width - legendWidth)/2},${height/2})`
      	)
    }
    
    drawPoly(10)
    
    d3.csv('polyNames.csv', function(data){
      var nameG = svg.append('g')
      var labels = nameG
      	.selectAll('g')
      	.data(data)
      	.enter()
      	.append('text')
      	.text(function(d){
          return d.name
        })
      	.attr('transform', (d,i)=>{
          return `translate(0, ${i * 13})`
        })
      	.style('font-size', 10)
      	.style('font-family', 'monospace')
      	.style('cursor', 'pointer')
      	.on('click', function(d,i){
          drawPoly(i+3)
          labels.style('fill', 'black')
          d3.select(this).style('fill', 'red')
        })
     	
      labels.filter(function(d,i){
        if(i===0) {
          d3.select(this).on('click').call(this, d,i);
        }
      })
      
      nameG
      	.attr(
        	'transform',
        	`translate(
						${width - legendWidth},
						${(height - data.length * 13)/2}
					)`
      	)
      
      
    });

</script>
</body>

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