color-js / elements

WIP
13 stars 1 forks source link

[color-chart] How should a chart look if the underlying `<color-scale>` has only one color? #128

Open DmitrySharabin opened 3 weeks ago

DmitrySharabin commented 3 weeks ago

For now, it throws because the getAxis() function returns NaN for min, max, and steps when calculating the corresponding props for the X-axis.

I checked what Excel does when it gets only one data point. It looks like Excel calculates the range based on an ”assumption“ that the chart should look nice. If I understand correctly, it uses 1 as the X coord (if not explicitly specified). I suggest that the one data point will never be outside the range.

image

We can probably do something similar (for the range of X).

LeaVerou commented 3 weeks ago

Unlike Excel, we actually know what the domain for Y is here, so we could pick a certain slice of that (e.g. ±5% of the range). Not sure what a good X range would be. Any hardcoded range will fail in certain cases, e.g. if we pick [0, 1], what happens if x is -5 or 100? Perhaps a good heuristic might be using 0 as either a min or a max (for negative X) and then ±abs(x) for the other direction (so that the data point ends up in the middle).

If we don't have an X at all, 1 seems like a reasonable assumption. Tying into the other issue about getX(), I'd rather we pick a value that works more broadly for the default getX() (e.g. (c, i) => i + 1)