D3 Examples - Conway's Game of Life

Conway's Game of Life

Rules

Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.

Any live cell with two or three live neighbours lives on to the next generation.

Any live cell with more than three live neighbours dies, as if by overpopulation.

Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div style="width: 960px; background-color: white;">
            <div id="menu">
                <p>
                    <div class="button" id="start_button">Start</div><div class="button" id="refresh">Refresh</div>
                </p>
                <p>
                    <strong>Parameters</strong><br>
                    <label for="cell_size">Cell Size</label>
                    <select id="cell_size">
                        <option value="2">2</option>
                        <option value="5" selected="selected">5</option>
                        <option value="10">10</option>
                    </select><br>
                    <label for="rate">Pop Rate:</label>
                    <input type="range" id="rate" value="50" min="0" max="100">
                    <label for="rate" id="rate_label">50%</label>
                    <label for="rate">Delay:</label><br>
                    <input type="range" id="speed" value="50" min="1" max="100">
                    <label for="rate" id="speed_label">500 ms</label>
                </p>
                <p>
                    <strong>Stats</strong><br>
                    Steps: <span id="step_count">0</span><br>
                    Pop Rate: <span id="pop_count">50</span>%<br>
                    &Delta; Pop Rate: <span id="pop_delta">0</span>%<br>
                </p>
                <div style="margin: 16px 0px;">
                    <strong>Legend</strong>
                    <div id="legend">
                        <div class="">
                            <div class="legend_cell" style="background-color: #66b266;"></div> Alive
                            <div class="legend_cell" style="background-color: #b26666;"></div> Dead
                        </div>
                    </div>
                </div>
            </div>
            <div id="chart"></div>
        </div>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>
​
    