Treemap Diagram: how to sort tiles & how to truncate text?

https://codepen.io/VerminatorX1/pen/ExdNEMr Here is current state of my treemap.

My problems are:

  1. I have Atari 2600’s Pac Man placed at the beginning of treemap, I assume that’s because it’s first in the JSON. How can I sort treemap’s values so it gets moved to the bottom?

  2. How do I make text fit the tiles?

Any kind of input is greatly appreciated!

Sorting isn’t tested, so most people don’t care. The docs have some sorting options.

Text wrapping is non-trivial (and not tested, so most people don’t care) and beyond the scope of the project. You can find some examples searching the web. Roughly, you’ll need to get the tile size, the text size, and determine how to break words if the text is wider than the tile.

1 Like

About sorting, I figured it out yesterday. Applied info from Treemaps this page and it worked. Leaving link if someone ever has similar issue.

As for fitting names: from what I’ve searched, it looks like quite complicated issue. But, as I looked up the project example, I noticed that all words longer than 2 characters are newlined, so it’s propably doable with regular expression.

Anyway, thanks for the input!

1 Like

Sorry for double posting, but it seems I can’t edit posts after few days. I have found a pretty clean way to wrap text in treemap tiles, here it is, in case someone needs it: svg - D3 proper text() in tremap - Stack Overflow

Credits to solution author, Matt Sergej Rinc

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.