← Back to branch summary

~ev/errors/openid_auth_failure

« back to all changes in this revision

Viewing changes to static/js/d3/examples/pie/pie-transition.html

  • Committer: Evan Dandrea
  • Date: 2012-03-31 17:07:36 UTC
  • Revision ID: evan.dandrea@canonical.com-20120331170736-rypmkpbayaeg1wji
Move to Django for the stats pages. Use d3.js instead of YUI3's charts.

Show diffs side-by-side

added added

removed removed

Lines of Context:
static/js/d3/examples/pie/pie-transition.html
 
1
<!DOCTYPE html>
 
2
<html>
 
3
  <head>
 
4
    <title>Pie Chart</title>
 
5
    <script type="text/javascript" src="../../d3.v2.js"></script>
 
6
    <style type="text/css">
 
7
 
 
8
body {
 
9
  font: 10px sans-serif;
 
10
}
 
11
 
 
12
    </style>
 
13
  </head>
 
14
  <body>
 
15
    <script type="text/javascript">
 
16
 
 
17
var w = 400,
 
18
    h = 400,
 
19
    r = Math.min(w, h) / 2,
 
20
    data = d3.range(10).map(Math.random).sort(d3.descending),
 
21
    color = d3.scale.category20(),
 
22
    arc = d3.svg.arc().outerRadius(r),
 
23
    donut = d3.layout.pie();
 
24
 
 
25
var vis = d3.select("body").append("svg")
 
26
    .data([data])
 
27
    .attr("width", w)
 
28
    .attr("height", h);
 
29
 
 
30
var arcs = vis.selectAll("g.arc")
 
31
    .data(donut)
 
32
  .enter().append("g")
 
33
    .attr("class", "arc")
 
34
    .attr("transform", "translate(" + r + "," + r + ")");
 
35
 
 
36
var paths = arcs.append("path")
 
37
    .attr("fill", function(d, i) { return color(i); });
 
38
 
 
39
paths.transition()
 
40
    .ease("bounce")
 
41
    .duration(2000)
 
42
    .attrTween("d", tweenPie);
 
43
 
 
44
paths.transition()
 
45
    .ease("elastic")
 
46
    .delay(function(d, i) { return 2000 + i * 50; })
 
47
    .duration(750)
 
48
    .attrTween("d", tweenDonut);
 
49
 
 
50
function tweenPie(b) {
 
51
  b.innerRadius = 0;
 
52
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
 
53
  return function(t) {
 
54
    return arc(i(t));
 
55
  };
 
56
}
 
57
 
 
58
function tweenDonut(b) {
 
59
  b.innerRadius = r * .6;
 
60
  var i = d3.interpolate({innerRadius: 0}, b);
 
61
  return function(t) {
 
62
    return arc(i(t));
 
63
  };
 
64
}
 
65
 
 
66
    </script>
 
67
  </body>
 
68
</html>