var myData = [],
    id = 0;

function getColor() {
  //return '#cfeaff';
  return Math.random() < .7 ? '#ace' :  Math.random() < .6 ? '#fa0' : '#f00';
}

function draw() {
    var gDots = d3.select("svg g.dots");
    var dots = gDots.selectAll("circle").data(myData, function (d) {
        return d.id
    })

    dots.enter()
        .append("circle")
        .attr("cx", function (d) {
        return d.x
    })
        .attr("cy", function (d) {
        return d.y
    })
        .attr("r", 5)
        .attr("fill", function (d) {
        return d.color;
    })
        .attr("fill-opacity", .5)

    dots.exit()
        .transition()
        .duration(600)
        .attr("fill-opacity", 0)
        .remove();

    var gRipples = d3.select("svg g.ripples");
    var ripples = gRipples.selectAll("circle").data(myData, function (d) {
        return d.id
    })

    ripples.enter()
        .append("circle")
        .attr("cx", function (d) {
        return d.x
    })
        .attr("cy", function (d) {
        return d.y
    })
        .attr("r", 1)
        .attr("fill", "none")
        .attr("stroke", function (d) {
        return d.color
    })
        .attr("stroke-opacity", 1);

    ripples.transition()
        .duration(500)
        .ease("linear")
        .attr("r", 20)
        .attr("stroke-opacity", 0)

    ripples.exit()
        .remove();

}

function increment() {
    id++;
    var obj = {
        'id': id,
            'x': Math.random() * 100,
            'y': Math.random() * 100,
            'color': getColor()
    }

    myData.push(obj);
    if (myData.length > 100) {
        myData.shift();
    }

    //Random drop
    if (Math.random() < .25) {
        myData.shift();
    }
}

var dataInterval = window.setInterval(function () {
    if (Math.random() < .2) {
        increment();
    }
}, 10)

var drawInterval = window.setInterval(draw, 100);