tobiasburri/index.html

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

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>

<style>

body {
background-color:black;
overflow:hidden;
}

#rootElement {
width:600px;
height:600px;
margin-top: 10%;
background-color:black;
text-align: center;
z-index:-1
}

.wrapper {
width:600px;
position:relative;
margin:auto;
}

</style>

    <body>

		<div class="wrapper">

		<div id='rootElement'> </div>

		</div>

        <script type="text/javascript">

			var
				width = 400,
				height = 400,
				numberOfCells = 1,
				rootElem = d3.select('#rootElement'),
				colors = ['black','#9a9a9a']
				svg  = rootElem.append('svg')
							 .attr("width", width)
							 .attr("height", height);

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

			var createRangeIndeces =  function(nCells) {

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

				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 render = function(nCells) {

				d3.selectAll('.square').remove();

				var size = determineSizeofCells(nCells);
				var rangeIndex = createRangeIndeces(nCells);

				svg.selectAll('placeholder')
					.data(rangeIndex)
					.enter()
					.append('rect')
					.style('opacity', 0)
					.attr('class', 'square')
					.attr('x', function(d,i) {return size * d.x})
					.attr('y', function(d,i) {return size * d.y})
					.style('fill', '#9a9a9a')
					.style('stroke-width', 1)
					.style('stroke', 'black')
					.transition(400).delay(function(d,i) {return i * 50 })
					.attr('width', size - 2)
					.attr('height', size - 2)
					.style('opacity', 1)
					.call(endAll, function() { render(nCells + 1) });

			}

			render(numberOfCells);

        </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://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://underscorejs.org/underscore.js"></script>

	<style>

	body {
	background-color:black;
	overflow:hidden;
	}

	#rootElement {
	width:600px;
	height:600px;
	margin-top: 10%;
	background-color:black;
	text-align: center;
	z-index:-1
	}

	.wrapper {
	width:600px;
	position:relative;
	margin:auto;
	}

	</style>

	<body>

	<div class="wrapper">

	<div id='rootElement'> </div>

	</div>

	<script type="text/javascript">

	var
	width = 400,
	height = 400,
	numberOfCells = 1,
	rootElem = d3.select('#rootElement'),
	colors = ['black','#9a9a9a']
	svg = rootElem.append('svg')
	.attr("width", width)
	.attr("height", height);

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

	var createRangeIndeces = function(nCells) {

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

	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 render = function(nCells) {

	d3.selectAll('.square').remove();

	var size = determineSizeofCells(nCells);
	var rangeIndex = createRangeIndeces(nCells);

	svg.selectAll('placeholder')
	.data(rangeIndex)
	.enter()
	.append('rect')
	.style('opacity', 0)
	.attr('class', 'square')
	.attr('x', function(d,i) {return size * d.x})
	.attr('y', function(d,i) {return size * d.y})
	.style('fill', '#9a9a9a')
	.style('stroke-width', 1)
	.style('stroke', 'black')
	.transition(400).delay(function(d,i) {return i * 50 })
	.attr('width', size - 2)
	.attr('height', size - 2)
	.style('opacity', 1)
	.call(endAll, function() { render(nCells + 1) });

	}

	render(numberOfCells);

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