✨ (grapher) improve line legend algorithm

[sophiamersmann]

Resolves #3351

Current implementation

The current implementation uses two different placing algorithms:

1. If all labels fit into the space, then labels are placed in a non-overlapping way using connector lines
2. If the labels don't fit into the available space, then labels are simply placed at their y-value and overlapping labels are greyed out and rendered into the background

Updated implementation

I got rid of the second placing algorithm. Instead, if not all labels fit into the available space, then we drop as many labels as necessary, and then the first placing algorithm is used to compute the positions of the remaining labels.

How labels are dropped

The default strategy, used by line charts, tries to pick labels in a balanced way so that they're roughly at equidistance from each other. Stacked area charts overwrite this behaviour and drop labels based on the area size.

The default strategy works like this: Given a set of placed labels and a set of candidates, for each candidate, we find the two closest already placed labels, one to each side, and calculate a score based on the available space between the two placed labels (the bigger, the better) and the candidate's distance to the midpoint (the smaller, the better). We then pick the candidate with the best score that fits into the available space.

Future Work

Lines/Areas that don't get labelled should show a label on demand (previously, you could hover over the grayed-out background labels). Stacked area charts highlight the currently hovered area in the tooltip – we could do something similar for line charts. To be worked on...

Before	After

[sophiamersmann]

• ✨ (line labels) increase height of the line legend / TAS-507 #3658
• ✨ (grapher) improve line legend algorithm #3647 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-line-legend-algo

• Site-screenshots: https://github.com/owid/site-screenshots/compare/line-legend-algo
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/line-legend-algo

SVG tester:

Number of differences (default views): 5 (9f2da8) ❌
Number of differences (all views): 0 ✅

Edited: 2024-06-11 09:33:45 UTC
Execution time: 1.35 seconds

[notion-workspace]

Improve line legend algorithm

[marcelgerber]

Great idea!
I had a performance comment, and also found a case where this errors, but otherwise this is great, and certainly a nice improvement 🙌🏻

[sophiamersmann]

Merge activity

• Jun 11, 5:48 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
• Jun 11, 5:49 AM EDT: @sophiamersmann merged this pull request with Graphite.