bencher plot y-axis is is not aligned with the grid

[jschwe]

It seems like only the ends of the y-axis are aligned with the grid of the plot. Would it be possible to change the spacing of the grid y-axis lines so that they align with the y-axis labels?

[epompeii]

@jschwe thank you for using Bencher and sorry things aren't working as you might expect.

Can you post a picture and if possible a link to the behavior you're experiencing?

I think the issue you are describing is happening when the y-axis is being scaled?

[jschwe]

I think you can see it on pretty much all pinned plots from servo.
I uploaded a screenshot for reference. As you can see on the y-axis, the top-most and the lower-end of the y-axis align with the grid, but all labels in-between don't align with the grid.

I think the issue you are describing is happening when the y-axis is being scaled?

Is there any option to toggle here? I've been assuming that bencher autoscales the y-axis to make things fit and look nicely - I haven't seen any option for changing the y-axis.

[epompeii]

Ah, thank you for the details @jschwe !

Yes, I can see how this is definitely a bit annoying.

In this case (and most of the Servo pinned plots, from what I can tell) this is not being caused by the y-axis being scaled.

What is happening here is that Bencher uses D3 to create the y-axis range and the number of y-axis ticks. D3 tries to select a range and a number of ticks that divides well while the number of horizontal grid lines is static.

In the screenshot, there are 10 ticks but 11 grid lines, hence the mismatch.

In the past, I have played around with trying to use a static number of ticks, but this lead to some very ugly and unreadable tick marks ( 33.33333333333333 etc).

I considered updating the number of grid lines to match the number of ticks, but this would not work:

1. In dual axis plots, where there happened to be a different number of ticks
2. In any log scaled plot, the ticks won't align with the horizontal grid lines

So I just opted to keep it simple. With that said though, I'm very open to a PR that makes the number of horizontal grid lines match the number of y-axis ticks when there is a single axis, linearly scaled plot.
That is, I'm open to contributions to make the Servo plots much prettier.

The D3 y-axis is created here:

bencher/services/console/src/components/console/perf/plot/line/LinePlot.tsx

Line 504 in 96f2403

const yScale = d3.scalePow().exponent(exponent).domain(domain).nice();