The first 15 seconds of the D3 show reel. See full video at http://vimeo.com/29862153. Includes seamless transitions between the following visualization types:
Admittedly, these aren’t the most useful visualizations; their purpose is not to inform but to demonstrate D3’s capability for producing dynamic visualizations with custom transitions. They do show real data (the monthly closing price for ten years’ worth of stock data), but I didn’t include axes for date or price. See the axis component for a better example. Also, the stacked visualizations aren’t especially meaningful, unless you imagine owning a portfolio with equal parts AAPL, AMZN, IBM and MSFT. Similarly, the bars and donuts represent the average price (or sum) during this time period.
forked from mbostock's block: D3 Show Reel
xxxxxxxxxx<meta charset="utf-8"><style type="text/css">svg { font-family: "Helvetica Neue", Helvetica;}.line { fill: none; stroke: #000; stroke-width: 2px;}</style><body><script src="//d3js.org/d3.v3.min.js"></script><script>var m = [20, 20, 30, 20], w = 960 - m[1] - m[3], h = 500 - m[0] - m[2];var x, y, duration = 1500, delay = 500;var color = d3.scale.category10();var svg = d3.select("body").append("svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")");var stocks, symbols;// A line generator, for the dark stroke.//cho nay da cat bien line()var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.price); }); //La c'est la fin de function line()! // A line generator, for the dark stroke.var axis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(h);// A area generator, for the dark stroke.var area = d3.svg.area() .interpolate("basis") .x(function(d) { return x(d.date); }) .y1(function(d) { return y(d.price); });d3.csv("stocks.csv", function(data) { var parse = d3.time.format("%b %Y").parse; // Nest stock values by symbol. symbols = d3.nest() .key(function(d) { return d.symbol; }) .entries(stocks = data); // Parse dates and numbers. We assume values are sorted by date. // Also compute the maximum price per symbol, needed for the y-domain. symbols.forEach(function(s) { s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; }); s.maxPrice = d3.max(s.values, function(d) { return d.price; }); s.sumPrice = d3.sum(s.values, function(d) { return d.price; }); }); // Sort by maximum price, descending. symbols.sort(function(a, b) { return b.maxPrice - a.maxPrice; }); var g = svg.selectAll("g") .data(symbols) .enter().append("g") .attr("class", "symbol");//thu doi thanh horizons thay vi lines setTimeout(lines, duration);}); //La c'est la fin de function line()! function lines() { x = d3.time.scale().range([0, w - 60]); y = d3.scale.linear().range([h / 4 - 20, 0]); // Compute the minimum and maximum date across symbols. x.domain([ d3.min(symbols, function(d) { return d.values[0].date; }), d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; }) ]); var g = svg.selectAll(".symbol") .attr("transform", function(d, i) { return "translate(0," + (i * h / 4 + 10) + ")"; }); g.each(function(d) { var e = d3.select(this); e.append("path") .attr("class", "line"); e.append("circle") .attr("r", 5) .style("fill", function(d) { return color(d.key); }) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr("x", 12) .attr("dy", ".31em") .text(d.key); });//cat xuong duoi setTimeout(horizons, 500); } //Je pense que je vais couper a partir de celui ci function horizons() { svg.insert("defs", ".symbol") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", w) .attr("height", h / 4 - 20); var color = d3.scale.ordinal() .range(["#c6dbef", "#9ecae1", "#6baed6"]); var g = svg.selectAll(".symbol") .attr("clip-path", "url(#clip)"); area .y0(h / 4 - 20); g.select("circle").transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (-h / 4) + ")"; }) .remove(); g.select("text").transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 4 - 20) + ")"; }) .attr("dy", "0em"); g.each(function(d) { y.domain([0, d.maxPrice]); d3.select(this).selectAll(".area") .data(d3.range(3)) .enter().insert("path", ".line") .attr("class", "area") .attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; }) .attr("d", area(d.values)) .style("fill", function(d, i) { return color(i); }) .style("fill-opacity", 1e-6); y.domain([0, d.maxPrice / 3]); d3.select(this).selectAll(".line").transition() .duration(duration) .attr("d", line(d.values)) .style("stroke-opacity", 1e-6); d3.select(this).selectAll(".area").transition() .duration(duration) .style("fill-opacity", 1) .attr("d", area(d.values)) .each("end", function() { d3.select(this).style("fill-opacity", null); }); }); setTimeout(areas, duration + delay);} //fin de fonction horizons() function areas() { var g = svg.selectAll(".symbol"); axis .y(h / 4 - 21); g.select(".line") .attr("d", function(d) { return axis(d.values); }); g.each(function(d) { y.domain([0, d.maxPrice]); d3.select(this).select(".line").transition() .duration(duration) .style("stroke-opacity", 1) .each("end", function() { d3.select(this).style("stroke-opacity", null); }); d3.select(this).selectAll(".area") .filter(function(d, i) { return i; }) .transition() .duration(duration) .style("fill-opacity", 1e-6) .attr("d", area(d.values)) .remove(); d3.select(this).selectAll(".area") .filter(function(d, i) { return !i; }) .transition() .duration(duration) .style("fill", color(d.key)) .attr("d", area(d.values)); }); svg.select("defs").transition() .duration(duration) .remove(); g.transition() .duration(duration) .each("end", function() { d3.select(this).attr("clip-path", null); }); setTimeout(stackedArea, duration + delay);} //fin de zone de fonction area()function stackedArea() { var stack = d3.layout.stack() .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }) .order("reverse"); stack(symbols); y .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))]) .range([h, 0]); line .y(function(d) { return y(d.price0); }); area .y0(function(d) { return y(d.price0); }) .y1(function(d) { return y(d.price0 + d.price); }); var t = svg.selectAll(".symbol").transition() .duration(duration) .attr("transform", "translate(0,0)") .each("end", function() { d3.select(this).attr("transform", null); }); t.select("path.area") .attr("d", function(d) { return area(d.values); }); t.select("path.line") .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; }) .attr("d", function(d) { return line(d.values); }); t.select("text") .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });//Cho nay de dat ham streamgraph neu can setTimeout(overlappingArea, duration + delay);}//fin de zone de fonction streamgraph() function overlappingArea() { var g = svg.selectAll(".symbol"); line .y(function(d) { return y(d.price0 + d.price); }); g.select(".line") .attr("d", function(d) { return line(d.values); }); y .domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))]) .range([h, 0]); area .y0(h) .y1(function(d) { return y(d.price); }); line .y(function(d) { return y(d.price); }); var t = g.transition() .duration(duration); t.select(".line") .style("stroke-opacity", 1) .attr("d", function(d) { return line(d.values); }); t.select(".area") .style("fill-opacity", .5) .attr("d", function(d) { return area(d.values); });//Fin de zone de function groupeBar() //fin de zone de function transposeBar() //fin de zone de fonction donut() setTimeout(function() { svg.selectAll("*").remove(); svg.selectAll("g").data(symbols).enter().append("g").attr("class", "symbol"); lines(); }, duration);} //fin de zone de function donutExpode()</script> https://d3js.org/d3.v3.min.js