I'd like to automatically place 100-200 bubble labels so that the following requirements are met:
- Labels should not overlap
- Labels should preferably not overlap bubbles
- Label should be close to bubble
- Preferred label position (top left, top, bottom, right etc.) should be respected to some extent
- Font-size can vary
Are there any helpful libraries / algorithms for this? (preferably JavaScript or PHP)
(The label placement in the image does not meet these requirements)
I think if you are using D3 inside your tools, you can use "force-based" label placement algorithm. The solution originally belongs to Max Planck Research Networks but there is already a ready-made Javascript example, here: Force-based label placement in D3
How about
label.substring(0, Math.sqrt(bubbleValueOrRadius))
I found this in one of protovis.js examples.
I found an approach in Java actually for this problem that actually works and is called Force Directed Map Labeling and is an open-source academy experience.
Here is the documentation + project source code: Force Directed Map Labeling