The x/y axis scale domain is bound to the x/y data domain and not the x/y scale domain

[flekschas]

While investigating #104 I noticed that the x/y domain of the axes are incorrectly bound to x/y data domain instead of the x/y scale domain. This is a problem as it makes the axis show the data domain while the x/y scale function might have re-scaled the data.

For instance, in the following the x data domain is [-10, 10] and the y data domain is [-1, 1]. To render the points on a common range, e.g., [-10, 10], we would pass (-10, 10) to x_scale and y_scale. Internally, the data is normalized to [0, 1] using the scale functions. By default, jscatter uses a linear scale that maps [min, max] linearly to [0, 1] but here we enforce the mapping to be [-10, 10] to [0, 1]. Now the issue is that on the JS kernel, the x/y axis would use the pre-normalized data domain (i.e., [-10, 10] for x and [-1, 1] for y). But this is incorrect. The x/y axis should use the post-normalized data domain, i.e., [-10, 10] for both: x and y.

The code below leads to the following issue:

import jscatter
import numpy as np
import pandas as pd

df = pd.DataFrame({
    "x": np.concatenate((np.linspace(start=-10, stop=10, num=50), np.linspace(start=-10, stop=10, num=50))),
    "y": np.concatenate((np.linspace(start=-1, stop=1, num=50), np.linspace(start=1, stop=-1, num=50))),
})

min_max = (df[['x', 'y']].min().min(), df[['x', 'y']].max().max())

scatter = jscatter.Scatter(
    data=df,
    x="x",
    y="y",
    x_scale=min_max,
    y_scale=min_max,
)

scatter.show()

The data is appropriated rendered at the common [-10, 10] range but the y axis reports [-0.1, 0.1]

By manually assigning the correct x/y domain, as follows, we get the correct y axis:

scatter = jscatter.Scatter(
    data=df,
    x="x",
    y="y",
    x_scale=common_scale,
    y_scale=common_scale,
)
scatter.widget.x_domain = common_scale
scatter.widget.y_domain = common_scale
scatter.show()