D3js draw over time?

I'm trying to draw earthquakes over a period of few months on a map. With the following code I've drawn all the earthquake occurences but I want to scale the time period and make it video-like.

svg.selectAll(".shock")
 .data(data)
 .enter().append("circle")
 .attr("class", 'shock')
 .attr("r", 5)
 .attr("transform", function(d) {
    return "translate(" + projection([
        d.lng,
        d.lat
    ]) + ")";
 });

How do I show all these earthquakes in a 15 second animation? One way I've thought is: append all circles (date-sorted) with radius 0, then increase the radius of the first one, and setTimeout to increase the radius of the next one and so on.. Is there any better way?

I know about time scales, but don't know how to use them to draw over time?

Solution

First scale your min and max time (using .getTime()) over the animation duration

var timeScale = d3.scale.linear()
                    .domain([min, max])
                    // a one second delay before we start + 14 seconds of earthquakes
                    .range([1000, 15000])

Then just set timeouts to display the points according to the scaled time

...
.attr("display", function (d) {
    // set a timeout to show this at the right time
    var self = this;
    setTimeout(function () {
        d3.select(self).attr("display", "block")
    }, timeScale((new Date(d.When)).getTime()));

    return "none";
})

Fiddle - http://jsfiddle.net/4c1ukb1z/ - you'll need to update the projections and the When attribute parsing according to your code / data structure.

Of course, it would be possible to do this using timescales too if you are getting date time objects.