D3 Examples - unconf-badge

xxxxxxxxxx
 
<!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>
​
    