{"id":496,"date":"2012-12-16T09:26:27","date_gmt":"2012-12-16T14:26:27","guid":{"rendered":"http:\/\/billdwhite.com\/?p=496"},"modified":"2012-12-16T09:26:27","modified_gmt":"2012-12-16T14:26:27","slug":"d3-treemap-with-title-headers","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2012\/12\/16\/d3-treemap-with-title-headers\/","title":{"rendered":"d3 Treemap with Title Headers"},"content":{"rendered":"

The D3 library<\/a> is really a great way to create data visualizations in HTML5. I absolutely love it and its treemap<\/a> is especially powerful. I wanted to create a treemap that showed grouping headers like the JIT version that has been around for a while, but it took a little more work to get D3 to do the same thing. I came across a post<\/a> that showed the attempts of others to create the same thing and I wanted to show the code of how I did it in case others are interested.<\/p>\n

I created two versions: the first uses SVG labels which are nice because you can measure them to decide what room is available for displaying a label in a given cell. However, wrapping is much more involved and ended up creating a second version which uses embedded HTML divs to create self wrapping labels which seem to look a little better. I also modified the examples of others in the thread so instead of showing labels where there is enough room to see them, I instead took the approach of showing labels for given group when that group was selected.<\/p>\n

(NOTE: The labels do not work in IE in the first and third demos because IE is a horrible browser. I could write checks to use svg elements instead of foreignobjects for the labels but you get what you need from the second demo if you want IE compatibility.)<\/p>\n

 <\/p>\n

 <\/p>\n

So here is the first example which uses divs for the labels: (link to code<\/a>) (bl.ocks.org<\/a>)<\/p>\n

 <\/p>\n