d3js | circles update with force layout by eesur

based of this really nice example: pusher.com/dynamic-graphs-with-d3-js/

data generated in this format, looping over red, green, blue and incrementing the id:

render([{
    id: 1,
    color: 'red'
}, {
    id: 2,
    color: 'green'
}, {
    id: 3,
    color: 'blue'
}]);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<!-- //clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
<style>
    body { background: #130C0E; }
</style>

<body>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>

script-compiled.js

'use strict';

var w = window.innerWidth;
var h = window.innerHeight;

// store generated data
var data = [];

var svg = d3.select('body').append('svg').attr('width', w).attr('height', h);

var circle = svg.selectAll('circle');

var force = d3.layout.force().size([w, h]).on('tick', function () {
    circle.attr('cx', function (d) {
        return d.x;
    }).attr('cy', function (d) {
        return d.y;
    });
});

var render = function render(data) {
    circle = circle.data(data, function (d) {
        return d.id;
    });

    circle.enter().append('circle').attr('fill', function (d) {
        return d.color;
    }).attr('r', 12).call(force.drag);

    circle.exit().transition().attr('r', 0).remove();

    force.nodes(data).start();
};

// generate some data
function update() {
    var n = 0;
    var c = ['red', 'green', 'blue'];
    return function () {
        data.push({
            id: n,
            color: c[n % 3]
        });
        console.log(data);
        render(data);
        n++;
    };
}
// update every second
// note: calling as update()(); (higher order function)
setInterval(update(), 1000);