d3 packs

by hoffmanc

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

CSS

body {
    font-family: Helvetica, Arial, sans;
    font-size:23px;
}

JavaScript

// fork this and start building your own examples to share:
// https://github.com/mbostock/d3/wiki/Gallery


var layers = {className:"", children:[
    {className:"Phusion Passenger",  packageName:'aa', x:10, y:10, h:30, w:500},
    {className:"Rack",  packageName:'bb', x:20, y:15, h: 20, w:200},
    {className:"Ruby Enterprise Edition",  packageName:'bb', x:220, y:15, h: 20, w:200}
]};

var canvas = { w:520, h:520 },
    format = d3.format(",d"),
    fill = d3.scale.category10();

var bubble = d3.layout.pack()
    .sort(null)
    .size(_.values(canvas));
 
var chart = d3.select("body").append("svg:svg")
    .attr("width", canvas.w)
    .attr("height", canvas.h);

var node = chart.selectAll("g.circle")
    .data(bubble.nodes(layers))
    .enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 
//node.append("svg:title")
//    .text(function(d) { return d.className + ": " + format(d.value); });
 
node.append("svg:rect")
    .attr("height", function(d) { return d.h; })
    .attr("width", function(d) { return d.w; })
    .style("fill", function(d) { return fill(d.packageName); });
 
//node.append("svg:text")
//    .attr("text-anchor", "middle")
//    .attr("dy", ".3em")
//    .text(function(d) { return d.className.substring(0, d.r/3); });