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

Problem with log scale #293

Open
lpatiny opened this issue Jan 30, 2022 · 9 comments · May be fixed by zakodium-oss/react-d3-utils#23
Open

Problem with log scale #293

lpatiny opened this issue Jan 30, 2022 · 9 comments · May be fixed by zakodium-oss/react-d3-utils#23
Labels

Comments

@lpatiny
Copy link
Contributor

lpatiny commented Jan 30, 2022

If you open the following example:

https://zakodium.github.io/react-plot/?path=/story/api-logaxis--axis-left-log-control

Towards the top of the vertical axis there is a crazy number of secondary ticks that creates this grey large line

image

@wadjih-bencheikh18 Could you investigate and try to solve this problem ?

@lpatiny lpatiny added the Wadjih label Jan 30, 2022
@targos
Copy link
Member

targos commented Jan 30, 2022

The number of secondary ticks should be the same between each power of 10

@wadjih-bencheikh18
Copy link
Member

The number of secondary ticks should be the same between each power of 10

i already mention that the number of secondary ticks is hard coded
so I think we need to specify the number of secondary ticks in each case

@stropitek
Copy link
Contributor

i already mention that the number of secondary ticks is hard coded

but that is not related to the bug right? if so let's fix the bug first and we can think of the api for configuring the number of secondary ticks after

@wadjih-bencheikh18
Copy link
Member

wadjih-bencheikh18 commented Feb 1, 2022

but that is not related to the bug right?

no i think it's related to the bug
we calculate secondary ticks using density
const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0;
const mainTicksDensity = range / primaryTicks.length;
const density = mainTicksDensity < 50 ? 5 : 10;
const secTicks = scale?.ticks(primaryTicks.length * density) || [];

@wadjih-bencheikh18
Copy link
Member

i realised that in react-d3-utils in logScale work on main and secondary ticks with this logic :
(the next examples scondary ticks of react-plot are disabled )
case 1:
image
case 2:
we have alot of data =>mainTickRatio=1 so the space will be not enough to draw scondary ticks so the result will be :
image
when we add react-plot scondary ticks to the last example :
image
normal result (we can simple work on secondary ticks density which is hardcoded in this version)

@wadjih-bencheikh18
Copy link
Member

so i think the solution is to fix useLogTicks in react-d3-utils then it will be easy to work on density here

@stropitek
Copy link
Contributor

image

Indeed I think that even if the value changes of more than 1 power of 10, there should still be only 10 secondary ticks between each main tick

To me the secondary ticks on a log scale are not actually that useful, except from making it very clear in one glance that the axis does not have a classic linear scale.

@wadjih-bencheikh18
Copy link
Member

except from making it very clear in one glance that the axis does not have a classic linear scale.

the best way to do it is to make useLogScale in react-d3-utils only give us main ticks so we can control secondary ticks in react-plot

@wadjih-bencheikh18
Copy link
Member

zakodium-oss/react-d3-utils#23 need to be merged in order to fix the problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants