Load data incrementally in d3 using a sorted value

Gradually loads all the cities of California from north to south, and then removes them from south to north.

Accomplished by sorting the d3 selection prior to the transition, and then adding a custom delay for each object using its index value.

This same principle can be used to progressively load data along any x or y axis.

<body>

var projection = d3.geo.mercator()
    .center([-114, 39.25])
    .scale(2500);

var path = d3.geo.path().projection(projection);

var button = d3.select("body")
    .append("button")
        .classed("hidden", true)
        .text("Reload");

var boot = function (error, outline, cities) {
    var geojson = topojson.feature(outline, outline.objects.california);
    var california = svg.append("path")
        .datum(geojson)
        .attr("d", path)
        .attr("class", "blue");

svg.selectAll('circle')
        .data(cities.features)
        .enter()
          .append('circle')
          .attr('class', 'gold')
          .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
          .attr('r', 0);

animate();
    button.on("click", animate);
};

var animate = function () {
    button.classed("hidden", true);

svg.selectAll('circle').sort(function (a, b) {
        return d3.descending(a.properties.Latitude, b.properties.Latitude)
    }).transition()
        .duration(1500)
        .delay(function (d, i) { return i*3; })
        .attr("r", 2);

svg.selectAll('circle').sort(function (a, b) {
        return d3.ascending(a.properties.Latitude, b.properties.Latitude)
    }).transition()
        .duration(1500)
        .delay(function (d, i) { return 2500 + i*3; })
        .attr("r", 0)
        .each("end", function (d) { button.classed("hidden", false); })
};

queue()
    .defer(d3.json, 'california.topojson')
    .defer(d3.json, 'cities.geojson')
    .await(boot);
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js