| license: MIT | |
| border: no | |
| height: 800 |
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.
| {"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]]]} |
| <style type="text/css"> | |
| .blue { fill: #3284bf; } | |
| .gold { fill: #ffe800; } | |
| .hidden { display: none; } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://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> |