Making the James Bond opening sequence involved 5 circles, each starting from the far left (cx=0) and then transitioning to their respective end points. Duration is based on a function so that circles travel at the same pace as they have different distances to travel.
Another transition happens, but only once the first transition ends and the circle is in it's final position.
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>show an axis from loaded CSV</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| body { | |
| background-color: black; | |
| } | |
| .area { | |
| fill: #af111c; | |
| stroke-width: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", 1000) | |
| .attr("height", 1000); | |
| var dataset = []; | |
| for (i=0;i<25;i++) { | |
| var newnumber = Math.round(Math.random()*100); | |
| dataset.push(newnumber); | |
| } | |
| var area = d3.svg.area() | |
| .interpolate("cardinal") | |
| .x(function(d,i) { return i*50; }) | |
| .y0(function(d) { return 0; }) | |
| .y1(function(d) { return d+450; }) | |
| .tension(0.5); | |
| svg.selectAll(".circles") | |
| .data([ | |
| ["white",150,2,0], | |
| ["white",300,4,0], | |
| ["white",450,6,0], | |
| ["white",600,8,0], | |
| ["white",750,10,1] | |
| ]) | |
| .enter() | |
| .append("circle") | |
| .classed("circles",true) | |
| .attr("cx",function(d,i) { return 0;}) | |
| .attr("cy",function(d,i){return 200;}) | |
| .attr("r",70) | |
| .attr("fill",function(d) {return "white";}) | |
| .style("opacity",1.0) | |
| .transition() | |
| .ease("linear") | |
| .delay(500) | |
| .duration(function(d,i) {return d[2]*200;}) | |
| .attr("cx",function(d,i) { return d[1];}) | |
| .each("end", function() { | |
| d3.select(this) | |
| .transition() | |
| .delay(300) | |
| .duration(500) | |
| .style("opacity", function(d) {return d[3];}) | |
| .each("end",function() { d3.select(this).transition().duration(1500).ease("linear").attr("r",160).attr("cx",450);}) | |
| ; | |
| }) | |
| ; | |
| //select final circle | |
| //nested each end? | |
| //make bigger, move to centre | |
| //show bond shooting | |
| //show blood | |
| svg.append("svg:path") | |
| .attr("class", "area") | |
| .attr("d", area(dataset)) | |
| .attr("transform","translate(0,-900)") | |
| .attr("opacity",0.8); | |
| d3.select("path.area") | |
| .transition() | |
| .delay(3500) | |
| .ease("linear") | |
| .duration(4000) | |
| .attr("transform","translate(0,0)"); | |
| </script> | |
| </body> | |
| </html> |
