xxxxxxxxxx<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; });function cell() { this .style("left", function(d) { return d.x + "px"; }) .style("top", function(d) { return d.y + "px"; }) .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });}});</script> https://d3js.org/d3.v2.min.js?2.10.0