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.
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 = 10000, delay = 50000;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 stks, countries;// A line generator, for the dark stroke.var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.gdp); });// A line generator, for the dark stroke.var axis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.year); }) .y(h);d3.csv("GDP_trend.csv", function(data) { var parse = d3.time.format("%Y").parse; // Nest values by country. countries = d3.nest() .key(function(d) { return d.country; }) .entries(stks = data); // Parse years and numbers. We assume values are sorted by year. // Also compute the maximum gdp per country, needed for the y-domain. countries.forEach(function(s) { s.values.forEach(function(d) { d.year = parse(d.year); d.gdp = +d.gdp; }); s.maxGDP = d3.max(s.values, function(d) { return d.gdp; }); s.sumGDP = d3.sum(s.values, function(d) { return d.gdp; }); }); // Sort by maximum gdp, descending. countries.sort(function(a, b) { return b.maxGDP - a.maxGDP; }); var g = svg.selectAll("g") .data(countries) .enter().append("g") .attr("class", "country"); setTimeout(lines, duration);});function lines() { x = d3.time.scale().range([0, w - 60]); y = d3.scale.linear().range([h / 6 - 20, 0]); // Compute the minimum and maximum year across countries. x.domain([ d3.min(countries, function(d) { return d.values[0].year; }), d3.max(countries, function(d) { return d.values[d.values.length - 1].year; }) ]); var g = svg.selectAll(".country") .attr("transform", function(d, i) { return "translate(0," + (i * h / 6 + 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); }); function draw(k) { g.each(function(d) { var e = d3.select(this); y.domain([0, d.maxGDP]); e.select("path") .attr("d", function(d) { return line(d.values.slice(0, k + 1)); }); e.selectAll("circle, text") .data(function(d) { return [d.values[k], d.values[k]]; }) .attr("transform", function(d) { return "translate(" + x(d.year) + "," + y(d.gdp) + ")"; }); }); } var k = 1, n = countries[0].values.length; d3.timer(function() { draw(k); if ((k += 2) >= n - 1) { draw(n - 1); setTimeout(function() { svg.selectAll("*").remove(); svg.selectAll("g").data(countries).enter().append("g").attr("class", "country"); lines(); }, duration); return true; } });}</script> https://d3js.org/d3.v3.min.js