← Back to branch summary

~bcsaller/juju-gui/update-reductions

« back to all changes in this revision

Viewing changes to lib/d3/examples/showreel/showreel.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/showreel/showreel.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
5
 
    <style type="text/css">
6
 
 
7
 
svg {
8
 
  border: solid 1px #000;
9
 
  display: block;
10
 
  margin: auto;
11
 
  font-family: "Helvetica Neue";
12
 
}
13
 
 
14
 
.line {
15
 
  fill: none;
16
 
  stroke: #000;
17
 
  stroke-width: 2px;
18
 
}
19
 
 
20
 
    </style>
21
 
  </head>
22
 
  <body>
23
 
    <script type="text/javascript">
24
 
 
25
 
var margin = {top: 120, right: 60, bottom: 60, left: 60},
26
 
    width = 1280 - margin.right - margin.left,
27
 
    height = 720 - margin.top - margin.bottom;
28
 
 
29
 
var x = d3.time.scale()
30
 
    .range([0, width - 60]);
31
 
 
32
 
var y = d3.scale.linear()
33
 
    .range([height / 4 - 20, 0]);
34
 
 
35
 
var duration = 1500,
36
 
    delay = 500;
37
 
 
38
 
var color = d3.scale.category10();
39
 
 
40
 
var svg = d3.select("body").append("svg")
41
 
    .attr("width", width + margin.right + margin.left)
42
 
    .attr("height", height + margin.top + margin.bottom)
43
 
  .append("g")
44
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
45
 
 
46
 
var stocks,
47
 
    symbols;
48
 
 
49
 
// A line generator, for the dark stroke.
50
 
var line = d3.svg.line()
51
 
    .interpolate("basis")
52
 
    .x(function(d) { return x(d.date); })
53
 
    .y(function(d) { return y(d.price); });
54
 
 
55
 
// A line generator, for the dark stroke.
56
 
var axis = d3.svg.line()
57
 
    .interpolate("basis")
58
 
    .x(function(d) { return x(d.date); })
59
 
    .y(height);
60
 
 
61
 
// A area generator, for the dark stroke.
62
 
var area = d3.svg.area()
63
 
    .interpolate("basis")
64
 
    .x(function(d) { return x(d.date); })
65
 
    .y0(height / 4 - 20)
66
 
    .y1(function(d) { return y(d.price); });
67
 
 
68
 
d3.csv("../data/stocks.csv", function(data) {
69
 
  var parse = d3.time.format("%b %Y").parse,
70
 
      filter = {AAPL: 1, AMZN: 1, MSFT: 1, IBM: 1};
71
 
 
72
 
  stocks = data.filter(function(d) { return d.symbol in filter; });
73
 
 
74
 
  // Nest stock values by symbol.
75
 
  symbols = d3.nest()
76
 
      .key(function(d) { return d.symbol; })
77
 
      .entries(stocks);
78
 
 
79
 
  // Parse dates and numbers. We assume values are sorted by date.
80
 
  // Also compute the maximum price per symbol, needed for the y-domain.
81
 
  symbols.forEach(function(s) {
82
 
    s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
83
 
    s.maxPrice = d3.max(s.values, function(d) { return d.price; });
84
 
    s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
85
 
  });
86
 
 
87
 
  // Sort by maximum price, descending.
88
 
  symbols.sort(function(a, b) { return b.maxPrice - a.maxPrice; });
89
 
 
90
 
  // Compute the minimum and maximum date across symbols.
91
 
  x.domain([
92
 
    d3.min(symbols, function(d) { return d.values[0].date; }),
93
 
    d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; })
94
 
  ]);
95
 
 
96
 
  var g = svg.selectAll("g")
97
 
      .data(symbols)
98
 
    .enter().append("g")
99
 
      .attr("class", "symbol");
100
 
 
101
 
  setTimeout(lines, duration);
102
 
});
103
 
 
104
 
function lines() {
105
 
 
106
 
  var g = svg.selectAll(".symbol")
107
 
      .attr("transform", function(d, i) { return "translate(0," + i * height / 4 + ")"; });
108
 
 
109
 
  g.each(function(d) {
110
 
    var e = d3.select(this);
111
 
 
112
 
    e.append("path")
113
 
        .attr("class", "line");
114
 
 
115
 
    e.append("circle")
116
 
        .attr("r", 5)
117
 
        .style("fill", function(d) { return color(d.key); })
118
 
        .style("stroke", "#000")
119
 
        .style("stroke-width", "2px");
120
 
 
121
 
    e.append("text")
122
 
        .attr("x", 12)
123
 
        .attr("dy", ".31em")
124
 
        .text(d.key);
125
 
  });
126
 
 
127
 
  function draw(k) {
128
 
    g.each(function(d) {
129
 
      var e = d3.select(this);
130
 
      y.domain([0, d.maxPrice]);
131
 
 
132
 
      e.select("path")
133
 
          .attr("d", function(d) { return line(d.values.slice(0, k + 1)); });
134
 
 
135
 
      e.selectAll("circle, text")
136
 
          .data(function(d) { return [d.values[k], d.values[k]]; })
137
 
          .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ")"; });
138
 
    });
139
 
  }
140
 
 
141
 
  var k = 1, n = symbols[0].values.length;
142
 
  d3.timer(function() {
143
 
    draw(k);
144
 
    if ((k += 2) >= n - 1) {
145
 
      draw(n - 1);
146
 
      setTimeout(horizons, 500);
147
 
      return true;
148
 
    }
149
 
  });
150
 
}
151
 
 
152
 
function horizons() {
153
 
  svg.insert("defs", ".symbol")
154
 
    .append("clipPath")
155
 
      .attr("id", "clip")
156
 
    .append("rect")
157
 
      .attr("width", width)
158
 
      .attr("height", height / 4 - 20);
159
 
 
160
 
  var color = d3.scale.ordinal()
161
 
      .range(["#c6dbef", "#9ecae1", "#6baed6"]);
162
 
 
163
 
  var g = svg.selectAll(".symbol")
164
 
      .attr("clip-path", "url(#clip)");
165
 
 
166
 
  g.select("circle").transition()
167
 
      .duration(duration)
168
 
      .attr("transform", function(d) { return "translate(" + (width - 60) + "," + (-height / 4) + ")"; })
169
 
      .remove();
170
 
 
171
 
  g.select("text").transition()
172
 
      .duration(duration)
173
 
      .attr("transform", function(d) { return "translate(" + (width - 60) + "," + (height / 4 - 20) + ")"; })
174
 
      .attr("dy", "0em");
175
 
 
176
 
  g.each(function(d) {
177
 
    y.domain([0, d.maxPrice]);
178
 
 
179
 
    d3.select(this).selectAll(".area")
180
 
        .data(d3.range(3))
181
 
      .enter().insert("path", ".line")
182
 
        .attr("class", "area")
183
 
        .attr("transform", function(d) { return "translate(0," + (d * (height / 4 - 20)) + ")"; })
184
 
        .attr("d", area(d.values))
185
 
        .style("fill", function(d, i) { return color(i); })
186
 
        .style("fill-opacity", 1e-6);
187
 
 
188
 
    y.domain([0, d.maxPrice / 3]);
189
 
 
190
 
    d3.select(this).selectAll(".line").transition()
191
 
        .duration(duration)
192
 
        .attr("d", line(d.values))
193
 
        .style("stroke-opacity", 1e-6);
194
 
 
195
 
    d3.select(this).selectAll(".area").transition()
196
 
        .duration(duration)
197
 
        .style("fill-opacity", 1)
198
 
        .attr("d", area(d.values))
199
 
        .each("end", function() { d3.select(this).style("fill-opacity", null); });
200
 
  });
201
 
 
202
 
  setTimeout(areas, duration + delay);
203
 
}
204
 
 
205
 
function areas() {
206
 
  var g = svg.selectAll(".symbol");
207
 
 
208
 
  axis
209
 
      .y(height / 4 - 21);
210
 
 
211
 
  g.select(".line")
212
 
      .attr("d", function(d) { return axis(d.values); });
213
 
 
214
 
  g.each(function(d) {
215
 
    y.domain([0, d.maxPrice]);
216
 
 
217
 
    d3.select(this).select(".line").transition()
218
 
        .duration(duration)
219
 
        .style("stroke-opacity", 1)
220
 
        .each("end", function() { d3.select(this).style("stroke-opacity", null); });
221
 
 
222
 
    d3.select(this).selectAll(".area")
223
 
        .filter(function(d, i) { return i; })
224
 
      .transition()
225
 
        .duration(duration)
226
 
        .style("fill-opacity", 1e-6)
227
 
        .attr("d", area(d.values))
228
 
        .remove();
229
 
 
230
 
    d3.select(this).selectAll(".area")
231
 
        .filter(function(d, i) { return !i; })
232
 
      .transition()
233
 
        .duration(duration)
234
 
        .style("fill", color(d.key))
235
 
        .attr("d", area(d.values));
236
 
  });
237
 
 
238
 
  svg.select("defs").transition()
239
 
      .duration(duration)
240
 
      .remove();
241
 
 
242
 
  g.transition()
243
 
      .duration(duration)
244
 
      .each("end", function() { d3.select(this).attr("clip-path", null); });
245
 
 
246
 
  setTimeout(stackedArea, duration + delay);
247
 
}
248
 
 
249
 
function stackedArea() {
250
 
  var stack = d3.layout.stack()
251
 
      .values(function(d) { return d.values; })
252
 
      .x(function(d) { return d.date; })
253
 
      .y(function(d) { return d.price; })
254
 
      .out(function(d, y0, y) { d.price0 = y0; })
255
 
      .order("reverse");
256
 
 
257
 
  stack(symbols);
258
 
 
259
 
  y
260
 
      .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))])
261
 
      .range([height, 0]);
262
 
 
263
 
  line
264
 
      .y(function(d) { return y(d.price0); });
265
 
 
266
 
  area
267
 
      .y0(function(d) { return y(d.price0); })
268
 
      .y1(function(d) { return y(d.price0 + d.price); });
269
 
 
270
 
  var t = svg.selectAll(".symbol").transition()
271
 
      .duration(duration)
272
 
      .attr("transform", "translate(0,0)")
273
 
      .each("end", function() { d3.select(this).attr("transform", null); });
274
 
 
275
 
  t.select("path.area")
276
 
      .attr("d", function(d) { return area(d.values); });
277
 
 
278
 
  t.select("path.line")
279
 
      .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; })
280
 
      .attr("d", function(d) { return line(d.values); });
281
 
 
282
 
  t.select("text")
283
 
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
284
 
 
285
 
  setTimeout(streamgraph, duration + delay);
286
 
}
287
 
 
288
 
function streamgraph() {
289
 
  var stack = d3.layout.stack()
290
 
      .values(function(d) { return d.values; })
291
 
      .x(function(d) { return d.date; })
292
 
      .y(function(d) { return d.price; })
293
 
      .out(function(d, y0, y) { d.price0 = y0; })
294
 
      .order("reverse")
295
 
      .offset("wiggle");
296
 
 
297
 
  stack(symbols);
298
 
 
299
 
  line
300
 
      .y(function(d) { return y(d.price0); });
301
 
 
302
 
  var t = svg.selectAll(".symbol").transition()
303
 
      .duration(duration);
304
 
 
305
 
  t.select("path.area")
306
 
      .attr("d", function(d) { return area(d.values); });
307
 
 
308
 
  t.select("path.line")
309
 
      .style("stroke-opacity", 1e-6)
310
 
      .attr("d", function(d) { return line(d.values); });
311
 
 
312
 
  t.select("text")
313
 
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
314
 
 
315
 
  setTimeout(overlappingArea, duration + delay);
316
 
}
317
 
 
318
 
function overlappingArea() {
319
 
  var g = svg.selectAll(".symbol");
320
 
 
321
 
  line
322
 
      .y(function(d) { return y(d.price0 + d.price); });
323
 
 
324
 
  g.select(".line")
325
 
      .attr("d", function(d) { return line(d.values); });
326
 
 
327
 
  y
328
 
      .domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
329
 
      .range([height, 0]);
330
 
 
331
 
  area
332
 
      .y0(height)
333
 
      .y1(function(d) { return y(d.price); });
334
 
 
335
 
  line
336
 
      .y(function(d) { return y(d.price); });
337
 
 
338
 
  var t = g.transition()
339
 
      .duration(duration);
340
 
 
341
 
  t.select(".line")
342
 
      .style("stroke-opacity", 1)
343
 
      .attr("d", function(d) { return line(d.values); });
344
 
 
345
 
  t.select(".area")
346
 
      .style("fill-opacity", .5)
347
 
      .attr("d", function(d) { return area(d.values); });
348
 
 
349
 
  t.select("text")
350
 
      .attr("dy", ".31em")
351
 
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price) + ")"; });
352
 
 
353
 
  svg.append("line")
354
 
      .attr("class", "line")
355
 
      .attr("x1", 0)
356
 
      .attr("x2", width - 60)
357
 
      .attr("y1", height)
358
 
      .attr("y2", height)
359
 
      .style("stroke-opacity", 1e-6)
360
 
    .transition()
361
 
      .duration(duration)
362
 
      .style("stroke-opacity", 1);
363
 
 
364
 
  setTimeout(groupedBar, duration + delay);
365
 
}
366
 
 
367
 
function groupedBar() {
368
 
  x = d3.scale.ordinal()
369
 
      .domain(symbols[0].values.map(function(d) { return d.date; }))
370
 
      .rangeBands([0, width - 60], .1);
371
 
 
372
 
  var x1 = d3.scale.ordinal()
373
 
      .domain(symbols.map(function(d) { return d.key; }))
374
 
      .rangeBands([0, x.rangeBand()]);
375
 
 
376
 
  var g = svg.selectAll(".symbol");
377
 
 
378
 
  var t = g.transition()
379
 
      .duration(duration);
380
 
 
381
 
  t.select(".line")
382
 
      .style("stroke-opacity", 1e-6)
383
 
      .remove();
384
 
 
385
 
  t.select(".area")
386
 
      .style("fill-opacity", 1e-6)
387
 
      .remove();
388
 
 
389
 
  g.each(function(p, j) {
390
 
    d3.select(this).selectAll("rect")
391
 
        .data(function(d) { return d.values; })
392
 
      .enter().append("rect")
393
 
        .attr("x", function(d) { return x(d.date) + x1(p.key); })
394
 
        .attr("y", function(d) { return y(d.price); })
395
 
        .attr("width", x1.rangeBand())
396
 
        .attr("height", function(d) { return height - y(d.price); })
397
 
        .style("fill", color(p.key))
398
 
        .style("fill-opacity", 1e-6)
399
 
      .transition()
400
 
        .duration(duration)
401
 
        .style("fill-opacity", 1);
402
 
  });
403
 
 
404
 
  setTimeout(stackedBar, duration + delay);
405
 
}
406
 
 
407
 
function stackedBar() {
408
 
  x.rangeRoundBands([0, width - 60], .1);
409
 
 
410
 
  var stack = d3.layout.stack()
411
 
      .values(function(d) { return d.values; })
412
 
      .x(function(d) { return d.date; })
413
 
      .y(function(d) { return d.price; })
414
 
      .out(function(d, y0, y) { d.price0 = y0; })
415
 
      .order("reverse");
416
 
 
417
 
  var g = svg.selectAll(".symbol");
418
 
 
419
 
  stack(symbols);
420
 
 
421
 
  y
422
 
      .domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))])
423
 
      .range([height, 0]);
424
 
 
425
 
  var t = g.transition()
426
 
      .duration(duration / 2);
427
 
 
428
 
  t.select("text")
429
 
      .delay(symbols[0].values.length * 10)
430
 
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
431
 
 
432
 
  t.selectAll("rect")
433
 
      .delay(function(d, i) { return i * 10; })
434
 
      .attr("y", function(d) { return y(d.price0 + d.price); })
435
 
      .attr("height", function(d) { return height - y(d.price); })
436
 
      .each("end", function() {
437
 
        d3.select(this)
438
 
            .style("stroke", "#fff")
439
 
            .style("stroke-opacity", 1e-6)
440
 
          .transition()
441
 
            .duration(duration / 2)
442
 
            .attr("x", function(d) { return x(d.date); })
443
 
            .attr("width", x.rangeBand())
444
 
            .style("stroke-opacity", 1);
445
 
      });
446
 
 
447
 
  setTimeout(transposeBar, duration + symbols[0].values.length * 10 + delay);
448
 
}
449
 
 
450
 
function transposeBar() {
451
 
  x
452
 
      .domain(symbols.map(function(d) { return d.key; }))
453
 
      .rangeRoundBands([0, width], .2);
454
 
 
455
 
  y
456
 
      .domain([0, d3.max(symbols.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]);
457
 
 
458
 
  var stack = d3.layout.stack()
459
 
      .x(function(d, i) { return i; })
460
 
      .y(function(d) { return d.price; })
461
 
      .out(function(d, y0, y) { d.price0 = y0; });
462
 
 
463
 
  stack(d3.zip.apply(null, symbols.map(function(d) { return d.values; }))); // transpose!
464
 
 
465
 
  var g = svg.selectAll(".symbol");
466
 
 
467
 
  var t = g.transition()
468
 
      .duration(duration / 2);
469
 
 
470
 
  t.selectAll("rect")
471
 
      .delay(function(d, i) { return i * 10; })
472
 
      .attr("y", function(d) { return y(d.price0 + d.price) - 1; })
473
 
      .attr("height", function(d) { return height - y(d.price) + 1; })
474
 
      .attr("x", function(d) { return x(d.symbol); })
475
 
      .attr("width", x.rangeBand())
476
 
      .style("stroke-opacity", 1e-6);
477
 
 
478
 
  t.select("text")
479
 
      .attr("x", 0)
480
 
      .attr("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + height + ")"; })
481
 
      .attr("dy", "1.31em")
482
 
      .each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); });
483
 
 
484
 
  svg.select("line").transition()
485
 
      .duration(duration)
486
 
      .attr("x2", width);
487
 
 
488
 
  setTimeout(donut,  duration / 2 + symbols[0].values.length * 10 + delay);
489
 
}
490
 
 
491
 
function donut() {
492
 
  var g = svg.selectAll(".symbol");
493
 
 
494
 
  g.selectAll("rect").remove();
495
 
 
496
 
  var pie = d3.layout.pie()
497
 
      .value(function(d) { return d.sumPrice; });
498
 
 
499
 
  var arc = d3.svg.arc();
500
 
 
501
 
  g.append("path")
502
 
      .style("fill", function(d) { return color(d.key); })
503
 
      .data(function() { return pie(symbols); })
504
 
    .transition()
505
 
      .duration(duration)
506
 
      .tween("arc", arcTween);
507
 
 
508
 
  g.select("text").transition()
509
 
      .duration(duration)
510
 
      .attr("dy", ".31em");
511
 
 
512
 
  svg.select("line").transition()
513
 
      .duration(duration)
514
 
      .attr("y1", 2 * height)
515
 
      .attr("y2", 2 * height)
516
 
      .remove();
517
 
 
518
 
  function arcTween(d) {
519
 
    var path = d3.select(this),
520
 
        text = d3.select(this.parentNode.appendChild(this.previousSibling)),
521
 
        x0 = x(d.data.key),
522
 
        y0 = height - y(d.data.sumPrice);
523
 
 
524
 
    return function(t) {
525
 
      var r = height / 2 / Math.min(1, t + 1e-3),
526
 
          a = Math.cos(t * Math.PI / 2),
527
 
          xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (width + height) / 2),
528
 
          yy = ((a) * height + (1 - a) * height / 2),
529
 
          f = {
530
 
            innerRadius: r - x.rangeBand() / (2 - a),
531
 
            outerRadius: r,
532
 
            startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
533
 
            endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
534
 
          };
535
 
 
536
 
      path.attr("transform", "translate(" + xx + "," + yy + ")");
537
 
      path.attr("d", arc(f));
538
 
      text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
539
 
    };
540
 
  }
541
 
 
542
 
  setTimeout(donutExplode, duration + delay);
543
 
}
544
 
 
545
 
/*
546
 
function donutTransition() {
547
 
  var r0 = height / 2 - x.rangeBand() / 2,
548
 
      r1 = height / 2,
549
 
      pie1 = d3.layout.pie().value(function(d) { return d.sumPrice; })(symbols),
550
 
      pie2 = d3.layout.pie().value(function(d) { return d.maxPrice; })(symbols),
551
 
      arc = d3.svg.arc();
552
 
 
553
 
  svg.selectAll(".symbol path")
554
 
      .datum(function(d, i) {
555
 
        d = pie1[i];
556
 
        d.innerRadius = r0;
557
 
        d.outerRadius = r1;
558
 
        d.next = pie2[i];
559
 
        return d;
560
 
      })
561
 
      .each(transitionSplit);
562
 
 
563
 
  function transitionSplit(d, i) {
564
 
    d3.select(this).transition()
565
 
        .duration(duration / 2)
566
 
        .tween("arc", tweenArc({
567
 
          innerRadius: i & 1 ? r0 : (r0 + r1) / 2,
568
 
          outerRadius: i & 1 ? (r0 + r1) / 2 : r1
569
 
        }))
570
 
        .each("end", transitionRotate);
571
 
  }
572
 
 
573
 
  function transitionRotate(d, i) {
574
 
    var a0 = d.next.startAngle + d.next.endAngle,
575
 
        a1 = d.startAngle - d.endAngle;
576
 
    d3.select(this).transition()
577
 
        .duration(duration / 2)
578
 
        .tween("arc", tweenArc({
579
 
          startAngle: (a0 + a1) / 2,
580
 
          endAngle: (a0 - a1) / 2
581
 
        }))
582
 
        .each("end", transitionResize);
583
 
  }
584
 
 
585
 
  function transitionResize(d, i) {
586
 
    d3.select(this).transition()
587
 
        .duration(duration / 2)
588
 
        .tween("arc", tweenArc({
589
 
          startAngle: d.next.startAngle,
590
 
          endAngle: d.next.endAngle
591
 
        }))
592
 
        .each("end", transitionUnite);
593
 
  }
594
 
 
595
 
  function transitionUnite(d, i) {
596
 
    d3.select(this).transition()
597
 
        .duration(duration / 2)
598
 
        .tween("arc", tweenArc({
599
 
          innerRadius: r0,
600
 
          outerRadius: r1
601
 
        }));
602
 
  }
603
 
 
604
 
  function tweenArc(b) {
605
 
    return function(a) {
606
 
      var path = d3.select(this),
607
 
          text = d3.select(this.nextSibling),
608
 
          i = d3.interpolate(a, b);
609
 
      for (var key in b) a[key] = b[key]; // update data
610
 
      return function(t) {
611
 
        var a = i(t);
612
 
        path.attr("d", arc(a));
613
 
        text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + width / 2 + "," + height / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
614
 
      };
615
 
    }
616
 
  }
617
 
 
618
 
  setTimeout(donutExplode, 2 * duration + delay);
619
 
}
620
 
*/
621
 
 
622
 
function donutExplode() {
623
 
  var r0a = height / 2 - x.rangeBand() / 2,
624
 
      r1a = height / 2,
625
 
      r0b = 2 * height - x.rangeBand() / 2,
626
 
      r1b = 2 * height,
627
 
      arc = d3.svg.arc();
628
 
 
629
 
  svg.selectAll(".symbol path")
630
 
      .each(transitionExplode);
631
 
 
632
 
  function transitionExplode(d, i) {
633
 
    d.innerRadius = r0a;
634
 
    d.outerRadius = r1a;
635
 
    d3.select(this).transition()
636
 
        .duration(duration / 2)
637
 
        .tween("arc", tweenArc({
638
 
          innerRadius: r0b,
639
 
          outerRadius: r1b
640
 
        }));
641
 
  }
642
 
 
643
 
  function tweenArc(b) {
644
 
    return function(a) {
645
 
      var path = d3.select(this),
646
 
          text = d3.select(this.nextSibling),
647
 
          i = d3.interpolate(a, b);
648
 
      for (var key in b) a[key] = b[key]; // update data
649
 
      return function(t) {
650
 
        var a = i(t);
651
 
        path.attr("d", arc(a));
652
 
        text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + width / 2 + "," + height / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
653
 
      };
654
 
    }
655
 
  }
656
 
}
657
 
 
658
 
    </script>
659
 
  </body>
660
 
</html>