forked from mbostock‘s block: D3 Source Treemap
I wanted to demonstrate how to add a brush for each cell in a treemap with d3v4, since today I used a similar but slightly more robust method for a win at work as mentioned in this tweet.
Great win at work today with #d3js and #rstats to make interactive brushable treemap with real-time discussion for reallocation of a client portfolio; thx @mbostock!
— timelyportfolio (@timelyportfolio) December 20, 2017
I hope it helps someone along the way. For reference, I also added click on the cell that would add or delete a brush for each cell. With just a click, the cell would highlight and be 100%. The added brush allows partial selection. Unclick deletes the brush and sets to 0%.
The treemap I used had far fewer cells than this one from the d3 source code. Regardless, I think a bar chart with brushes (see example) might be a better UI for this assuming a limited number of bars.
Thanks so much to Mike Bostock for his amazing generous contribution that does not get nearly enough recognition or money.
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: D3 Source Treemap (forked for split algo)