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.

Sign up for GitHub

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

Jump to bottom

Add new example of log scale #276

Open
lpatiny opened this issue Jan 26, 2022 · 7 comments · May be fixed by #277
Open

Add new example of log scale #276

lpatiny opened this issue Jan 26, 2022 · 7 comments · May be fixed by #277
Labels
Wadjih

Comments

@lpatiny
Copy link
Contributor

lpatiny commented Jan 26, 2022

Add one more example in the LogAxis story book section with on the vertical axis AND horizontal axis we go from 1e-10 to 1e10.

It seems that currently the way we display the values changes from scientific notation to normal notation and it does not look very pretty to me.

image

I would suggest that if we need to display one value as scientific notation all the values are in scientific notation.

@stropitek @targos What do you think about it ?

@wadjih-bencheikh18 You may already add the storybook and we should decide what we do.
@lpatiny lpatiny added the Wadjih label Jan 26, 2022
@targos
Copy link
Member

targos commented Jan 26, 2022 •
edited
Loading

It seems that currently the way we display the values changes from scientific notation to normal notation and it does not look very pretty to me.

This happens because the default tick label format function just converts the value to a string (value) => String(value) and that's what JavaScript does by default with numbers.

@wadjih-bencheikh18 wadjih-bencheikh18 linked a pull request Jan 26, 2022 that will close this issue
Open
@lpatiny
Copy link
Contributor Author

lpatiny commented Jan 27, 2022

Something to discuss. I guess d3 have some utilities to get the nice looking tick labels.

Otherwise I have prepare something and could add this utility somewhere and add testcases.

https://www.cheminfo.org/?viewURL=https%3A%2F%2Fcouch.cheminfo.org%2Fcheminfo-public%2Fd8a9dbe29aa3c0badcbe258112d7d837%2Fview.json&loadversion=true&fillsearch=Guess+number+formatting+for+axis

@lpatiny
Copy link
Contributor Author

lpatiny commented Jan 27, 2022

@wadjih-bencheikh18 Are you able to implement the number formatting from d3 as default formatter (similar with what you did for date) ?

https://observablehq.com/@d3/scale-ticks

@wadjih-bencheikh18
Copy link
Contributor

@wadjih-bencheikh18 Are you able to implement the number formatting from d3 as default formatter (similar with what you did for date) ?

https://observablehq.com/@d3/scale-ticks

In date format this option is in react-d3-utils
But yes we can do it in react-plot

@lpatiny
Copy link
Contributor Author

lpatiny commented Jan 30, 2022

@targos I have 2 questions here:

  • should it be limited to log scale ? We could also use the d3 formatter for linear axis and not only log axis
  • should it go to react-d3-utils ?

@targos
Copy link
Member

targos commented Jan 30, 2022

should it be limited to log scale ? We could also use the d3 formatter for linear axis and not only log axis

If it makes sense to use it for linear scales too, sure.

should it go to react-d3-utils ?

Yes

@wadjih-bencheikh18
Copy link
Contributor

  • should it go to react-d3-utils ?

yess fixing default tickFormat in react-d3-utils is better

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Wadjih
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: create more log axis examples wadjih-bencheikh18/react-plot
3 participants
@lpatiny @targos @wadjih-bencheikh18