Conway's Game of Life

Conway's Game of life is a Cellular automata. The universe is an infinite two dimensional orthogonal grid consisting of square cells. At any given time each cell is either alive or dead. As time progresses discretely, the status of each cell is determined by the number of live cells in the 8 most adjacent squares of the cell.

Let n(x) be the number of lives cells in the 8 most adjacent squares of square x at time t. As time moves to t+1

If n(x) <= 1, then x dies or stays dead (from under population).
If n(x) > 3, then x dies or stays dead (from over population).
if n(x) = 3, then x is born or stays alive.
if n(x) = 2, then x maintains status.

In this implementation you can do the following:

Select one of the Sample patterns and click start to let time progress.
or Click new and create a pattern by clicking squares and then press start button.

<html>
<head>
	<title>Conway's Game of Life</title>
	<style>
		body{
			width:960px;
			margin:0 auto;
			}
		rect{
			stroke:rgba(204, 204,204,0.2);
			shape-rendering:crispEdges;
		}
		.edit:hover{
			stroke:steelblue;
			cursor:pointer;
		}
		select{
			width:80px;
		}
		button{
			min-width:50px;
			padding: 0 40px;
		}
	</style>
</head>
<body><section style="display:block;">
Sample Patterns: <select onchange="changeUniv(this)"></select>
<button type="button" onClick="newUniv()">New</button>
<button type="button" onClick="startUniv()" id='startBtn'>Start</button>
</section>
<svg width='796' height='448'></svg>

function changeUniv(t){
	goL.setGrid(games[t.options[t.selectedIndex].value]);
	d3.select("#startBtn").html("Start");
	goL.editMode(true);
}

d3.select("select").selectAll("option").data(d3.keys(games))
    .enter().append("option").attr("value",function(d){ return d;})
    .text(function(d){return d;});

goL.setGrid(games.Planes);
startUniv();

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js