Treemap (optimized? split) by timelyportfolio

forked from mbostock‘s block: D3 Source Treemap

then forked from timelyportfolio‘s block: D3 Source Treemap (forked for split algo)

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.

forked from timelyportfolio‘s block: Treemap (forked for split speed test)

index.html

<!DOCTYPE html>
<script src="//unpkg.com/d3"></script>
<script src="d3-hierarchy.js"></script>

<select name="select" id="tile-selector" style="display:block;">
 		<option value="Split" selected>Split</option>
    <option value="Squarify">Squarify</option> 
    <option value="Slice">Slice</option>
    <option value="Dice">Dice</option>
    <option value="SliceDice">SliceDice</option>
    <option value="Binary">Binary</option>
</select>
<div id = "speed-result"></pre>

<script>

var width = 800,
    height = 600;
    
var treemap = d3.treemap()
    .size([width, height]);

var tile_selector = d3.select("#tile-selector").node();
  
function draw(){
  var speedy = d3.select("#speed-result");
  speedy.selectAll("pre").remove();
  //https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
  [1,2,3,4,5].map(function(){
    var t0 = performance.now();
      treemap.tile(
        d3["treemap" + (tile_selector.options[tile_selector.selectedIndex].value ? tile_selector.options[tile_selector.selectedIndex].value : "Squarify")]
  )(root);
    var t1 = performance.now();

    speedy
      .append("pre")
      .text("treemap" + (tile_selector.options[tile_selector.selectedIndex].value ? tile_selector.options[tile_selector.selectedIndex].value : "Squarify") + " took " + (t1 - t0) + " milliseconds.")
  });
}
  
var root;

d3.select("#tile-selector").on("change",draw);  

d3.json("rhd.json", function(error, data) {
  if (error) throw error;

  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; });
 	draw();
});
</script>

code.R

library(treemap)
library(d3r)
library(pipeR)
library(dplyr)

rhd <- random.hierarchical.data(children.root=6, depth=8)
rhdj <- d3r::d3_nest(rhd, value_cols="x")

cat(rhdj, file="rhd.json")

gist_treemap_split_rhd.Rproj

Version: 1.0

RestoreWorkspace: Default
SaveWorkspace: Default
AlwaysSaveHistory: Default

EnableCodeIndexing: Yes
UseSpacesForTab: Yes
NumSpacesForTab: 2
Encoding: UTF-8

RnwWeave: Sweave
LaTeX: pdfLaTeX