Song Treemap

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { margin:0; padding:0; }
.cell {
  border: solid 1px white;
  font: 9px sans-serif;
  line-height: 10px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
</style>
<body>
    <div id='chart'></div>
<script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
<script>

d3.json('songs.json', function(json) {

var nodes = {
    name: 'songs',
    children: []
};

var artists = {};

for (var i = 0; i < json.length; i++) {
    if (json[i].artist) {
        if (!artists[json[i].artist]) artists[json[i].artist] = {
            name: json[i].artist,
            children: []
        };
        artists[json[i].artist].children.push({
            name: json[i].name
        });
    }
}

for (var i in artists) {
    artists[i].children = d3.nest()
        .key(function(d) { return d.name; })
        .rollup(function(d) {
            return d.length;
        })
        .entries(artists[i].children)
        .map(function(d) {
            d.size = d.values;
            d.name = d.key;
            return d;
        });
    nodes.children.push(artists[i]);
}

var width = 640,
    height = 1000,
    color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });

var div = d3.select("#chart").append("div")
    .style("position", "relative")
    .style("width", width + "px")
    .style("height", height + "px");

div.data([nodes]).selectAll("div")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "cell")
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .call(cell)
      .text(function(d) { return d.children ? null : d.name; });

https://d3js.org/d3.v2.min.js?2.10.0