baiIey/.block

## .block
license: mit
scrolling: no
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Visualization of randomly sized and positioned rectangles created during the d3unconf 2016, hosted by Google Cloud.
Built with blockbuilder.org

  
## index.html
<!doctype html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>
<canvas id="painting" width="960" height="500"></canvas>
  <script>
    var canvas = d3.select("#painting").node(); // create canvas
    var ctx = canvas.getContext("2d"); // create objects on canvas

    ctx.globalAlpha = 0.5; // opacity of objects

    var data = d3.range(1000) // number of objects
      .map(function(d) {
        return {
          x: 960 * Math.random(),
          y: 500 * Math.random(),
          width: 40 * Math.random(),
          height: 40 * Math.random(),
          group: Math.floor(10*Math.random())
        }
      })

      var render = function(arr) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        arr.forEach(function(d) {
          ctx.fillStyle = "rgb(40" + 20*d.group + ",0)"; // color objects
          // ctx.fillStyle = colorScale(d.group);
          ctx.fillRect(d.x, d.y, d.width, d.height);
        });
      };

      d3.timer(function(t) {
        data.forEach(function(d) {
          d.x += (2 * Math.random() - 1);
          d.y += (2 * Math.random() - 1);
        });
      });

      render(data);

  </script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.js"></script>
	<canvas id="painting" width="960" height="500"></canvas>
	<script>
	var canvas = d3.select("#painting").node(); // create canvas
	var ctx = canvas.getContext("2d"); // create objects on canvas

	ctx.globalAlpha = 0.5; // opacity of objects

	var data = d3.range(1000) // number of objects
	.map(function(d) {
	return {
	x: 960 * Math.random(),
	y: 500 * Math.random(),
	width: 40 * Math.random(),
	height: 40 * Math.random(),
	group: Math.floor(10*Math.random())
	}
	})

	var render = function(arr) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	arr.forEach(function(d) {
	ctx.fillStyle = "rgb(40" + 20*d.group + ",0)"; // color objects
	// ctx.fillStyle = colorScale(d.group);
	ctx.fillRect(d.x, d.y, d.width, d.height);
	});
	};

	d3.timer(function(t) {
	data.forEach(function(d) {
	d.x += (2 * Math.random() - 1);
	d.y += (2 * Math.random() - 1);
	});
	});

	render(data);

	</script>
	</html>