D3 Examples - Proto eye

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proto_eye</title>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <script src="eye.js"></script>
</head>
<body>
<div>
    <span id="generation_counter">NA</span>
</div>
​
<script>
​
    var margin = {top: 50, right: 20, bottom: 50, left: 20},
        width = 350 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;
​
    var generation_count = 0;
​
    // Asynchronously load the data
    d3.queue()
        .defer(d3.csv, "best_per_gen.csv")
        .await(processData);
​
    function processData(error, data) {
        if (error) throw error;
​
        data.forEach(function (d) {
            d.a = +d.a;
            d.i = +d.i;
            d.phi_1 = +d.phi_1;
            d.rho_c = +d.rho_c;
        });
​
        initEye();
        drawEye(data[generation_count]);
        d3.select('#generation_counter').html(generation_count);
​
        d3.interval(function() {
            //console.log(generation_count);
            generation_count += 1;
            if (generation_count >= data.length) {
                generation_count = 0;
            }
            d3.select('#generation_counter').html(generation_count);
            updateEye(data[generation_count]);
        }, 30);
​
    }
​
</script>
​
</body>
</html>
    