D3 Examples - Circle packing, study data

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <style>
    text { font: 10px sans-serif; }
    </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        
        <script>
        
    function childrify(h) {
        var childs = []
        d3.entries(h).forEach(function(e) {
            childs.push({"packageName": null, "className":e.key, "value": e.value.budget_dollars, "thing": e});
        });
        return childs;
    }
        
        var diameter = 960;
        
        var color = d3.scale.category10();
        
        var bubble = d3.layout.pack()
            .sort(null)
            .size([diameter, diameter])
            .padding(1.5);
        
​
        var root = {
            "name": "flare",
            "children": null
        }
        
        
        
        var svg = d3.select("body").append("svg")
            .attr("width", diameter)
            .attr("height", diameter);
        
        d3.json("studies.json", function(err, studies) {
            root.children = childrify(studies)
            var dataz = bubble.nodes(root);
            console.log(dataz);
        
            var node = svg.selectAll(".node")
                .data(dataz.filter(function(d) { return !d.children }))
            .enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) { return "translate("+d.x+","+d.y+")"})
        
            node.append("circle")
                .attr("r", function(d) {return d.r})
                .attr("fill", function(d) { return color(d.thing.value.group)});
​
            node.append("text")
                .attr("dy", "0.3em")
                .style("text-anchor", "middle")
                .text(function(d) { return d.className });
            
            node.append("text")
                .attr("dy", "1.8em")
                .style("text-anchor", "middle")
                .text(function(d) { return d.thing.value.scanned_n+"/"+d.thing.value.planned_n });
        });
​
        d3.select(self.frameElement).style("height", diameter + "px");
        </script>
        
    </body>
</html>
    