yan2014/flare.json

## flare.json
{
    "name": "flare",
    "children": [
        {
            "name": "analytics",
            "children": [
                {
                    "name": "cluster",
                    "children": [
                        {"name": "Paaa11", "size": 11.45},
                        {"name": "Zaaa12", "size": 28.07},
                        {"name": "Naaa13", "size": 6.58}
                    ]
                },
                {
                    "name": "graph",
                    "children": [
                        {"name": "Paaa21", "size": 42.94},
                        {"name": "Zaaa22", "size": 23.67},
                        {"name": "Naaa23", "size": 6.71}
                    ]
                },
                {
                    "name": "optimization",
                    "children": [
                        {"name": "Paaa31", "size": 35.55},
                        {"name": "Zaaa32", "size": 7.84},
                        {"name": "Naaa33", "size": 39.15}                    ]
                }
            ]
        }
    ]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: auto;
        position: relative;
        width: 960px;
    }

    form {
        position: absolute;
        right: 10px;
        top: 10px;
    }

</style>
<form>
    <label><input type="radio" name="mode" value="size"> Size</label>
    <label><input type="radio" name="mode" value="count" checked> Count</label>
</form>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

    var width = 960,
            height = 700,
            radius = Math.min(width, height) / 2-20;
    var color = d3.scale.ordinal().range(["#F16745", "#7BC8A4", "#FFC65D","lightgrey","#eff3ff","#bdd7e7","#6baed6","#eff3ff","#bdd7e7","#6baed6","#eff3ff","#bdd7e7","#6baed6"]);
    color.domain(["cluster", "graph", "optimization","analytics","Naaa13","Zaaa12","Paaa11","Naaa23","Zaaa22","Paaa21","Naaa33","Zaaa32","Paaa31"]);


    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()
            .sort(null)
            .size([2 * Math.PI, radius * radius])
            .value(function(d) { return 1; });

    var arc = d3.svg.arc()
            .startAngle(function(d) { return d.x; })
            .endAngle(function(d) { return d.x + d.dx; })
            .innerRadius(function(d) { return Math.sqrt(d.y); })
            .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

    d3.json("flare.json", function(error, root) {
        if (error) throw error;

        var path = svg.datum(root).selectAll("path")
                .data(partition.nodes)
                .enter().append("path")
                .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
                .attr("d", arc)
                .style("stroke", "#fff")
                .style("fill", function(d) { return color(d.name); })
                .style("fill-rule", "evenodd")
                .each(stash);

        d3.selectAll("input").on("change", function change() {
            var value = this.value === "count"
                    ? function() { return 1; }
                    : function(d) { return d.size; };

            path
                    .data(partition.value(value).nodes)
                    .transition()
                    .duration(1500)
                    .attrTween("d", arcTween);
        });
        svg.append()
    });

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

    // Interpolate the arcs in data space.
    function arcTween(a) {
        var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
        return function(t) {
            var b = i(t);
            a.x0 = b.x;
            a.dx0 = b.dx;
            return arc(b);
        };
    }

    d3.select(self.frameElement).style("height", height + "px");

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	{
	"name": "flare",
	"children": [
	{
	"name": "analytics",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "Paaa11", "size": 11.45},
	{"name": "Zaaa12", "size": 28.07},
	{"name": "Naaa13", "size": 6.58}
	]
	},
	{
	"name": "graph",
	"children": [
	{"name": "Paaa21", "size": 42.94},
	{"name": "Zaaa22", "size": 23.67},
	{"name": "Naaa23", "size": 6.71}
	]
	},
	{
	"name": "optimization",
	"children": [
	{"name": "Paaa31", "size": 35.55},
	{"name": "Zaaa32", "size": 7.84},
	{"name": "Naaa33", "size": 39.15} ]
	}
	]
	}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<form>
	<label><input type="radio" name="mode" value="size"> Size</label>
	<label><input type="radio" name="mode" value="count" checked> Count</label>
	</form>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 700,
	radius = Math.min(width, height) / 2-20;
	var color = d3.scale.ordinal().range(["#F16745", "#7BC8A4", "#FFC65D","lightgrey","#eff3ff","#bdd7e7","#6baed6","#eff3ff","#bdd7e7","#6baed6","#eff3ff","#bdd7e7","#6baed6"]);
	color.domain(["cluster", "graph", "optimization","analytics","Naaa13","Zaaa12","Paaa11","Naaa23","Zaaa22","Paaa21","Naaa33","Zaaa32","Paaa31"]);


	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()
	.sort(null)
	.size([2 * Math.PI, radius * radius])
	.value(function(d) { return 1; });

	var arc = d3.svg.arc()
	.startAngle(function(d) { return d.x; })
	.endAngle(function(d) { return d.x + d.dx; })
	.innerRadius(function(d) { return Math.sqrt(d.y); })
	.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

	d3.json("flare.json", function(error, root) {
	if (error) throw error;

	var path = svg.datum(root).selectAll("path")
	.data(partition.nodes)
	.enter().append("path")
	.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
	.attr("d", arc)
	.style("stroke", "#fff")
	.style("fill", function(d) { return color(d.name); })
	.style("fill-rule", "evenodd")
	.each(stash);

	d3.selectAll("input").on("change", function change() {
	var value = this.value === "count"
	? function() { return 1; }
	: function(d) { return d.size; };

	path
	.data(partition.value(value).nodes)
	.transition()
	.duration(1500)
	.attrTween("d", arcTween);
	});
	svg.append()
	});

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

	// Interpolate the arcs in data space.
	function arcTween(a) {
	var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
	return function(t) {
	var b = i(t);
	a.x0 = b.x;
	a.dx0 = b.dx;
	return arc(b);
	};
	}

	d3.select(self.frameElement).style("height", height + "px");

	</script>