Implementing quadratic treemap in javascript

Question

I'm currently trying to implement the treemap algorithm in Javascript. More specifically, the algorithm described in Squarified Treemaps . The specified pseudo code is as follows:

procedure squarify(list of real children, list of real row, real w) begin real c = head(children); if worst(row, w) <= worst(row++[c], w) then squarify(tail(children),row++[c], w) else layoutrow(row); squarify(children,[], width()); fi end 

however, my JavaScript looks like this:

 var c = children[0]; if (worst(row, w) >= worst(row.concat(c), w)) { this.squarify(children.splice(1), row.concat(c), w); } else { layoutrow(row); this.squarify(children, [], width()); } 

As far as I can tell, my code is working correctly, but the inequality is wrong. Am I assuming I'm missing something in my implementation, or is this inequality wrong in pseudo code? Thanks

Answer 1

You want to add c to the current row when this improves the aspect ratio, i.e. when

 worst(row++[c], w) < worst(row, w) 

I recently completed a piece of github code that implements an algorithm in TypeScript and includes ready-to-use JavaScript:

https://github.com/nicnguyen/treemap

Answer 2

If you are only interested in the layout algorithm, check out the squarify npm package. It only returns the layout data, leaving you free to render the result, but you want to.