← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/d3/examples/donut/donut.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/donut/donut.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <title>Donut 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 width = 400,
18
 
    height = 400,
19
 
    outerRadius = Math.min(width, height) / 2,
20
 
    innerRadius = outerRadius * .6,
21
 
    n = 10,
22
 
    q = 0,
23
 
    data0 = d3.range(n).map(Math.random),
24
 
    data1 = d3.range(n).map(Math.random),
25
 
    data,
26
 
    color = d3.scale.category20(),
27
 
    arc = d3.svg.arc(),
28
 
    donut = d3.layout.pie().sort(null);
29
 
 
30
 
var vis = d3.select("body")
31
 
  .append("svg")
32
 
    .attr("width", width)
33
 
    .attr("height", height);
34
 
 
35
 
vis.selectAll("g.arc")
36
 
    .data(arcs(data0, data1))
37
 
  .enter().append("g")
38
 
    .attr("class", "arc")
39
 
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
40
 
  .append("path")
41
 
    .attr("fill", function(d, i) { return color(i); })
42
 
    .attr("d", arc);
43
 
 
44
 
window.addEventListener("keypress", swap, false);
45
 
 
46
 
function arcs(data0, data1) {
47
 
  var arcs0 = donut(data0),
48
 
      arcs1 = donut(data1),
49
 
      i = -1,
50
 
      arc;
51
 
  while (++i < n) {
52
 
    arc = arcs0[i];
53
 
    arc.innerRadius = innerRadius;
54
 
    arc.outerRadius = outerRadius;
55
 
    arc.next = arcs1[i];
56
 
  }
57
 
  return arcs0;
58
 
}
59
 
 
60
 
function swap() {
61
 
  d3.selectAll("g.arc > path")
62
 
      .data(++q & 1 ? arcs(data0, data1) : arcs(data1, data0))
63
 
      .each(transitionSplit);
64
 
}
65
 
 
66
 
// 1. Wedges split into two rings.
67
 
function transitionSplit(d, i) {
68
 
  d3.select(this)
69
 
    .transition().duration(1000)
70
 
      .attrTween("d", tweenArc({
71
 
        innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,
72
 
        outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius
73
 
      }))
74
 
      .each("end", transitionRotate);
75
 
}
76
 
 
77
 
// 2. Wedges translate to be centered on their final position.
78
 
function transitionRotate(d, i) {
79
 
  var a0 = d.next.startAngle + d.next.endAngle,
80
 
      a1 = d.startAngle - d.endAngle;
81
 
  d3.select(this)
82
 
    .transition().duration(1000)
83
 
      .attrTween("d", tweenArc({
84
 
        startAngle: (a0 + a1) / 2,
85
 
        endAngle: (a0 - a1) / 2
86
 
      }))
87
 
      .each("end", transitionResize);
88
 
}
89
 
 
90
 
// 3. Wedges then update their values, changing size.
91
 
function transitionResize(d, i) {
92
 
  d3.select(this)
93
 
    .transition().duration(1000)
94
 
      .attrTween("d", tweenArc({
95
 
        startAngle: d.next.startAngle,
96
 
        endAngle: d.next.endAngle
97
 
      }))
98
 
      .each("end", transitionUnite);
99
 
}
100
 
 
101
 
// 4. Wedges reunite into a single ring.
102
 
function transitionUnite(d, i) {
103
 
  d3.select(this)
104
 
    .transition().duration(1000)
105
 
      .attrTween("d", tweenArc({
106
 
        innerRadius: innerRadius,
107
 
        outerRadius: outerRadius
108
 
      }));
109
 
}
110
 
 
111
 
function tweenArc(b) {
112
 
  return function(a) {
113
 
    var i = d3.interpolate(a, b);
114
 
    for (var key in b) a[key] = b[key]; // update data
115
 
    return function(t) {
116
 
      return arc(i(t));
117
 
    };
118
 
  };
119
 
}
120
 
 
121
 
    </script>
122
 
  </body>
123
 
</html>