Change trace order in parallel plots with plotly

📊 Plotly Python
1

I have a question about plotly parallel_coordinates function.

To reproduce my case use this code:

import numpy as np
import pandas as pd
import plotly.express as px

np.random.seed(100)
data = np.random.random([1000,2])
data_df = pd.DataFrame(data, columns=["data1","data2"])
fig_parallel = px.parallel_coordinates(data_df,
                                       color="data2",
                                       dimensions=["data1","data2"])
fig_parallel.write_html('test.html')

You will get this image: enter image description here

The color-bar correspond to the last axis ( data2).

We can notice that the traces going to the top of the last axis (the yellow ones) are in front of the plot.

What I want to have is the same plot but with the blue traces in the front of the image to have a better visualisation (bottom data are my data of interest).

Thank you in advance to any one who may be able to give me a solution ^^

2

Welcome to the community!

I didn’t find a solution that simple changes which traces are in the front and which are in the back. But there might be another option - by setting a constraintrange on the go.Parcoords, you can limit which lines are initially displayed.

Your new code would look like this:

import numpy as np
import pandas as pd
import plotly.graph_objects as go

np.random.seed(100)
data = np.random.random([1000, 2])
data_df = pd.DataFrame(data, columns=["data1", "data2"])

fig = go.Figure(
    data=go.Parcoords(
        line=dict(
            color=data_df["data2"],
            colorscale="plasma",
            showscale=True,
        ),
        dimensions=list(
            [
                dict(
                    range=[0, 1],
                    values=data_df["data1"],
                    label="Data 1"
                ),
                dict(
                    range=[0, 1],
                    constraintrange=[0, 0.5],
                    values=data_df["data2"],
                    label="Data 2"
                ),
            ]
        )
    )
)

fig.show()

Result:

Parcoords
Parcoords1255×1256 319 KB

3

Thank you very much for your answer.

It’s a solution but it’s not different from just doing it manually in the html file.
my need is really to have the lines going to lower values that are in the foreground.

an idea was to use
fig.update_traces(line_reversescale=True)
but it just reverses the colours. So a similar but working idea would be to literally reverse the axis (display the lower values in the top) the problem is that I do not know a method to do it.

4

Oh that’s quite easy - see my code above. Just change the range property from [0, 1] to [1, 0].

5

Thank you very much.
Unfortunately, it does not work the blue lines are still behind the yellow ones. :smiling_face_with_tear: