source: Dev/branches/jQueryUI/client/d3/examples/partition/partition-sunburst.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

File size: 1.9 KB
Line 
1var w = 960,
2    h = 700,
3    r = Math.min(w, h) / 2,
4    color = d3.scale.category20c();
5
6var vis = d3.select("#chart").append("svg:svg")
7    .attr("width", w)
8    .attr("height", h)
9  .append("svg:g")
10    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
11
12var partition = d3.layout.partition()
13    .sort(null)
14    .size([2 * Math.PI, r * r])
15    .value(function(d) { return 1; });
16
17var arc = d3.svg.arc()
18    .startAngle(function(d) { return d.x; })
19    .endAngle(function(d) { return d.x + d.dx; })
20    .innerRadius(function(d) { return Math.sqrt(d.y); })
21    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
22
23d3.json("../data/flare.json", function(json) {
24  var path = vis.data([json]).selectAll("path")
25      .data(partition.nodes)
26    .enter().append("svg:path")
27      .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
28      .attr("d", arc)
29      .attr("fill-rule", "evenodd")
30      .style("stroke", "#fff")
31      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
32      .each(stash);
33
34  d3.select("#size").on("click", function() {
35    path
36        .data(partition.value(function(d) { return d.size; }))
37      .transition()
38        .duration(1500)
39        .attrTween("d", arcTween);
40
41    d3.select("#size").classed("active", true);
42    d3.select("#count").classed("active", false);
43  });
44
45  d3.select("#count").on("click", function() {
46    path
47        .data(partition.value(function(d) { return 1; }))
48      .transition()
49        .duration(1500)
50        .attrTween("d", arcTween);
51
52    d3.select("#size").classed("active", false);
53    d3.select("#count").classed("active", true);
54  });
55});
56
57// Stash the old values for transition.
58function stash(d) {
59  d.x0 = d.x;
60  d.dx0 = d.dx;
61}
62
63// Interpolate the arcs in data space.
64function arcTween(a) {
65  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
66  return function(t) {
67    var b = i(t);
68    a.x0 = b.x;
69    a.dx0 = b.dx;
70    return arc(b);
71  };
72}
Note: See TracBrowser for help on using the repository browser.