search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

ResponsiveBar: NaN for height and y attribute if log as valueScale.type #1992

Closed marvinatgithub closed 2 years ago

marvinatgithub commented 2 years ago

Issue Given MyResponsiveBar and data from nivo.rocks/bar/ When changing valueScale.type to log Then bar/s next to the x-axis (in example below: bars representing "hot dog") are not visible (but expected)

nivo-bar-log-issue

To Reproduce

  1. Go to codesandbox.io/s/nivo-bar-log-issue-1epc21 and see bars representing "hot dog" are not visible

  2. Open Console and see:

    • Warning: Received NaN for the 'height' attribute. If this is expected, cast the value to a string.
    • Warning: Received NaN for the 'y' attribute. If this is expected, cast the value to a string.
    • Got NaN while animating: SpringValue

  3. Inspect invisible bars and see NaN as value of height and y attrs:

    <g transform="translate(17, 137)"><rect width="39" height="NaN" rx="0" ry="0" fill="#e8c1a0" stroke-width="0" stroke="rgb(131, 109, 90)" focusable="false" aria-label="hot dog: 59 in country: AD"></rect><text x="19.5" y="NaN" text-anchor="middle" dominant-baseline="central" fill-opacity="1" style="font-family: sans-serif; font-size: 11px; fill: rgb(131, 109, 90); pointer-events: none;">59</text></g>
tkonopka commented 2 years ago

Hi @marvinatgithub. As this is open, I'll comment to start a discussion.

Bar charts with log scales can be troublesome, and the NaNs and missing bars in this example are symptoms of that. (I can explain the reasons, if there is interest). But in practice, I would propose avoiding the trouble altogether by switching back to a linear scale, or using a different chart type.

If a dataset really requires a logarithmic scale, perhaps the swarmplot might be appropriate. In your example, you could have 'countries' to label swarms, and have the foodstuffs ('hot dot', 'burger', etc.) as the dots within the swarms. Admittedly, the current swarmplot has some limitations on labeling individual points.

Alternatively, consider using a custom function to draw the data points, e.g. with circles instead of bars. For an example, see #1987.

marvinatgithub commented 2 years ago

Thanks for your help and linking #1987 @tkonopka. I will close #1992.

For the sake of clarity for others: @nivo/swarmplot@0.79.1 valueScale is limited to ScaleLinearSpec | ScaleTimeSpec as far as I know.

tkonopka commented 2 years ago

Thanks for pointing out the typing on valueScale in the swarmplot, @marvinatgithub. Indeed, that is restricted and setting the valueScale type to 'log' will produce warnings/messages. But that seems to be a glitch in the typing. The package will produce a reasonable chart, so worth considering instead of custom coding if the swarm-like layout suits your application.