mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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 circleRadius = 100;

    var pad = 10;
    var width = circleRadius*2 + pad*2;
    var height = circleRadius*2 + pad*2;

    var canvas = d3.select("body")
    	.append("canvas")
    	.style("height",height + "px")
    	.style("width",width + "px")
    	.style("outline","1px solid cyan")
    	.style("margin","15px")
    	.style("background",d3.hsl(50,1,.5))

    var context = canvas.node().getContext("2d")

    var colorDivs = d3.select("body").selectAll(".colorDivs").data(d3.range(360))

   	colorDivs.enter()
    		.append("div")
    		.style("height","2px")
    		.style("width","50px")
    		.style("background",function(d,i){return d3.hsl(i,1,.5)})

  </script>
</body>
	<!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 circleRadius = 100;

	var pad = 10;
	var width = circleRadius2 + pad2;
	var height = circleRadius2 + pad2;

	var canvas = d3.select("body")
	.append("canvas")
	.style("height",height + "px")
	.style("width",width + "px")
	.style("outline","1px solid cyan")
	.style("margin","15px")
	.style("background",d3.hsl(50,1,.5))

	var context = canvas.node().getContext("2d")

	var colorDivs = d3.select("body").selectAll(".colorDivs").data(d3.range(360))

	colorDivs.enter()
	.append("div")
	.style("height","2px")
	.style("width","50px")
	.style("background",function(d,i){return d3.hsl(i,1,.5)})

	</script>
	</body>