zoomable Sunburst with flare

by Sajeetharan Sinnathurai

HTML

<div id="main"></div>

CSS

path {

    stroke: #fff;

    fill-rule: evenodd;

}

/*http://blog.luzid.com/2013/extending-the-d3-zoomable-sunburst-with-labels/*/

JavaScript

var width = 500,
    height = 500,
    radius = Math.min(width, height) / 2;

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.sqrt()
    .range([0, radius]);

var color = d3.scale.category10();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ") rotate(-90 0 0)");

var partition = d3.layout.partition()
    .value(function (d) {
    return d.size;
});

var arc = d3.svg.arc()
    .startAngle(function (d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
})
    .endAngle(function (d) {
    return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
})
    .innerRadius(function (d) {
    return Math.max(0, y(d.y));
})
    .outerRadius(function (d) {
    return Math.max(0, y(d.y + d.dy));
});

//d3.json("/d/4063550/flare.json", function(error, root) {
var root =  getData();

var g = svg.selectAll("g")
    .data(partition.nodes(root))
    .enter().append("g");

var path = g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        return color((d.children ? d : d.parent).name);
    })
    .on("click", click);

//.append("text")
var text = g.append("text")
    .attr("x", function (d) {
    return y(d.y);
})
    .attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("transform", function (d) {
    return "rotate(" + computeTextRotation(d) + ")";
})
.text(function (d) {
    return d.name;
})
.style("fill","white");

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

//text.attr("transform", function (d) {
//    return "rotate(" + computeTextRotation(d) + ")";
//});



/*
var label = g.append("rect")
.attr("x", function(d) { return x(d.x) })
.attr("y", function(d) { return y(d.y) })
.attr("width", function(d) { return 100 })
.attr("height", function(d) { return 100 })
.attr("transform", function (d)...