Attempt at Sunburst with Transitions

</head>
<body>

</div>

var w = 660,
    h = 600,
    r = Math.min(w, h) / 2,
    color = d3.scale.category20();
    
var x,
    y,
    duration = 500,
    delay = 500;

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, r * r])
    .value(function(d) { return 1; });

var pos = function(d) { return (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180;}

d3.json("math_map_compact_3.json", function(json) {
  var g = vis.data([json]).selectAll('g')
  		.data(partition)
  	.enter().append("svg:g");
  	  //.attr("display", function(d) { return d.depth ? null : "none"; }); // hide inner ring
  
  	g.append("svg:path")
  		.attr("class","unselected")
  		.attr("d", arc)
      	.attr("fill-rule", "evenodd")
      	.attr("display", function(d) { return d.depth > 1 ? "none" : null;})
      	.style("stroke", "#fff")
      	.style("fill", function(d) { return color((d.children ? d.data : d.parent).name); })
      	//.tween("arc",arcTween)
      	.on("click",collapseSections);
      	//.on("mouseover",mouseover)
      	//.on("mouseout",mouseout);
  
	g.append("svg:text")
		.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")";})
		.attr("x", function(d) { return Math.sqrt(d.y);})
		//.attr("x", function(d) { return pos(d) == 90 ? "-30" : pos(d) > 0 ? (-Math.sqrt(d.y)-80) : (Math.sqrt(d.y)+10);})
		//.attr("dx", function(d) { return d.depth == 0 ? "-20" : "6";}) // margin
		.attr("dy", ".35em") // vertical-align
		.attr("class","unselected")
		.attr("display", function(d) { return d.depth > 1 ? "none" : null;})
		.text(function(d) { return d.data.name;});

});

function collapseSections(d, i) {
	console.log(d);
	newSec = d.data.name;
	//console.log(this);
	//console.log(newSec);
	//console.log(this.nextSibling);
	d3.select(this, this.nextSibling)
		.attr("class","selected");
		
	d3.select(this.nextSibling)
		.attr("class","selected");
		
	d3.selectAll("path.unselected, text.unselected").transition()
		.duration(duration)
		.style("opacity",0.1)
		.remove();

}

function tweenArc(b) {
	b.endAngle = 360;
	var i = d3.interpolate({endAngle:0}, b);
	console.log(i);
	return function(t) {
		return arc(i(t));
	};
}

// Interpolate the scales!
function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

function mouseover(d, i) { 
 d3.select(this) 
     .style("fill", "brown") 
     //.style("stroke", "grey"); 
}

function mouseout(d, i) { 
 d3.select(this) 
     .style("fill", function(d) { return color((d.children ? d.data : d.parent).name); }) 
}

function click(d, i) {
  console.log("click", d, i);
}

// Stash the old values for transition.
function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
}

</script>

</body>

Modified http://mbostock.github.com/d3/d3.js?1.27.2 to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js?1.27.2 to a secure url

https://mbostock.github.com/d3/d3.js?1.27.2

https://mbostock.github.com/d3/d3.layout.js?1.27.2