Export Image
Export Code
Connected

Experimental Label Placement

Curran Kelleher

Saturday, May 17, 2025: 0 viewsSunday, May 18, 2025: 0 viewsMonday, May 19, 2025: 0 viewsTuesday, May 20, 2025: 0 viewsWednesday, May 21, 2025: 0 viewsThursday, May 22, 2025: 0 viewsFriday, May 23, 2025: 1 viewSaturday, May 24, 2025: 0 viewsSunday, May 25, 2025: 0 viewsMonday, May 26, 2025: 0 viewsTuesday, May 27, 2025: 0 viewsWednesday, May 28, 2025: 0 viewsThursday, May 29, 2025: 0 viewsFriday, May 30, 2025: 0 viewsSaturday, May 31, 2025: 0 viewsSunday, June 1, 2025: 0 viewsMonday, June 2, 2025: 0 viewsTuesday, June 3, 2025: 0 viewsWednesday, June 4, 2025: 0 viewsThursday, June 5, 2025: 0 viewsFriday, June 6, 2025: 0 viewsSaturday, June 7, 2025: 0 viewsSunday, June 8, 2025: 0 viewsMonday, June 9, 2025: 1 viewTuesday, June 10, 2025: 0 viewsWednesday, June 11, 2025: 0 viewsThursday, June 12, 2025: 0 viewsFriday, June 13, 2025: 1 viewSaturday, June 14, 2025: 0 viewsSunday, June 15, 2025: 0 viewsMonday, June 16, 2025: 0 viewsTuesday, June 17, 2025: 0 viewsWednesday, June 18, 2025: 0 viewsThursday, June 19, 2025: 0 viewsFriday, June 20, 2025: 0 viewsSaturday, June 21, 2025: 0 viewsSunday, June 22, 2025: 0 viewsMonday, June 23, 2025: 0 viewsTuesday, June 24, 2025: 0 viewsWednesday, June 25, 2025: 0 viewsThursday, June 26, 2025: 0 viewsFriday, June 27, 2025: 0 viewsSaturday, June 28, 2025: 0 viewsSunday, June 29, 2025: 0 viewsMonday, June 30, 2025: 0 viewsTuesday, July 1, 2025: 0 viewsWednesday, July 2, 2025: 0 viewsThursday, July 3, 2025: 0 viewsFriday, July 4, 2025: 0 viewsSaturday, July 5, 2025: 0 viewsSunday, July 6, 2025: 0 viewsMonday, July 7, 2025: 0 viewsTuesday, July 8, 2025: 0 viewsWednesday, July 9, 2025: 0 viewsThursday, July 10, 2025: 0 viewsFriday, July 11, 2025: 0 viewsSaturday, July 12, 2025: 0 viewsSunday, July 13, 2025: 0 viewsMonday, July 14, 2025: 0 viewsTuesday, July 15, 2025: 0 viewsWednesday, July 16, 2025: 0 viewsThursday, July 17, 2025: 0 viewsFriday, July 18, 2025: 0 viewsSaturday, July 19, 2025: 0 viewsSunday, July 20, 2025: 0 viewsMonday, July 21, 2025: 0 viewsTuesday, July 22, 2025: 0 viewsWednesday, July 23, 2025: 0 viewsThursday, July 24, 2025: 0 viewsFriday, July 25, 2025: 0 viewsSaturday, July 26, 2025: 0 viewsSunday, July 27, 2025: 0 viewsMonday, July 28, 2025: 0 viewsTuesday, July 29, 2025: 0 viewsWednesday, July 30, 2025: 0 viewsThursday, July 31, 2025: 0 viewsFriday, August 1, 2025: 0 viewsSaturday, August 2, 2025: 0 viewsSunday, August 3, 2025: 0 viewsMonday, August 4, 2025: 0 viewsTuesday, August 5, 2025: 0 viewsWednesday, August 6, 2025: 0 viewsThursday, August 7, 2025: 0 viewsFriday, August 8, 2025: 0 viewsSaturday, August 9, 2025: 0 viewsSunday, August 10, 2025: 0 viewsMonday, August 11, 2025: 1 viewTuesday, August 12, 2025: 0 viewsWednesday, August 13, 2025: 1 view
11 views in last 90 days
Last edited May 07, 2024
Created on Apr 28, 2021

An experiment in label placement based on Mike Bostock's US Population by State viz.

Unfortunately this technique doesn't really pan out. The technique here finds the point at which the distance between the top and the bottom of the area is greatest and uses that as the center point for the text label. However, this is not the ideal place for the center of the label. The ideal place for the center of the label is the point at which the area is "widest" along the direction of its center line. This is not a straightforward calculation of top - bottom at the same X coordinate, but rather is a more nuanced calculation that needs to be based on the angle of the center line.

Ideally we could borrow some techniques from computer graphics and do a "ray tracing" of sorts. We could compute, for each point along the center line, a vector that is orthogonal to the center line (90 degree angle), and see where it intersects the edge of the area. We could do this for both the top of the center line and bottom, then use the distance between the two intersection points as the "gap", and choose the largest gap as the place for the center of the label.

I'm not even sure the center line of (top + bottom) / 2 is the "correct" line along which to place the text. A medial axis might be the better shape, as it optimizes for distance to the edges of the area in all directions, rather than just vertically.

Also, the fixed Y offset does not play out well here. The Y offset should, again, be relative to the angle of the center line, not just vertical.

Additionally, this technique does not at all take into account the length of the text. An ideal technique would use the length of the text as well, such that the text would be optimized to fit in the largest part of the area that accommodates all of it. Otherwise we end up with parts of the text that may flow into narrow parts of the areas and not be contained within the bounds of the area.

This feels like an uncharted space in computational geometry. Maybe there is a solution out there yet to be discovered!

ISC Licensed