D3 Examples - random blocks

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  <body>
​
    <script>
​
      var scale = d3.scale.linear()
        .domain([1, 5])   // Data space
        .range([0, 200]); // Pixel space
​
      var svg = d3.select("body").append("svg")
        .attr("width",  250)
        .attr("height", 250);
​
      function render(data, color){
​
        // Bind data
        var rects = svg.selectAll("rect").data(data);
        
        // Enter
        rects.enter().append("rect")
          .attr("y", 50)
          .attr("width",  20)
          .attr("height", 20);
​
        // Update
        rects
          .attr("x", scale)
          .attr("fill", color);
​
        // Exit
        rects.exit().remove();
      }
​
      for (var i=0; i <10;i++){
​
          setTimeout( function (){ render([1, 2, 2.5],     "red");    }, 1000);
          setTimeout( function (){ render([1, 2, 3, 4, 5], "blue");   }, 2000);
          setTimeout( function (){ render([1, 2],          "green");  }, 3000);
          setTimeout( function (){ render([3, 4, 5],       "cyan");   }, 4000);
          setTimeout( function (){ render([4, 5],          "magenta");}, 5000);
}
​
    </script>
​
  </body>
</html>
​
    