Kumu Blog

Tools and practices for tackling complex systems.

Avoiding overlapping elements

Someone asked a simple question on Quora last week:

My element names are overlapping, how can I spread them further apart?

Suprisingly, the answer isn't so simple. We thought it would be great to highlight the answer for everyone as it highlights our approach to building Kumu.

The solution to the question falls in the advanced perspective realm, mainly because the correct solution depends on the map. In those cases, we do our best to make the 80% solution the default. For the other 20%, you might need to cozy up with a bit of code (don't worry, it's not as scary as it seems).

Let's get started...

If the elements are overlapping because they're tightly connected you can lengthen the resting length of connections:

// better performance, applies to all connections
// default is 110
@settings { connection-length: 300; }

or

// use selectors to target specific connections
connection { length: 300; }

// connections with type "funding"
funding-connection { length: 300; }  

You can also give elements more room by tweaking the layout settings. The terminology is a bit intimidating at first but particles are just the way we model elements, and springs are the way we model connections.

If connections are the culprit, you could relax the strength of connections:

// value between 0..1, default 0.8
@settings { layout-spring-strength: 0.1; }

If element size is the culprit, you'll want to relax gravity instead:

// value below 0.0001, default auto
@settings { layout-gravity-strength: 0.00001; }

Yet another approach is to increase the repulsive force between elements:

// value above 0, default 50
@settings { layout-particle-charge: 200; }

As you can see there's lots of way to tackle this. The default settings work well for most maps but won't work for everything.

We're working on a UI that'll make it easy to adjust these values within your perspectives but for now you'll need to set these values through the advanced editor.

Subscribe for updates

Loading comments...