Building Responsive Treemaps

Charts help us to visualise data, but not only do different types of chart suit different types of data, the space available for them also affects the choice. Space is often at a premium in applications, particularly when viewed on mobile devices, plus any data must be understood quickly.

For sneak-peek or tiny charts that sit in-line with that data, such as rows on a table, bar or pie chart sparklines work particularly well. However, for a larger chart that sits in a responsive space — one that adapts its size to optimally fit the screen displaying it — such as a panel in a Bootstrap structure, I've recently favoured treemaps, powered by the brilliant d3 library. However, I couldn't immediately find an example of a responsive version, using native HTML rather than SVG, but did find a solution myself.

This gave me a good excuse to try CodePen; you can see the result below:

See the Pen Responsive Treemaps by Darren Hickling (@WhatIsHeDoing)on CodePen.

A bar chart will happily fill expanding horizontal space, but it makes less sense to let it expand vertically, as the difference in the height of the bars wastes space. This might be fine, but if you want to use the entire area and make a big impact, especially on mobile, try the treemap.

Creating these small chart samples in CodePen with d3 was quick and fun, and having drawn more inspiration from around the web, I'm looking for the right excuses to build some more!