This block is a port, from d3v3 to d3v4, of mkedwards‘s block: Treemap.
Warning sometimes (1% of time), code fails to compute the layout, and doesn’t update the svg. In such a case, you have to (re-)compute diagram.
Updates
- add d3-polygon-clip.js (no longer in D3v4)
- add d3-rebind.js (no longer in D3v4)
- use d3.polygoneArea(poly), d3.polygonLength(poly) and d3.polygonCentroid(poly) (instead of respectively poly.area(), poly.length() and poly.centroid())
- use d3.scaleLinear(), d3.scaleOrdinal(d3.schemeCategory20c) (instead of respectively d3.scale.linear(), d3.scale.categories20())
- in function paint(), rework painting order of polygons for a better perception of each partition (strokes no longer overlap each others, so that the stroke of a partition is consistant all over it’s perimeter)
- min and max functions consider all elements (instead of starting at index 1)
- rework computeDistanceBorder to make it compatible with the wikipedia formula (fixes error Cannot set property ‘twin’ of null of the original block)
- in voronoiTreemap/iterate, when adapt weight (second adaptation), compute min distance border based on clipped polygon (initialy, was computed on NON clipped polygon)
- rework linearDependant function
- in setClipPolygon, order bounding sites in counterclockwise
- the result of d3v3.layout.hierarchy() was an array of nodes (each with their respective descendants), but the result of d3v4.hierarchy() is the root node; hence this huge change may have unseen impacts (or can lead to futher refactoring, but this is not the point here); current seen impacts are on paint() function
- add a label.json file, with a very simple hierarchy, for debug purpose
- remove activity.json file
On-going issues
- sometimes (1% of time), code fails to compute the layout, and doesn’t update the svg; console shows a Cannot set property ‘twin’ of null error; this error was already part of the original block; I’ve already work on this error, and drastically lower its arising; but there is still some unknown situations that still raise this error …
- don’t understand what I’m doing with d3_layout_hierarchyRebind (in voronoiTreemapD3.js)
Original README
A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.