D3 Examples - Treemap (non-optimized split)

Treemap (non-optimized split)

Inspired by this discussion, I wanted to try to implement the split algorithm for treemaps. It is still very much a WIP. This represents a quick test for speed on a decently sized random hierarchical data set generated in R by the treemap package.

Original README.md

This treemap shows the file size in bytes of D3 4.4.0’s source code. Click on any cell to view the corresponding source.

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="//unpkg.com/d3"></script>
<script src="d3-hierarchy.js"></script>
<script>
​
var width = 800,
    height = 600;
    
var treemap = d3.treemap()
    .size([width, height])
    .round(true)
    .padding(1)
        .tile(d3.treemapSplit);
​
d3.json("rhd.json", function(error, data) {
  if (error) throw error;
​
  var root = d3.hierarchy(data);
  root.sum(function(d) { return d.x; });
  //root.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
​
  //https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
  [1,2,3,4,5].map(function(){
    var t0 = performance.now();
    treemap(root);
  var t1 = performance.now();
  d3.select("body")
    .append("pre")
    .text("treemap split took " + (t1 - t0) + " milliseconds.")
  })
​
});
​
</script>
​
    