tobiasburri/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>

<style>

.container {
  width: 495px;
  height: 495px;
  border:1px solid black;
  margin: auto;
  margin-top:1px;
}

</style>

<body>

	<div class='container'><div>

		<script type="text/javascript">

		var width = 495;
		var height = 495;
		var radius = width / 2;
		var centre = {'x': width/2, 'y':height/2};
		var buffer = 2;

		var nCells = 100;

		var determineSizeofCells = function(nCells) {
		  var sizeOfCell = (width - buffer) / nCells;
		  return sizeOfCell;
		};


		var isInsideOfCircle = function(square) {
			var x1 = square.x,
				y1 = square.y,
				x2 = square.x + square.size,
				y2 = square.y + square.size,
				result = true,
				coordinates = [
					{'x':x1, 'y':y1}, {'x':x1, 'y':y2},
					{'x':x2, 'y':y1}, {'x':x2, 'y':y2}
				];

		  coordinates.forEach(function(edge) {
			if( Math.pow((edge.x - centre.x),2) + Math.pow((edge.y - centre.y),2) > Math.pow(radius,2)) { result = false;
			}
		  })
		  return result;
		};


		var createRangeIndeces =  function(nCells) {
			var size = determineSizeofCells(nCells);
			var container = []
				_.range(nCells).forEach(function (i) {
					return _.range(nCells).forEach(function (j) {
						container.push({'x':j * size + buffer,'y':i * size + buffer, 'size':size});
					});
				});
			return container;
		};


		var getValidCells = function(rangeIndeces) {
			var container = [];
		  rangeIndeces.forEach( function(obj) {
			if(isInsideOfCircle(obj)){
				container.push(obj)
				}
			}
		  )
			return container;
		}

		var endAll = function (transition, callback) {
		  if (transition.size() === 0) { callback() }
		  var n = 0;
		  transition
			.each(function() { ++n; })
			.each("end", function() { if (!--n) callback.apply(this, arguments); });
		};


		var getRanNum = function(num) {
		  var  ranNum = Math.ceil(Math.random() * num);
		  return ranNum;

		}


		var svg = d3.select('.container')
					.append('svg')
					.attr('width', width)
					.attr('height', height);

		var circle = svg.append('circle')
			.attr('cx', centre.x)
		   .attr('cy', centre.y)
		   .attr('r', radius)
		   .style('fill','transparent')
		   .style('stroke', 'black')

		var render = function(nCells) {

			if(nCells > 60) {
				nCells = 3;
			}

			svg.selectAll('rect').remove();

			var indeces = createRangeIndeces(nCells);
			var squares = getValidCells(indeces);
			var ranNum = Math.random();
			var modulo = getRanNum(nCells);


			var rects = svg.selectAll('squares')
											 .data(squares)
							 .enter()
							 .append('rect')
							 .attr('x', function(d){ return d.x})
											 .attr('y', function(d){ return d.y})
							 .style('stroke', 'transparent')
							 .style('fill', 'grey')
							 .transition(400).delay(function(d,i) {return i * 0.5  })
							 .attr('width', function(d){ return d.size - 1.2})
							 .attr('height',  function(d){ return d.size - 1.2})
							 .style('opacity', function(d,i) {return  ranNum > 0.5 ?  ((i % modulo) * 0.1) :  (1 -  (i % modulo) * 0.1)  })
							 .call(endAll, function() { render(nCells + 1) });
			}


		render(nCells)

        </script>
    </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://underscorejs.org/underscore.js"></script>

	<style>

	.container {
	width: 495px;
	height: 495px;
	border:1px solid black;
	margin: auto;
	margin-top:1px;
	}

	</style>

	<body>

	<div class='container'><div>

	<script type="text/javascript">

	var width = 495;
	var height = 495;
	var radius = width / 2;
	var centre = {'x': width/2, 'y':height/2};
	var buffer = 2;

	var nCells = 100;

	var determineSizeofCells = function(nCells) {
	var sizeOfCell = (width - buffer) / nCells;
	return sizeOfCell;
	};


	var isInsideOfCircle = function(square) {
	var x1 = square.x,
	y1 = square.y,
	x2 = square.x + square.size,
	y2 = square.y + square.size,
	result = true,
	coordinates = [
	{'x':x1, 'y':y1}, {'x':x1, 'y':y2},
	{'x':x2, 'y':y1}, {'x':x2, 'y':y2}
	];

	coordinates.forEach(function(edge) {
	if( Math.pow((edge.x - centre.x),2) + Math.pow((edge.y - centre.y),2) > Math.pow(radius,2)) { result = false;
	}
	})
	return result;
	};


	var createRangeIndeces = function(nCells) {
	var size = determineSizeofCells(nCells);
	var container = []
	_.range(nCells).forEach(function (i) {
	return _.range(nCells).forEach(function (j) {
	container.push({'x':j * size + buffer,'y':i * size + buffer, 'size':size});
	});
	});
	return container;
	};


	var getValidCells = function(rangeIndeces) {
	var container = [];
	rangeIndeces.forEach( function(obj) {
	if(isInsideOfCircle(obj)){
	container.push(obj)
	}
	}
	)
	return container;
	}

	var endAll = function (transition, callback) {
	if (transition.size() === 0) { callback() }
	var n = 0;
	transition
	.each(function() { ++n; })
	.each("end", function() { if (!--n) callback.apply(this, arguments); });
	};


	var getRanNum = function(num) {
	var ranNum = Math.ceil(Math.random() * num);
	return ranNum;

	}


	var svg = d3.select('.container')
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	var circle = svg.append('circle')
	.attr('cx', centre.x)
	.attr('cy', centre.y)
	.attr('r', radius)
	.style('fill','transparent')
	.style('stroke', 'black')

	var render = function(nCells) {

	if(nCells > 60) {
	nCells = 3;
	}

	svg.selectAll('rect').remove();

	var indeces = createRangeIndeces(nCells);
	var squares = getValidCells(indeces);
	var ranNum = Math.random();
	var modulo = getRanNum(nCells);


	var rects = svg.selectAll('squares')
	.data(squares)
	.enter()
	.append('rect')
	.attr('x', function(d){ return d.x})
	.attr('y', function(d){ return d.y})
	.style('stroke', 'transparent')
	.style('fill', 'grey')
	.transition(400).delay(function(d,i) {return i * 0.5 })
	.attr('width', function(d){ return d.size - 1.2})
	.attr('height', function(d){ return d.size - 1.2})
	.style('opacity', function(d,i) {return ranNum > 0.5 ? ((i % modulo) * 0.1) : (1 - (i % modulo) * 0.1) })
	.call(endAll, function() { render(nCells + 1) });
	}


	render(nCells)

	</script>
	</body>
	</html>