Building a Treemap with JavaScript
Building a Treemap with JavaScript

At Foxintelligence, while building our data visualization platform we wanted to challenge the pie chart. This is our journey of building a Treemap in JavaScript from scratch.

EDIT: an open source JavaScript package

I published an open source JavaScript package that calculates the Treemap. It uses the algorithm described in this article and is available both with npm and in the browser.

https://www.npmjs.com/package/treemap-squarify

The goal: an effective data visualization

The goal was to find the best way to represent market shares among categories in e-commerce. The pie chart representation is the first one that comes to mind for this kind of data.

Colorful pie charts

However, it can be hard to compare different categories in a pie chart. The pain points of this type of visualization are:

It’s hard to compare pie slices

It’s hard to display labels on pie slices

It’s hard to compare two pie charts

What kind of data visualization can we use instead?

🙌 The Treemap

That’s where we discovered the Treemap. A Treemap is a way to visualize hierarchical data in a rectangle (hence tree in Treemap). The value of one data point is proportional to its area in the main rectangle. One popular use is to visualize a computer file system. Here is an example of the initial tree and its counterpart on a Treemap.

A tree and its Treemap from [1]

In our case however, we don’t use it this way as we have a list of data instead of a tree. Nevertheless, we wanted to keep the idea of having one data point represented by an area on one main rectangle. In the following example, we have one main rectangle which represents 100% and each rectangle is a category market share of x%.

Market shares on a Treemap

Why is it better?

First it’s visually easier to compare rectangle area than pie slices. It’s also easier for the label of each area to be displayed on the graphic instead of having to refer to the legend each time you need to. Plus we wanted to compare one merchant with the market (or with another merchant), and having two pie charts next to each other is not readable.

🎯 The specifications

So we’ve decided to use a Treemap as our data visualization. Let’s now talk about the specifications from the design/product team.

Each area should be a rectangle that is as square as possible (which is the Squarified Treemap type of Treemap)

type of Treemap) We want 100% customization possibility over the UI (colors, hover effects, label or icon inside each square)
['Clément Bataille']
['Data Visualization', 'Software Engineering', 'JavaScript', 'Vuejs', 'Technology']