curran/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>