jonyrock/.block

## .block
license: mit

## README.md

      
                Raw

        
              README.md
            
          
    CorpGlory
See how is it made: https://www.youtube.com/watch?v=_xvkNo989qY
Built with blockbuilder.org
See how is it made & follow

  
## index.html
<!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>

## polyNames.csv
name
Triangle
Square
Pentagon
Hexagon
Heptagon
Octagon
Nonagon
Decagon
Hendecagon
Dodecagon
Triskaidecagon
Tetrakaidecagon
Pentadecagon
Hexakaidecagon
Heptadecagon
Octakaidecagon
Enneadecagon
Icosagon

## preview.png

      
                Raw

        
              preview.png
            
          
## thumbnail.png

      
                Raw

        
              thumbnail.png
	<!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>
	name
	Triangle
	Square
	Pentagon
	Hexagon
	Heptagon
	Octagon
	Nonagon
	Decagon
	Hendecagon
	Dodecagon
	Triskaidecagon
	Tetrakaidecagon
	Pentadecagon
	Hexakaidecagon
	Heptadecagon
	Octakaidecagon
	Enneadecagon
	Icosagon