add ticks option to axes

mikima commented 3 years ago

We could expose the ticks value, see https://observablehq.com/@d3/axis-ticks

mikima commented 3 years ago

nice solution is to use

.tickValues(xScale.ticks(1).concat(xScale.domain()))

see https://stackoverflow.com/a/21767045/2871191

mikima commented 3 years ago

a possible solution is to add the ability to override the automatic settings and set manually the amount of ticks. There are few issues (below the video)

https://user-images.githubusercontent.com/907536/115743440-f91dd780-a391-11eb-85ae-23d985e7a0e5.mp4

Issues (@giorgiouboldi feedbacks are welcome):

d3 handles ticks in a particular way, trying to find the best gap between values (e.g. multiples of 2 or 5). Therefore there is no way to tell d3 the exact number of ticks, rather you can define a target value. In the video you can see that when the value is set to 2, actually three ticks are shown. I don't know how to make this clear to the user.
for the same reason, it's not always the case that the first and last value are shown. We can add a flag, as in the video, to force d3 to show the initial/end value. in this case they would be added to the target value set by the user. e.g. if you set 1 tick + min/max value you will get at least three ticks. Is this weird or somehow expected?

giorgiouboldi commented 3 years ago

Very very nice. I understand that in some cases the input and the result are not clear but it's quite difficult to think a different way to do it. There is nothing made especially for dates so that you can select the unit (days,months,years,etc)?

mikima commented 3 years ago

no it's not possible (in a simple way) to define the unit for dates. It's possible to provide the array of values you want to show on the axis, but i think it would become too complex.

Does it make sense to put these options in an "Axes" group as in the video?

rawgraphs / rawgraphs-charts

add ticks option to axes #73