Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ use 'nice' axis ticks for linear scales / TAS-795 #4404

Merged
merged 2 commits into from
Jan 23, 2025

Conversation

sophiamersmann
Copy link
Member

@sophiamersmann sophiamersmann commented Jan 8, 2025

Resolves #3978

See 3790bad 😅

Relying on d3's nice implementation sometimes leads to suboptimal results because d3 adds grid lines too eagerly (some examples below). That's why I ended up writing a custom 'nice' function for Grapher. It only adds an additional grid line if any data value exceeds the highest grid line by more than 25%.

Examples of d3.nice where grid lines are placed to eagerly

If any data value is just above a grid line, then showing an additional grid line 'squishes' the rest of the chart.

Screenshot 2025-01-09 at 11 55 45 Screenshot 2025-01-09 at 11 56 29

@owidbot
Copy link
Contributor

owidbot commented Jan 8, 2025

Quick links (staging server):

Site Dev Site Preview Admin Wizard Docs

Login: ssh owid@staging-site-nice-axis-ticks

SVG tester:

Number of differences (default views): 770 (d81997) ❌
Number of differences (all views): 352 (afa50b) ❌

Edited: 2025-01-22 16:05:19 UTC
Execution time: 1.32 seconds

@sophiamersmann sophiamersmann force-pushed the nice-axis-ticks branch 2 times, most recently from 5dc4d1c to 0a553e6 Compare January 8, 2025 13:47
@sophiamersmann sophiamersmann changed the title ✨ (line) use 'nice' axis ticks ✨ use 'nice' axis ticks for linear scales Jan 8, 2025
@sophiamersmann sophiamersmann added the staging-viz Let SVG tester fail silently in CI label Jan 8, 2025
@sophiamersmann sophiamersmann force-pushed the nice-axis-ticks branch 5 times, most recently from 3d2b603 to d6d2059 Compare January 10, 2025 14:03
@sophiamersmann sophiamersmann changed the title ✨ use 'nice' axis ticks for linear scales ✨ use 'nice' axis ticks for linear scales / TAS-795 Jan 10, 2025
Copy link

@sophiamersmann sophiamersmann force-pushed the nice-axis-ticks branch 8 times, most recently from 95887fb to 1b2911e Compare January 13, 2025 15:52
@sophiamersmann sophiamersmann marked this pull request as ready for review January 13, 2025 15:54
@sophiamersmann sophiamersmann marked this pull request as draft January 20, 2025 09:52
@sophiamersmann sophiamersmann force-pushed the nice-axis-ticks branch 2 times, most recently from 05bf774 to 7531258 Compare January 21, 2025 15:44
@sophiamersmann sophiamersmann marked this pull request as ready for review January 21, 2025 16:13
Copy link
Member

@marcelgerber marcelgerber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!
Should we enable this for even more chart types? Slope charts come to mind.

packages/@ourworldindata/grapher/src/axis/Axis.ts Outdated Show resolved Hide resolved
🚧 remember nice ticks
fine-tune
@sophiamersmann
Copy link
Member Author

ah yes, I forgot about slopes!

@sophiamersmann sophiamersmann merged commit b3851ff into master Jan 23, 2025
23 checks passed
@sophiamersmann sophiamersmann deleted the nice-axis-ticks branch January 23, 2025 08:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
staging-viz Let SVG tester fail silently in CI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Horizontal grid lines: adding these more frequently
3 participants