unconf-badge

My badge for d3.unconf 2017

<!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 = 3000;
    var height = 3000;
    var data = Array(1000)
    	.fill({})
    	.map(obj => ({
        x: Math.random() * width,
        y: Math.random() * height
      }));

var svg = d3.select("body").append("svg")
      .attr("width", 1050)
      .attr("height", 1500)

svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
    	.attr("width", 1050)
    	.attr("height", 1500)
      .attr("fill", "#b00")
    
    var voronoi = d3.voronoi()
    	.extent([[-1000, -1000], [width+1000, height+1000]])
    	.x(({x}) => x)
    	.y(({y}) => y);
    
    var container = svg.append('g').attr('transform', 'translate(-100, -100)')
    
    var g = container.append("g")
    	
    var polygon = g.append("g")
  		.selectAll("path")
		  .data(voronoi.polygons(data))
		  .enter().append("path")
	    .call(redrawPolygon);
    
    function redrawPolygon(polygon) {
		  polygon
      	.attr("fill", "white")
      	.attr("opacity", d => Math.random())
      	.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; 			});
		}
    
    function animate(x) {
      g.attr("transform", "rotate("+ Math.cos(x / 2000) * 10 +", "+ Math.cos(x / 10000) * 10 +", 0)")
      window.requestAnimationFrame(animate)
		}
    
    window.requestAnimationFrame(animate)
    
  </script>
</body>

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