Plotly dot plot - how to group multiple columns

[lt2412]

I feel like I’m going crazy trying to figure this out. Supposedly I have this data frame, how can I create a dot plot similar to the graph below? (just the dots and not the bars)

ProbesetID	bone marrow	bone marrow	kidney	kidney	heart	heart	heart	lungs	spleen
AFFX-r2-Bs-dap-3_at	120	250	221	150	332	242	400	130	432

Notice how the dots are in the same x-axis if the columns have the same name

enter image description here

I tried plotly dot plot but haven’t been able to somehow group the columns together.

This is my code

import plotly.express as px
import plotly.graph_objects as go
  
# initialize list of lists 
data = [['ajfhf',120 , 250, 221 , 150 , 332, 242, 400, 130, 432]] 
  
# Create the pandas DataFrame 
df = pd.DataFrame(data, columns=['ProbeID', 'bone marrow' , 'bone marrow' ,'kidney' , 'kidney' ,'heart', 'heart' ,' heart' , 'lungs' ,'spleen']) 
cols = df.columns[1:]
print(cols)
fig = go.Figure()  
for col in cols:
    fig.add_trace(go.Scatter(
        y=df[col],
        name=col
    ))

# fig = px.scatter(df, y="nation", x="count", color="medal", symbol="medal")
fig.update_traces(marker_size=10)
fig.show()

Here is what it looked like. Notice how they’re all stacked on 1 column and some dots are missing. In the go.Scatter part, I had to leave out x axis because I wasn’t sure what to use there.

enter image description here

[hoatran]

I think you could use melt in pandas to reorder your dataframe then use new dataframe to make your graph. Something as below:

import plotly.express as px
import plotly.graph_objects as go

# initialize list of lists 
data = [['ajfhf',120 , 250, 221 , 150 , 332, 242, 400, 130, 432]] 
  
# Create the pandas DataFrame 
df = pd.DataFrame(data, columns=['ProbeID', 'bone marrow' , 'bone marrow' ,'kidney' , 'kidney' ,'heart', 'heart' ,' heart' , 'lungs' ,'spleen']) 
cols = df.columns[1:]
df2 = df.melt(id_vars='ProbeID', value_vars = cols)
fig = px.scatter(df2, x="variable", y="value", color='variable')
fig.update_traces(marker_size=10)
fig.show()

[lt2412]

@hoatran So I ended up with something similar to your graph. I got rid of the for loop, and assigned the column names to x, and values to y. But thanks to you I discovered the melt method. I’ll look more into this because I do need to group the tissues into different tissue groups.

I do have a follow-up question if you don’t mind. Is there a way for plotly to distinctly show grouped columns? The graph below is what I’m trying to achieve. Notice how the tissues in each tissue group are wrapped inside a box and there’s spacing between them.

[hoatran]

I’m not sure if I understand the question correctly but it seems like subplots with shared axis. Did you try it before?

[lt2412]

Kinda yeah. I highlighted the parts I meant below.

I read the subplot documentation (especially this part Subplots in Python (plotly.com) ) but it seems like subplots are each own separate entity. In the graph I shared, the whole thing seems like a big plot, or at least everything inside looks connected; instead of separate entities like subplots.

[hoatran]

Sorry for late response, it’s weekend and I did not use PC. I think you can do something as below:

• Use fig.update_xaxes(showline=True, linewidth=1, linecolor='black', mirror=True) to make border for each subplot.
• Use fig.update_layout(xaxis_showticklabels=False, xaxis2_showticklabels=True) to show the second x_axes only.

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=2, cols=1, vertical_spacing = 0.05)

fig.add_trace(go.Bar(
    x=['a', 'b', 'c'],
    y=[1000, 1100, 1200]),row=1, col=1)

fig.add_trace(go.Scatter(
    x=['a', 'b', 'c'],
    y=[100, 110, 120], mode='markers'), row=2, col=1)

fig.update_xaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.update_yaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.update_layout(xaxis_showticklabels=False, xaxis2_showticklabels=True)
fig.update_layout(height=600, width=600, title_text="Stacked Subplots")
fig.show()

Hope this help.

[lt2412]

Hey no worries, I really appreciate your help. Your comment above helps me figure out how to make the bar chart subplot. I’m still not sure how to group the tissues together like in the screenshot I sent (For example: Heart is part of cardiovascular system, and Osteoclast is part of Connective tissue; so there are some spacing between them. The same goes for every tissue in Digestive system: Liver, stomach, large intestines…). But I’ll see what I can do