Zooming Sunburst

HTML

<script src="http://colinwhite.net/Sunburst/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="http://colinwhite.net/Sunburst/js/vendor/d3.v3.min.js"></script>
<script src="http://colinwhite.net/Sunburst/js/vendor/queue.v1.min.js"></script>
<script src="http://colinwhite.net/Sunburst/js/vendor/underscore-min.js"></script>
<script src="http://colinwhite.net/Sunburst/js/vendor/jquery-2.1.1.min.js"></script>
<script src="http://colinwhite.net/Sunburst/js/treeRemapper.js"></script>
<script src="http://colinwhite.net/Sunburst/js/main.js"></script>

CSS

path {
    stroke: #fff;
    fill-rule: evenodd;
}

JavaScript

var width = 250,
    height = 250,
    radius = Math.min(width, height) / 4,
    color = d3.scale.category20c();

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

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

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.x)));
})
    .innerRadius(function (d) {
    return Math.max(0, y(d.y));
})
    .outerRadius(function (d) {
    return Math.max(0, y(d.y + d.dy));
});

d3.json("http://colinwhite.net/Sunburst/data/getJson.php", function (error, data) {

    /* var treeData = genJSON(data, ['SourceID', 'ProviderID']) */;
		var treeData = {
            "name": "AUTHOR1",
            "description": "Some description",
            "children": [
            {
                "name": "book1",
                "size": 150,
                "children": [
                {
                    "name": "TTP 1",
                    "size": 50,
                    "children": [{
                        "name": "DELIVER",
                        "description": "",
                        "size": 50
                    }, {
                        "name": "CONTROL",
                        "size": 50
                    }, {
                        "name": "EXECUTION",
                        "size": 50
                    }]
                }, {
                    "name": "TTP 2",
                    "size": 50,
                    "children": [{
                        "name": "Establish & Maintain Infrastructure",
                        "description": "",
                        "size": 50
                    }, {
          ...