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.
<style type="text/css">
.blue { fill: #3284bf; }
.gold { fill: #ffe800; }
.hidden { display: none; }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", "500")
.attr("height", "700")
.append("g");
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>
{"type":"Topology","transform":{"scale":[0.001024766028874296,0.000946834953985681],"translate":[-124.37165376163607,32.53336526988928]},"objects":{"california":{"type":"GeometryCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"geometries":[{"type":"MultiPolygon","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]]]}]}},"arcs":[[[5876,311],[-58,-11],[-62,23],[-54,101],[-60,81],[32,21],[48,-76],[122,-117],[32,-22]],[[4813,722],[-43,-2],[-60,9],[-29,57],[48,4],[45,-8],[36,-45],[3,-15]],[[5877,900],[49,-79],[-71,10],[-73,-4],[-23,42],[-22,60],[-14,15],[-52,4],[-3,5],[-7,30],[14,13],[159,-65],[43,-31]],[[4223,1463],[-69,-16],[-51,15],[-84,102],[177,12],[74,-44],[12,-12],[-59,-57]],[[3967,1574],[-52,-2],[-81,11],[28,24],[44,18],[14,-13],[47,-38]],[[4381,1633],[197,-55],[108,27],[20,-27],[-14,-22],[-240,-41],[-75,29],[-6,38],[-26,38],[36,13]],[[139,9999],[266,0],[258,0],[258,0],[256,0],[258,0],[257,0],[257,0],[258,0],[257,0],[257,0],[258,0],[257,0],[256,0],[259,0],[256,0],[257,0],[0,-198],[0,-198],[0,-199],[0,-197],[0,-198],[0,-198],[2,-199],[0,-198],[0,-199],[0,-197],[0,-198],[0,-198],[0,-199],[0,-197],[0,-199],[0,-197],[229,-173],[228,-172],[229,-173],[228,-173],[229,-173],[228,-172],[229,-174],[228,-172],[179,-145],[179,-145],[179,-147],[179,-144],[179,-146],[179,-147],[179,-145],[178,-145],[248,-209],[248,-210],[247,-208],[249,-210],[248,-209],[247,-210],[248,-209],[264,-224],[0,-89],[53,-118],[156,-216],[18,-52],[1,-1],[6,-55],[62,-59],[146,-82],[33,-40],[0,-3],[-2,-28],[-36,-35],[-161,-119],[-87,-95],[-89,-156],[13,-125],[-4,-106],[-22,-82],[-34,-75],[-44,-70],[-48,-42],[-49,-13],[-17,-92],[15,-170],[55,-104],[94,-36],[59,-57],[21,-75],[-9,-74],[-38,-74],[-63,-40],[-135,-11],[-2,0],[-2,-9],[-113,-11],[-278,-24],[-279,-21],[-280,-24],[-279,-22],[-280,-23],[-278,-22],[-279,-23],[-281,-22],[-1,7],[-7,114],[-46,41],[-57,-24],[-27,149],[14,72],[-7,68],[-54,171],[-146,207],[-312,257],[-161,85],[-125,108],[-78,31],[-101,8],[-28,-49],[-114,34],[16,119],[-109,168],[-92,20],[-227,-12],[-304,92],[-89,56],[-32,99],[-142,86],[-189,83],[-104,-20],[-136,14],[-195,61],[-114,6],[-222,-17],[-83,13],[-76,76],[-82,39],[17,93],[-11,85],[12,66],[-37,145],[30,135],[-26,48],[-46,37],[-147,56],[-27,68],[24,95],[-38,64],[-120,58],[-113,133],[-142,74],[-59,123],[-88,75],[-31,68],[-193,238],[-209,188],[-31,107],[-9,147],[82,90],[43,79],[-4,73],[-12,53],[-71,92],[-277,55],[-226,230],[-13,175],[-88,179],[-1,115],[-14,126],[66,28],[62,-10],[-8,-51],[21,-90],[71,-66],[66,-31],[62,-65],[46,-21],[48,-4],[-27,42],[-27,28],[-32,87],[-62,111],[-74,62],[-35,111],[-31,27],[-21,42],[71,49],[95,36],[127,9],[360,-17],[76,28],[64,-8],[48,4],[-98,29],[-57,-10],[-63,7],[-129,-7],[-53,13],[-57,35],[-37,4],[-120,-62],[-53,7],[-126,68],[-55,9],[-89,-38],[-11,-163],[29,-122],[-53,-14],[-63,52],[-94,28],[-77,46],[-109,85],[-59,32],[-65,-71],[-2,33],[33,82],[-10,137],[99,-109],[-32,76],[-76,85],[-59,31],[-73,151],[-163,93],[-132,147],[-270,244],[-18,215],[-98,272],[41,156],[-6,108],[-48,166],[-50,90],[-218,248],[-211,166],[-32,126],[-14,126],[46,114],[39,118],[30,31],[11,-12],[-9,-26],[31,-9],[11,54],[17,26],[-31,4],[4,17],[18,32],[65,157],[-7,196],[71,242],[-4,79],[-45,172],[-44,102],[-80,73],[36,106],[-4,101],[-16,18]]]}