flare.json

{
 "name": "all",
 "children": [{"name":"Shoot","children":[{"name":"Background","children":[{"size":26645,"name":"Gradient","category":"Background","group":"Shoot"},{"size":206,"name":"Color","category":"Background","group":"Shoot"},{"size":23413,"name":"Gray","category":"Background","group":"Shoot"},{"size":18806,"name":"Cream","category":"Background","group":"Shoot"},{"size":7888,"name":"White","category":"Background","group":"Shoot"}]},{"name":"Lighting Shadow","children":[{"size":5944,"name":"Soft","category":"Lighting Shadow","group":"Shoot"},{"size":22844,"name":"Hard","category":"Lighting Shadow","group":"Shoot"}]},{"name":"Shot Type","children":[{"size":8758,"name":"Bottom","category":"Shot Type","group":"Shoot"},{"size":16173,"name":"Full Length","category":"Shot Type","group":"Shoot"},{"size":7452,"name":"Detail","category":"Shot Type","group":"Shoot"},{"size":44653,"name":"Top","category":"Shot Type","group":"Shoot"}]}]},{"name":"Styling","children":[{"name":"Body Type Men","children":[{"size":3384,"name":"Straight","category":"Body Type Men","group":"Styling"},{"size":4059,"name":"Athletic","category":"Body Type Men","group":"Styling"},{"size":1437,"name":"Big And Tall","category":"Body Type Men","group":"Styling"}]},{"name":"Body Type Women","children":[{"size":5552,"name":"Athletic","category":"Body Type Women","group":"Styling"},{"size":10141,"name":"Plus","category":"Body Type Women","group":"Styling"},{"size":6538,"name":"Curvy","category":"Body Type Women","group":"Styling"},{"size":33192,"name":"Straight","category":"Body Type Women","group":"Styling"},{"size":681,"name":"Maternity","category":"Body Type Women","group":"Styling"}]},{"name":"Facial Hair Men","children":[{"size":1720,"name":"Clean Shaven","category":"Facial Hair Men","group":"Styling"},{"size":6529,"name":"Beard","category":"Facial Hair Men","group":"Styling"}]},{"name":"Fully Stylized","children":[{"size":57541,"name":"No","category":"Fully Stylized","group":"Styling"},{"size":3464,"name":"Yes","category":"Fully Stylized","group":"Styling"}]},{"name":"Hair Length Men","children":[{"size":3539,"name":"Medium Cut","category":"Hair Length Men","group":"Styling"},{"size":2239,"name":"Short Cut","category":"Hair Length Men","group":"Styling"}]},{"name":"Hair Length Women","children":[{"size":5284,"name":"Medium","category":"Hair Length Women","group":"Styling"},{"size":1746,"name":"Short","category":"Hair Length Women","group":"Styling"},{"size":40831,"name":"Long","category":"Hair Length Women","group":"Styling"}]},{"name":"Hair Part Type","children":[{"size":27687,"name":"Side Part","category":"Hair Part Type","group":"Styling"},{"size":18390,"name":"None","category":"Hair Part Type","group":"Styling"},{"size":11700,"name":"Middle Part","category":"Hair Part Type","group":"Styling"}]},{"name":"Hair Style","children":[{"size":2372,"name":"Braid","category":"Hair Style","group":"Styling"},{"size":1976,"name":"Bun","category":"Hair Style","group":"Styling"},{"size":3005,"name":"Top Knot","category":"Hair Style","group":"Styling"},{"size":37937,"name":"All Down","category":"Hair Style","group":"Styling"},{"size":7027,"name":"Ponytail","category":"Hair Style","group":"Styling"},{"size":943,"name":"Half Up Half Down","category":"Hair Style","group":"Styling"}]},{"name":"Make Up Looks","children":[{"size":11801,"name":"Daytime Natural Fitness","category":"Make Up Looks","group":"Styling"},{"size":32051,"name":"Bold Dramatic","category":"Make Up Looks","group":"Styling"}]},{"name":"Model Attitude","children":[{"size":25252,"name":"Sexy Confident Serious","category":"Model Attitude","group":"Styling"},{"size":21378,"name":"Smile Laugh Playful","category":"Model Attitude","group":"Styling"}]},{"name":"Model Poses","children":[{"size":64397,"name":"Straight On","category":"Model Poses","group":"Styling"},{"size":9420,"name":"Walking","category":"Model Poses","group":"Styling"},{"size":338,"name":"Leaping","category":"Model Poses","group":"Styling"}]},{"name":"Recognition","children":[{"size":34442,"name":"Recognizable","category":"Recognition","group":"Styling"},{"size":30104,"name":"Unrecognizable","category":"Recognition","group":"Styling"}]},{"name":"Wardrobe Styling","children":[{"size":12809,"name":"Evening","category":"Wardrobe Styling","group":"Styling"},{"size":27349,"name":"Leisure Casual","category":"Wardrobe Styling","group":"Styling"},{"size":10794,"name":"Lingerie","category":"Wardrobe Styling","group":"Styling"},{"size":14041,"name":"Athletic Athleisure","category":"Wardrobe Styling","group":"Styling"},{"size":5527,"name":"Sleep","category":"Wardrobe Styling","group":"Styling"},{"size":934,"name":"Professional","category":"Wardrobe Styling","group":"Styling"},{"size":5167,"name":"Swim","category":"Wardrobe Styling","group":"Styling"}]}]},{"name":"Model","children":[{"name":"Ethnicity","children":[{"size":23097,"name":"White","category":"Ethnicity","group":"Model"},{"size":758,"name":"Asian","category":"Ethnicity","group":"Model"},{"size":2404,"name":"Native Hawaiian Or Other Pacific Islander","category":"Ethnicity","group":"Model"},{"size":8774,"name":"Black Or African American","category":"Ethnicity","group":"Model"},{"size":5473,"name":"Hispanic Or Latino","category":"Ethnicity","group":"Model"},{"size":3130,"name":"American Indian Or Alaska Native","category":"Ethnicity","group":"Model"}]},{"name":"Hair Color","children":[{"size":19012,"name":"Brown","category":"Hair Color","group":"Model"},{"size":2957,"name":"Redhead","category":"Hair Color","group":"Model"},{"size":23888,"name":"Black","category":"Hair Color","group":"Model"},{"size":14126,"name":"Blonde","category":"Hair Color","group":"Model"}]},{"name":"Hair Texture","children":[{"size":36872,"name":"Wavy","category":"Hair Texture","group":"Model"},{"size":13989,"name":"Straight","category":"Hair Texture","group":"Model"},{"size":7941,"name":"Curly","category":"Hair Texture","group":"Model"}]},{"name":"Skin Tone","children":[{"size":37177,"name":"White","category":"Skin Tone","group":"Model"},{"size":6400,"name":"Tan","category":"Skin Tone","group":"Model"},{"size":7134,"name":"Olive","category":"Skin Tone","group":"Model"},{"size":15006,"name":"Black","category":"Skin Tone","group":"Model"},{"size":10369,"name":"Brown","category":"Skin Tone","group":"Model"}]}]}]
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    stroke: #fff;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>

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

    var formatNumber = d3.format(",d");

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

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

    var color = d3.scale.category20c();

    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)); });

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

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

      svg.selectAll("path")
        .data(partition.nodes(root))
        .enter().append("path")
        .attr("d", arc)
        .style("fill", function (d) { return color((d.children ? d : d.parent).name); })
        .on("click", click)
        .append("title")
        .text(function (d) { return d.name + "\n" + formatNumber(d.value); });
    });

    function click(d) {
      svg.transition()
        .duration(750)
        .tween("scale", function () {
          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, radius]);
          return function (t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
        })
        .selectAll("path")
        .attrTween("d", function (d) { return function () { return arc(d); }; });
    }

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

  </script>