Pentagon by curran

Constructed in the video tutorial: The Pentagon. Inspired by a figure from chapter 5 of Tamara Munzner’s excellent book “Visualization Analysis and Design”.

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <svg width="960" height="500"></svg>
  <script>
    const svg = d3.select('svg');
    const width = svg.attr('width');
    const height = svg.attr('height');
    const centerX = width / 2;
    const centerY = height / 2;
    const numPoints = 5;
    const radius = height / 3;
    
    const points = d3.range(numPoints)
      .map(i => {
        const angle = i / numPoints * Math.PI * 2 + Math.PI;
        return {
          x: Math.sin(angle) * radius + centerX,
          y: Math.cos(angle) * radius + centerY
        };
      });
    
    const spokes = points.map(point => ({
      x1: centerX,
      y1: centerY,
      x2: point.x,
      y2: point.y
    }));
    
    const wheelLines = d3.range(numPoints).map(i => ({
      x1: points[i].x,
      y1: points[i].y,
      x2: points[(i + 1) % numPoints].x,
      y2: points[(i + 1) % numPoints].y
    }));
    
    const lines = spokes.concat(wheelLines);
    
    svg.selectAll('line').data(lines)
      .enter().append('line')
        .attr('x1', d => d.x1)
        .attr('y1', d => d.y1)
        .attr('x2', d => d.x2)
        .attr('y2', d => d.y2)
        .attr('stroke', 'black')
        .attr('stroke-width', 3);
    
    
    
  </script>
</body>