✨ (grapher) improve SVG output for manual manipulation

sophiamersmann commented 1 month ago

Resolves #3607

Adds labels to SVG groups and elements for more intuitive manual inspection and manipulation.

Figma displays an element's ID as its title. I researched if there is a way to customize this and show something else as an element's title, e.g. a data-name attribute or so, but I couldn't find anything. Since it's a bit odd to assign IDs to elements like that, I added a makeIdForHumanConsumption function that communicates that these IDs are for human inspection only and are not used in code, thus can be safely deleted.

I also made an effort to groups elements together, e.g. a tick's line and label is rendered into one group element.

PS: I also fixed this annoyance 👇🏻

Figma screenshot

sophiamersmann commented 1 month ago

#3621 👈
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 commented 1 month ago

Quick links (staging server): Site	Admin	Wizard

Login: ssh owid@staging-site-improve-for-figma

Site-screenshots: https://github.com/owid/site-screenshots/compare/improve-for-figma
SVG tester: https://github.com/owid/owid-grapher-svgs/compare/improve-for-figma

SVG tester:

Number of differences (default views): 4530 ([41995b](https://github.com/owid/owid-grapher-svgs/commit/41995bb7ff07f035bbd045581dca7dfb193a9cc7)) Number of differences (all views): 2744 ([b32081](https://github.com/owid/owid-grapher-svgs/commit/b32081e47b5cede87e8e35e6dd0a8c8456b1ab53))

Edited: 2024-05-27 12:11:52 UTC Execution time: 1.20 seconds

notion-workspace[bot] commented 1 month ago

Simplify Grapher’s SVG Output

owid / owid-grapher

✨ (grapher) improve SVG output for manual manipulation #3621