| 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.
| <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> |