RubyGems - picky-statistics - Versions diffs - 4.0.0pre3 → 4.0.0pre5 - Mend

picky-statistics 4.0.0pre3 → 4.0.0pre5

Files changed (596) hide show

data/lib/picky-statistics/application/javascripts/d3/examples/population/population.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>U.S. Population</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.csv.js"></script>
+    <link type="text/css" rel="stylesheet" href="population.css"/>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript" src="population.js"></script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/population/population.js ADDED Viewed

@@ -0,0 +1,126 @@
+var w = 960,
+    h = 500,
+    x = d3.scale.linear().range([0, w]),
+    y = d3.scale.linear().range([0, h - 40]);
+// An SVG element with a bottom-right origin.
+var svg = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h)
+    .style("padding-right", "30px")
+  .append("g")
+    .attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)");
+// A sliding container to hold the bars.
+var body = svg.append("g")
+    .attr("transform", "translate(0,0)");
+// A container to hold the y-axis rules.
+var rules = svg.append("g");
+// A label for the current year.
+var title = svg.append("text")
+    .attr("class", "title")
+    .attr("dy", ".71em")
+    .attr("transform", "translate(" + x(1) + "," + y(1) + ")scale(-1,-1)")
+    .text(2000);
+d3.csv("population.csv", function(data) {
+  // Convert strings to numbers.
+  data.forEach(function(d) {
+    d.people = +d.people;
+    d.year = +d.year;
+    d.age = +d.age;
+  });
+  // Compute the extent of the data set in age and years.
+  var age0 = 0,
+      age1 = d3.max(data, function(d) { return d.age; }),
+      year0 = d3.min(data, function(d) { return d.year; }),
+      year1 = d3.max(data, function(d) { return d.year; }),
+      year = year1;
+  // Update the scale domains.
+  x.domain([0, age1 + 5]);
+  y.domain([0, d3.max(data, function(d) { return d.people; })]);
+  // Add rules to show the population values.
+  rules = rules.selectAll(".rule")
+      .data(y.ticks(10))
+    .enter().append("g")
+      .attr("class", "rule")
+      .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
+  rules.append("line")
+      .attr("x2", w);
+  rules.append("text")
+      .attr("x", 6)
+      .attr("dy", ".35em")
+      .attr("transform", "rotate(180)")
+      .text(function(d) { return Math.round(d / 1e6) + "M"; });
+  // Add labeled rects for each birthyear.
+  var years = body.selectAll("g")
+      .data(d3.range(year0 - age1, year1 + 5, 5))
+    .enter().append("g")
+      .attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; });
+  years.selectAll("rect")
+      .data(d3.range(2))
+    .enter().append("rect")
+      .attr("x", 1)
+      .attr("width", x(5) - 2)
+      .attr("height", 1e-6);
+  years.append("text")
+      .attr("y", -6)
+      .attr("x", -x(5) / 2)
+      .attr("transform", "rotate(180)")
+      .attr("text-anchor", "middle")
+      .style("fill", "#fff")
+      .text(String);
+  // Add labels to show the age.
+  svg.append("g").selectAll("text")
+      .data(d3.range(0, age1 + 5, 5))
+    .enter().append("text")
+      .attr("text-anchor", "middle")
+      .attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; })
+      .attr("dy", ".71em")
+      .text(String);
+  // Nest by year then birthyear.
+  data = d3.nest()
+      .key(function(d) { return d.year; })
+      .key(function(d) { return d.year - d.age; })
+      .rollup(function(v) { return v.map(function(d) { return d.people; }); })
+      .map(data);
+  // Allow the arrow keys to change the displayed year.
+  d3.select(window).on("keydown", function() {
+    switch (d3.event.keyCode) {
+      case 37: year = Math.max(year0, year - 10); break;
+      case 39: year = Math.min(year1, year + 10); break;
+    }
+    redraw();
+  });
+  redraw();
+  function redraw() {
+    if (!(year in data)) return;
+    title.text(year);
+    body.transition()
+        .duration(750)
+        .attr("transform", function(d) { return "translate(" + x(year - year1) + ",0)"; });
+    years.selectAll("rect")
+        .data(function(d) { return data[year][d] || [0, 0]; })
+      .transition()
+        .duration(750)
+        .attr("height", y);
+  }
+});

data/lib/picky-statistics/application/javascripts/d3/examples/qq/qq.css ADDED Viewed

@@ -0,0 +1,18 @@
+#chart {
+  font: 10px sans-serif;
+  width: 960px;
+  height: 310px;
+}
+.qq .box, .qq .tick line, .qq .quantile, .qq .diagonal {
+  stroke: #aaa;
+  fill: none;
+}
+.qq .quantile {
+  stroke: #000;
+}
+.qq g + g .y.tick {
+  display: none;
+}

data/lib/picky-statistics/application/javascripts/d3/examples/qq/qq.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Q-Q Plots</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.chart.js"></script>
+    <script type="text/javascript" src="../../lib/science/science.js"></script>
+    <script type="text/javascript" src="../../lib/science/science.stats.js"></script>
+    <link type="text/css" rel="stylesheet" href="../button.css"/>
+    <link type="text/css" rel="stylesheet" href="qq.css"/>
+  </head>
+  <body>
+    <div id="chart">
+      <button class="first last" onclick="transition()">
+        Update
+      </button>
+    </div>
+    <script type="text/javascript" src="stats.js"></script>
+    <script type="text/javascript" src="qq.js"></script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/qq/qq.js ADDED Viewed

@@ -0,0 +1,66 @@
+var w = 280,
+    h = 280,
+    m = [10, 0, 20, 35], // top right bottom left
+    n = 10000; // number of samples to generate
+var chart = d3.chart.qq()
+    .width(w)
+    .height(h)
+    .domain([-.1, 1.1])
+    .tickFormat(function(d) { return ~~(d * 100); });
+var vis = d3.select("#chart")
+  .append("svg")
+  .append("g")
+    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+d3.json("turkers.json", function(turkers) {
+  var tm = science.stats.mean(turkers),
+      td = Math.sqrt(science.stats.variance(turkers)),
+      dd = [
+        [0.10306430789206111, 0.0036139086950272735, 0.30498647327844536],
+        [0.5924252668569606, 0.0462763685758622, 0.4340870312025223],
+        [0.9847627827855167, 2.352350767874714e-4, 0.2609264955190324]
+      ];
+  var g = vis.selectAll("g")
+      .data([{
+        x: d3.range(n).map(Math.random),
+        y: turkers,
+        label: "Uniform Distribution"
+      }, {
+        x: d3.range(n).map(normal1(tm, td)),
+        y: turkers,
+        label: "Gaussian (Normal) Distribution"
+      }, {
+        x: d3.range(n).map(normal3(dd)),
+        y: turkers,
+        label: "Mixture of 3 Gaussians"
+      }])
+    .enter().append("g")
+      .attr("class", "qq")
+      .attr("transform", function(d, i) { return "translate(" + (w + m[1] + m[3]) * i + ")"; });
+  g.append("rect")
+      .attr("class", "box")
+      .attr("width", w)
+      .attr("height", h);
+  g.call(chart);
+  g.append("text")
+      .attr("dy", "1.3em")
+      .attr("dx", ".6em")
+      .text(function(d) { return d.label; });
+  chart.duration(1000);
+  window.transition = function() {
+    g.map(randomize).call(chart);
+  };
+});
+function randomize(d) {
+  d.y = d3.range(n).map(Math.random);
+  return d;
+}

data/lib/picky-statistics/application/javascripts/d3/examples/qq/stats.js ADDED Viewed

@@ -0,0 +1,28 @@
+// Sample from a normal distribution with mean 0, stddev 1.
+function normal() {
+  var x = 0, y = 0, rds, c;
+  do {
+    x = Math.random() * 2 - 1;
+    y = Math.random() * 2 - 1;
+    rds = x * x + y * y;
+  } while (rds == 0 || rds > 1);
+  c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
+  return x * c; // throw away extra sample y * c
+}
+// Simple 1D Gaussian (normal) distribution
+function normal1(mean, deviation) {
+  return function() {
+    return mean + deviation * normal();
+  };
+}
+// Gaussian Mixture Model (k=3) fit using E-M algorithm
+function normal3(dd) {
+  return function() {
+    var r = Math.random(),
+        i = r < dd[0][2] ? 0 : r < dd[0][2] + dd[1][2] ? 1 : 2,
+        d = dd[i];
+    return d[0] + Math.sqrt(d[1]) * normal();
+  }
+}

data/lib/picky-statistics/application/javascripts/d3/examples/qq/turkers.json ADDED Viewed

@@ -0,0 +1 @@

+ [0.009259259,0.014285714,0.014285714,0.016666667,0.016666667,0.017857143,0.018518519,0.027777778,0.028571429,0.028571429,0.028571429,0.033333333,0.033333333,0.035714286,0.0375,0.041666667,0.041666667,0.041666667,0.041666667,0.042857143,0.042857143,0.042857143,0.05,0.055555556,0.069444444,0.083333333,0.083333333,0.083333333,0.083333333,0.083333333,0.083333333,0.085714286,0.1,0.1,0.101851852,0.104166667,0.111111111,0.111111111,0.114285714,0.114285714,0.116666667,0.12037037,0.125,0.125,0.128571429,0.133333333,0.138888889,0.141666667,0.142857143,0.142857143,0.15,0.152777778,0.158333333,0.166666667,0.171428571,0.183333333,0.185714286,0.185714286,0.1875,0.190140845,0.194444444,0.2,0.204545455,0.208333333,0.214285714,0.214285714,0.253521127,0.271428571,0.277777778,0.291666667,0.3,0.3,0.307017544,0.324074074,0.328571429,0.333333333,0.333333333,0.342857143,0.357142857,0.358333333,0.378787879,0.381355932,0.395833333,0.4,0.414285714,0.414285714,0.414285714,0.414285714,0.43,0.433333333,0.4375,0.445833333,0.450704225,0.453333333,0.458333333,0.466666667,0.476666667,0.494736842,0.5,0.516666667,0.533333333,0.55,0.557142857,0.56884058,0.569444444,0.571428571,0.585714286,0.61,0.622222222,0.657407407,0.666666667,0.678947368,0.685714286,0.685714286,0.69047619,0.7,0.7,0.7,0.711538462,0.763888889,0.771428571,0.788888889,0.8,0.8,0.808333333,0.824712644,0.828571429,0.836842105,0.839285714,0.839285714,0.84,0.842857143,0.842857143,0.842857143,0.85,0.859649123,0.869791667,0.871428571,0.871428571,0.892344498,0.914285714,0.928571429,0.933908046,0.953703704,0.973684211,0.975,0.981481481,0.983333333,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.985714286,0.987096774,0.990740741,0.991666667,0.992,0.994047619,0.996666667,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

data/lib/picky-statistics/application/javascripts/d3/examples/quadtree/quadtree.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Quadtree</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <style type="text/css">
+svg {
+  padding: 2px;
+}
+circle {
+  fill: lightsteelblue;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+rect {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: .3;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var w = 500;
+// Generate random points.
+var data = d3.range(500).map(function() {
+  return {
+    x: Math.random() * w,
+    y: Math.random() * w
+  };
+});
+// Generate a quadtree of the specified data.
+var quadtree = d3.geom.quadtree(data, 0, w);
+var vis = d3.select("body").append("svg")
+    .attr("width", w)
+    .attr("height", w)
+    .style("pointer-events", "all");
+vis.selectAll("rect")
+    .data(nodes(quadtree))
+  .enter().append("rect")
+    .attr("x", function(d) { return d.x; })
+    .attr("y", function(d) { return d.y; })
+    .attr("width", function(d) { return d.width; })
+    .attr("height", function(d) { return d.height; });
+vis.selectAll("circle")
+    .data(data)
+  .enter().append("circle")
+    .attr("cx", function(d) { return d.x; })
+    .attr("cy", function(d) { return d.y; })
+    .attr("r", 4.5);
+// Highlight selected nodes using the quadtree.
+vis.on("mousedown", function() {
+  var m0 = d3.svg.mouse(this);
+  var rect = d3.select(this).append("rect")
+      .style("fill", "#999")
+      .style("fill-opacity", .5);
+  d3.select(window).on("mousemove", function() {
+    var m1 = d3.svg.mouse(rect.node()),
+        x0 = Math.min(w, m0[0], m1[0]),
+        y0 = Math.min(w, m0[1], m1[1]),
+        x1 = Math.max(0, m0[0], m1[0]),
+        y1 = Math.max(0, m0[1], m1[1]);
+    data.forEach(function(d) { d.z = 0; })
+    find(quadtree, x0, y0, x1, y1).forEach(function(d) { d.z = 1; });
+    vis.selectAll("circle").style("fill", function(d) { return d.z ? "red" : null; });
+    rect.attr("x", x0).attr("y", y0).attr("width", x1 - x0).attr("height", y1 - y0);
+  });
+  d3.select(window).on("mouseup", function() {
+    rect.remove();
+    d3.select(window).on("mousemove", null).on("mouseup", null);
+  });
+  d3.event.preventDefault();
+});
+// Collapse the quadtree into an array of rectangles.
+function nodes(quadtree) {
+  var nodes = [];
+  quadtree.visit(function(node, x1, y1, x2, y2) {
+    nodes.push({x: x1, y: y1, width: x2 - x1, height: y2 - y1});
+  });
+  return nodes;
+}
+// Find the nodes within the specified rectangle.
+function find(quadtree, x0, y0, x3, y3) {
+  var points = [];
+  quadtree.visit(function(node, x1, y1, x2, y2) {
+    var p = node.point;
+    if (p && (p.x >= x0) && (p.x < x3) && (p.y >= y0) && (p.y < y3)) points.push(p);
+    return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0;
+  });
+  return points;
+}
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/showreel/showreel.html ADDED Viewed

@@ -0,0 +1,661 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.csv.js"></script>
+    <script type="text/javascript" src="../../d3.geo.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <script type="text/javascript" src="../../d3.time.js"></script>
+    <style type="text/css">
+svg {
+  border: solid 1px #000;
+  display: block;
+  margin: auto;
+  font-family: "Helvetica Neue";
+}
+.line {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2px;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [120, 60, 60, 60],
+    w = 1280 - m[1] - m[3],
+    h = 720 - m[0] - m[2];
+var x = d3.time.scale().range([0, w - 60]),
+    y = d3.scale.linear().range([h / 4 - 20, 0]),
+    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.
+var line = d3.svg.line()
+    .interpolate("basis")
+    .x(function(d) { return x(d.date); })
+    .y(function(d) { return y(d.price); });
+// 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); })
+    .y0(h / 4 - 20)
+    .y1(function(d) { return y(d.price); });
+d3.csv("../data/stocks.csv", function(data) {
+  var parse = d3.time.format("%b %Y").parse,
+      filter = {AAPL: 1, AMZN: 1, MSFT: 1, IBM: 1};
+  stocks = data.filter(function(d) { return d.symbol in filter; });
+  // Nest stock values by symbol.
+  symbols = d3.nest()
+      .key(function(d) { return d.symbol; })
+      .entries(stocks);
+  // 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; });
+  // 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("g")
+      .data(symbols)
+    .enter().append("g")
+      .attr("class", "symbol");
+  setTimeout(lines, duration);
+});
+function lines() {
+  var g = svg.selectAll(".symbol")
+      .attr("transform", function(d, i) { return "translate(0," + i * h / 4 + ")"; });
+  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.maxPrice]);
+      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.date) + "," + y(d.price) + ")"; });
+    });
+  }
+  var k = 1, n = symbols[0].values.length;
+  d3.timer(function() {
+    draw(k);
+    if ((k += 2) >= n - 1) {
+      draw(n - 1);
+      setTimeout(horizons, 500);
+      return true;
+    }
+  });
+}
+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)");
+  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);
+}
+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);
+}
+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) + ")"; });
+  setTimeout(streamgraph, duration + delay);
+}
+function streamgraph() {
+  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")
+      .offset("wiggle");
+  stack(symbols);
+  line
+      .y(function(d) { return y(d.price0); });
+  var t = svg.selectAll(".symbol").transition()
+      .duration(duration);
+  t.select("path.area")
+      .attr("d", function(d) { return area(d.values); });
+  t.select("path.line")
+      .style("stroke-opacity", 1e-6)
+      .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) + ")"; });
+  setTimeout(overlappingArea, duration + delay);
+}
+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); });
+  t.select("text")
+      .attr("dy", ".31em")
+      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; });
+  svg.append("line")
+      .attr("class", "line")
+      .attr("x1", 0)
+      .attr("x2", w - 60)
+      .attr("y1", h)
+      .attr("y2", h)
+      .style("stroke-opacity", 1e-6)
+    .transition()
+      .duration(duration)
+      .style("stroke-opacity", 1);
+  setTimeout(groupedBar, duration + delay);
+}
+function groupedBar() {
+  x = d3.scale.ordinal()
+      .domain(symbols[0].values.map(function(d) { return d.date; }))
+      .rangeBands([0, w - 60], .1);
+  var x1 = d3.scale.ordinal()
+      .domain(symbols.map(function(d) { return d.key; }))
+      .rangeBands([0, x.rangeBand()]);
+  var g = svg.selectAll(".symbol");
+  var t = g.transition()
+      .duration(duration);
+  t.select(".line")
+      .style("stroke-opacity", 1e-6)
+      .remove();
+  t.select(".area")
+      .style("fill-opacity", 1e-6)
+      .remove();
+  g.each(function(p, j) {
+    d3.select(this).selectAll("rect")
+        .data(function(d) { return d.values; })
+      .enter().append("rect")
+        .attr("x", function(d) { return x(d.date) + x1(p.key); })
+        .attr("y", function(d) { return y(d.price); })
+        .attr("width", x1.rangeBand())
+        .attr("height", function(d) { return h - y(d.price); })
+        .style("fill", color(p.key))
+        .style("fill-opacity", 1e-6)
+      .transition()
+        .duration(duration)
+        .style("fill-opacity", 1);
+  });
+  setTimeout(stackedBar, duration + delay);
+}
+function stackedBar() {
+  x.rangeRoundBands([0, w - 60], .1);
+  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");
+  var g = svg.selectAll(".symbol");
+  stack(symbols);
+  y
+      .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))])
+      .range([h, 0]);
+  var t = g.transition()
+      .duration(duration / 2);
+  t.select("text")
+      .delay(symbols[0].values.length * 10)
+      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
+  t.selectAll("rect")
+      .delay(function(d, i) { return i * 10; })
+      .attr("y", function(d) { return y(d.price0 + d.price); })
+      .attr("height", function(d) { return h - y(d.price); })
+      .each("end", function() {
+        d3.select(this)
+            .style("stroke", "#fff")
+            .style("stroke-opacity", 1e-6)
+          .transition()
+            .duration(duration / 2)
+            .attr("x", function(d) { return x(d.date); })
+            .attr("width", x.rangeBand())
+            .style("stroke-opacity", 1);
+      });
+  setTimeout(transposeBar, duration + symbols[0].values.length * 10 + delay);
+}
+function transposeBar() {
+  x
+      .domain(symbols.map(function(d) { return d.key; }))
+      .rangeRoundBands([0, w], .2);
+  y
+      .domain([0, d3.max(symbols.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]);
+  var stack = d3.layout.stack()
+      .x(function(d, i) { return i; })
+      .y(function(d) { return d.price; })
+      .out(function(d, y0, y) { d.price0 = y0; });
+  stack(d3.zip.apply(null, symbols.map(function(d) { return d.values; }))); // transpose!
+  var g = svg.selectAll(".symbol");
+  var t = g.transition()
+      .duration(duration / 2);
+  t.selectAll("rect")
+      .delay(function(d, i) { return i * 10; })
+      .attr("y", function(d) { return y(d.price0 + d.price) - 1; })
+      .attr("height", function(d) { return h - y(d.price) + 1; })
+      .attr("x", function(d) { return x(d.symbol); })
+      .attr("width", x.rangeBand())
+      .style("stroke-opacity", 1e-6);
+  t.select("text")
+      .attr("x", 0)
+      .attr("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + h + ")"; })
+      .attr("dy", "1.31em")
+      .each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); });
+  svg.select("line").transition()
+      .duration(duration)
+      .attr("x2", w);
+  setTimeout(donut,  duration / 2 + symbols[0].values.length * 10 + delay);
+}
+function donut() {
+  var g = svg.selectAll(".symbol");
+  g.selectAll("rect").remove();
+  var pie = d3.layout.pie()
+      .value(function(d) { return d.sumPrice; });
+  var arc = d3.svg.arc();
+  g.append("path")
+      .style("fill", function(d) { return color(d.key); })
+      .data(function() { return pie(symbols); })
+    .transition()
+      .duration(duration)
+      .tween("arc", arcTween);
+  g.select("text").transition()
+      .duration(duration)
+      .attr("dy", ".31em");
+  svg.select("line").transition()
+      .duration(duration)
+      .attr("y1", 2 * h)
+      .attr("y2", 2 * h)
+      .remove();
+  function arcTween(d) {
+    var path = d3.select(this),
+        text = d3.select(this.parentNode.appendChild(this.previousSibling)),
+        x0 = x(d.data.key),
+        y0 = h - y(d.data.sumPrice);
+    return function(t) {
+      var r = h / 2 / Math.min(1, t + 1e-3),
+          a = Math.cos(t * Math.PI / 2),
+          xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2),
+          yy = ((a) * h + (1 - a) * h / 2),
+          f = {
+            innerRadius: r - x.rangeBand() / (2 - a),
+            outerRadius: r,
+            startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
+            endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
+          };
+      path.attr("transform", "translate(" + xx + "," + yy + ")");
+      path.attr("d", arc(f));
+      text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
+    };
+  }
+  setTimeout(donutExplode, duration + delay);
+}
+/*
+function donutTransition() {
+  var r0 = h / 2 - x.rangeBand() / 2,
+      r1 = h / 2,
+      pie1 = d3.layout.pie().value(function(d) { return d.sumPrice; })(symbols),
+      pie2 = d3.layout.pie().value(function(d) { return d.maxPrice; })(symbols),
+      arc = d3.svg.arc();
+  svg.selectAll(".symbol path")
+      .map(function(d, i) {
+        d = pie1[i];
+        d.innerRadius = r0;
+        d.outerRadius = r1;
+        d.next = pie2[i];
+        return d;
+      })
+      .each(transitionSplit);
+  function transitionSplit(d, i) {
+    d3.select(this).transition()
+        .duration(duration / 2)
+        .tween("arc", tweenArc({
+          innerRadius: i & 1 ? r0 : (r0 + r1) / 2,
+          outerRadius: i & 1 ? (r0 + r1) / 2 : r1
+        }))
+        .each("end", transitionRotate);
+  }
+  function transitionRotate(d, i) {
+    var a0 = d.next.startAngle + d.next.endAngle,
+        a1 = d.startAngle - d.endAngle;
+    d3.select(this).transition()
+        .duration(duration / 2)
+        .tween("arc", tweenArc({
+          startAngle: (a0 + a1) / 2,
+          endAngle: (a0 - a1) / 2
+        }))
+        .each("end", transitionResize);
+  }
+  function transitionResize(d, i) {
+    d3.select(this).transition()
+        .duration(duration / 2)
+        .tween("arc", tweenArc({
+          startAngle: d.next.startAngle,
+          endAngle: d.next.endAngle
+        }))
+        .each("end", transitionUnite);
+  }
+  function transitionUnite(d, i) {
+    d3.select(this).transition()
+        .duration(duration / 2)
+        .tween("arc", tweenArc({
+          innerRadius: r0,
+          outerRadius: r1
+        }));
+  }
+  function tweenArc(b) {
+    return function(a) {
+      var path = d3.select(this),
+          text = d3.select(this.nextSibling),
+          i = d3.interpolate(a, b);
+      for (var key in b) a[key] = b[key]; // update data
+      return function(t) {
+        var a = i(t);
+        path.attr("d", arc(a));
+        text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
+      };
+    }
+  }
+  setTimeout(donutExplode, 2 * duration + delay);
+}
+*/
+function donutExplode() {
+  var r0a = h / 2 - x.rangeBand() / 2,
+      r1a = h / 2,
+      r0b = 2 * h - x.rangeBand() / 2,
+      r1b = 2 * h,
+      arc = d3.svg.arc();
+  svg.selectAll(".symbol path")
+      .each(transitionExplode);
+  function transitionExplode(d, i) {
+    d.innerRadius = r0a;
+    d.outerRadius = r1a;
+    d3.select(this).transition()
+        .duration(duration / 2)
+        .tween("arc", tweenArc({
+          innerRadius: r0b,
+          outerRadius: r1b
+        }));
+  }
+  function tweenArc(b) {
+    return function(a) {
+      var path = d3.select(this),
+          text = d3.select(this.nextSibling),
+          i = d3.interpolate(a, b);
+      for (var key in b) a[key] = b[key]; // update data
+      return function(t) {
+        var a = i(t);
+        path.attr("d", arc(a));
+        text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
+      };
+    }
+  }
+}
+    </script>
+  </body>
+</html>