biovisualize/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="http://mbostock.github.com/d3/d3.js"></script>
    <style type='text/css'>
        .cell{
            stroke: none;
        }
    </style>
</head>
<body>

<div id="grid"></div>

<script type="text/javascript">

    var ruleString = '3/1234'

    var gridSize = 400,
            gridCellNum = 50,
            cellSize = ~~(gridSize / gridCellNum);
    var data = d3.range(gridCellNum).map(function(d, i){return d3.range(gridCellNum).map(function(d, i, a){
        return ~~(Math.random()*2);
    });});

    var count = 0;
    var timer = setInterval(refreshGrid,30);

    function refreshGrid(){
        var dataTmp = [];
        data.forEach(function(pD, pI){
            dataTmp[pI] = [];
            return pD.forEach(function(d, i){
                var birth = ruleString.split('/')[0].split('').map(function(d, i){return ~~d;});
                var survival = ruleString.split('/')[1].split('').map(function(d, i){return ~~d;});
                var neighbours = countNeighbors(i, pI);
                var alive = !!d;

                dataTmp[pI][i] = d;
                if(alive) dataTmp[pI][i] = ~~(survival.indexOf(neighbours) != -1);
                else dataTmp[pI][i] = ~~(birth.indexOf(neighbours) != -1);
        });});

        data = dataTmp;

        var rows = root.selectAll('g.row')
                .data(data);
        var cells = rows.selectAll('rect.cell')
                .data(function(d, i){return d;});
        cells.style({fill: function(d, i, pI){
            return (!!d)? 'black': 'white';
        }});

        count++;
        if(count >= 100)clearInterval(timer);
    }

    function countNeighbors(col, row){
        var cellValue = data[row][col];
        var n = (row-1 >= 0)? row-1: gridCellNum-1;
        var s = (row+1 <= (gridCellNum-1))? row+1: 0;
        var w = (col-1 >= 0)? col-1: gridCellNum-1;
        var e = (col+1 <= (gridCellNum-1))? col+1: 0;

        var livingNeighbours = data[col][w]
                + data[n][w]
                + data[s][w]
                + data[col][e]
                + data[n][e]
                + data[s][e]
                + data[s][row]
                + data[n][row];
        return livingNeighbours;
    }

    var root = d3.select('#grid').append('svg')
            .attr({width: gridSize, height: gridSize})
            .classed('root', true);
    var rows = root.selectAll('g.row')
            .data(data);
    rows.enter().append('g')
            .classed('row', true)
            .attr({transform: function(d, i){return 'translate(0,' + cellSize * i + ')';}});
    var cells = rows.selectAll('rect.cell')
            .data(function(d, i){return d;});
    cells.enter().append('rect')
            .classed('cell', true)
            .attr({width: cellSize, height: cellSize, x: function(d, i){return cellSize*i;}});
    cells.style({fill: function(d, i){return (!!d)? 'black': 'white';}});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<script type='text/javascript' src="http://mbostock.github.com/d3/d3.js"></script>
	<style type='text/css'>
	.cell{
	stroke: none;
	}
	</style>
	</head>
	<body>

	<div id="grid"></div>

	<script type="text/javascript">

	var ruleString = '3/1234'

	var gridSize = 400,
	gridCellNum = 50,
	cellSize = ~~(gridSize / gridCellNum);
	var data = d3.range(gridCellNum).map(function(d, i){return d3.range(gridCellNum).map(function(d, i, a){
	return ~~(Math.random()*2);
	});});

	var count = 0;
	var timer = setInterval(refreshGrid,30);

	function refreshGrid(){
	var dataTmp = [];
	data.forEach(function(pD, pI){
	dataTmp[pI] = [];
	return pD.forEach(function(d, i){
	var birth = ruleString.split('/')[0].split('').map(function(d, i){return ~~d;});
	var survival = ruleString.split('/')[1].split('').map(function(d, i){return ~~d;});
	var neighbours = countNeighbors(i, pI);
	var alive = !!d;

	dataTmp[pI][i] = d;
	if(alive) dataTmp[pI][i] = ~~(survival.indexOf(neighbours) != -1);
	else dataTmp[pI][i] = ~~(birth.indexOf(neighbours) != -1);
	});});

	data = dataTmp;

	var rows = root.selectAll('g.row')
	.data(data);
	var cells = rows.selectAll('rect.cell')
	.data(function(d, i){return d;});
	cells.style({fill: function(d, i, pI){
	return (!!d)? 'black': 'white';
	}});

	count++;
	if(count >= 100)clearInterval(timer);
	}

	function countNeighbors(col, row){
	var cellValue = data[row][col];
	var n = (row-1 >= 0)? row-1: gridCellNum-1;
	var s = (row+1 <= (gridCellNum-1))? row+1: 0;
	var w = (col-1 >= 0)? col-1: gridCellNum-1;
	var e = (col+1 <= (gridCellNum-1))? col+1: 0;

	var livingNeighbours = data[col][w]
	+ data[n][w]
	+ data[s][w]
	+ data[col][e]
	+ data[n][e]
	+ data[s][e]
	+ data[s][row]
	+ data[n][row];
	return livingNeighbours;
	}

	var root = d3.select('#grid').append('svg')
	.attr({width: gridSize, height: gridSize})
	.classed('root', true);
	var rows = root.selectAll('g.row')
	.data(data);
	rows.enter().append('g')
	.classed('row', true)
	.attr({transform: function(d, i){return 'translate(0,' + cellSize * i + ')';}});
	var cells = rows.selectAll('rect.cell')
	.data(function(d, i){return d;});
	cells.enter().append('rect')
	.classed('cell', true)
	.attr({width: cellSize, height: cellSize, x: function(d, i){return cellSize*i;}});
	cells.style({fill: function(d, i){return (!!d)? 'black': 'white';}});

	</script>

	</body>
	</html>