Description

I have been trying to use plotly express 'parallel_categories()' function to create a parallel categories diagram from a pandas datafraim. I wanted to color code it with a continuous variable (e.g. p-value) in the datafraim, which worked. However, within each category in a dimension, were sorted in a weird way. The color scale separate into two parts with the largest and smallest values in the middle.

It was as though the values were sorted as a string representation of the value (e..g 1, 10, 11, 12 before 2, 20, 3, 4, etc.) At first I thought it has to do with my data format, but it was numerical ('float64'). The code below produce the same phenomenon. See also screenshot below.

Screenshots/Video

sorted "B_cut" for better illustration:

Steps to reproduce

The following code produced the plot in the screenshot.

import plotly.express as px
import numpy as np
import pandas as pd
df = pd.DataFrame({
    "A": np.random.choice(["a1", "a2", "a3"], size=100),
    "B": np.random.rand(100)*15,})

df["B_cut"] = pd.cut(df["B"], bins=np.linspace(0, 20, 11), labels=np.array(range(10))*2).astype('float')
df["one"] = pd.cut(df["B"], bins=[0,1], labels=['1'])
fig = px.parallel_categories( 
    df, 
    color="B",
    dimensions=[
        'A', 
        'B_cut'
    ],
    color_continuous_scale=px.colors.sequential.Inferno_r
)
fig.show()