Pass count to `nice`

Question

Pass count to `nice`

techniq opened this issue 2 years ago · 9 comments

It would be helpful if you could pass the tick count to yNice (et. al) instead of only a boolean and it would get set in createScale().

So we would still support...

<LayerCake yNice />

...which would call .nice()

but also support...

<LayerCake yNice={4} />

...which would call .nice(4)

I created this REPL to demonstrate the flexibility of passing the count to nice.

Answer 1 · 2022-09-28T14:52:45.000Z

Also I was struggling to use yPadding to add some extra pixels to the scale (account for labels above the data point) but I'll open a separate issue once I've identified the root issue (or find out I'm doing something wrong :) ).

Answer 2 · 2022-09-28T15:24:26.000Z

Ah yes good idea. I didn't realize you could pass a number to nice. That sounds like a good change. Thanks!

Answer 3 · 2022-09-28T16:37:03.000Z

@mhkeller I'm always struggling with getting the domain to round/nice as I want, so finding this helped :), although I wished there was a better "round to the closest next tick".

For example, I would want the domain to nice to 300 but currently it goes to 260. You can see the results of nice() (and with an explicit count) in this REPL but I hate having to provide an explicit count (as you don't always know how many will be rendered, at least from my understanding).

Answer 4 · 2022-09-28T16:43:05.000Z

Actually I forgot I explicit set ticks to a default of 4 which if I wasn't, it would produce these ticks.

I always thought the default number of ticks was too high, and thus, after the change requested here, I can pass yTicks={4} and all will be good :). It's always interesting that the tick count is used more as a "suggestion" than exact number (as the example above has 6 ticks even though 4 was set) but this makes sure the ticks land on nice "round" values (2, 5, 10, 100, etc).

I still need to figure out yPadding not working in my cases (to account for the label above the bar), but that's for another day.

Answer 5 · 2022-09-28T17:29:52.000Z

yea ticks are definitely tough! D3 is a little mysterious in how it calculates them. I often end up supplying a list of exact values, especially for mobile and such. Four ticks is the default in my example components no? https://layercake.graphics/components/AxisY.svelte. I'll keep this issue open to track changing the argument type to the nice prop. If you sort out the padding issue, feel free to open another issue.

Answer 6 · 2022-09-28T17:45:51.000Z

You default to 4 as well (maybe where I got the idea) :). I also support taking a function which takes in the scale, which is useful to calculate the ticks based on the domain min/max (time series particularly).

<AxisX ticks={(scale) => getMinorTicks(scale.domain()[0], scale.domain()[1])} />

Answer 7 · 2022-10-02T18:02:39.000Z

@mhkeller if you haven't started this yet, I might be able to send you a PR tonight (or at least this week).

Answer 8 · 2022-10-02T19:42:05.000Z

@techniq go for it altho if you had a second, i thought this could be a higher priority: #100

Answer 9 · 2022-10-02T19:53:40.000Z

@mhkeller I've already started the nice change, and tbh, I haven't used WebGL myself (yet) :).

I'm looking to use the yNice={4} on a few visuals already so hoping to get it available soon. I should have the PR available soon (although need to leave shortly).