The Plotly scatter plot cannot be overlayed with boxplot

📊 Plotly Python
1

I need help making the box plot appear with a lower alpha to show the data quartiles along with the data points. This is what I have:

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

# Define colors for score groups
color_map = {
    '0.9-1.0': '#27ae60',   # Dark Green
    '0.8-0.9': "#0dd8ce",   # Teal
    '0.7-0.8': "#eacf02",   # Yellow
    '0.5-0.7': "#dc7602",   # Orange
    '0.0-0.5': "#da4636",   # Red
    '<0.0': '#95a5a6'       # Gray
}

# Define the ORDER for legend (high to low)
group_order = ['0.9-1.0', '0.8-0.9', '0.7-0.8', '0.5-0.7', '0.0-0.5', '<0.0']

# Create figure
fig = go.Figure()

# Add boxplot
fig.add_trace(go.Box(
    x=[0], # Set x to a numerical value to align with jitter
    y=df['score'],
    name='',
    boxmean=False,
    marker=dict(color='lightblue', opacity=0.8),
    line=dict(color='gray'),
    fillcolor='lightblue',
    opacity=0.8,
    width=0.5,
    showlegend=False,
    hoverinfo='skip'
))

# Calculate quartiles for the red box
q3 = df['score'].quantile(0.75)
max_val = df['score'].max()
center_y = q3 + (max_val - q3) / 2

# Add red rectangle for top 25%
fig.add_shape(
    type="rect",
    x0=-0.25, x1=0.25,
    y0=q3, y1=max_val,
    line=dict(color="red", width=2),
    fillcolor="rgba(255, 0, 0, 0)",
    opacity=0.3
)

# Add "Top 25%" label
fig.add_annotation(
    x=0.35, y=center_y,
    text="Top 25%",
    showarrow=False,
    font=dict(color="red", size=11, family="Arial Black"),
    xanchor="left"
)

# Add colored data points with jitter
np.random.seed(42)

for group in group_order:
    if group in df['score_group'].values:
        mask = df['score_group'] == group
        group_df = df[mask].reset_index(drop=True)

        # Generate jitter for the current group only
        jitter = np.random.normal(0, 0.06, size=len(group_df))
        hover_data = []
        hover_template = ''

        if 'full_name' in df.columns:
            hover_data.append(group_df['full_name'])
            hover_template = '<b>%{customdata[0]}</b><br>'

        hover_template += '<extra></extra>'

        fig.add_trace(go.Scatter(
            x=jitter,
            y=group_df['score'],
            mode='markers',
            name=group,
            marker=dict(
                size=12,
                color=color_map[group],
                line=dict(color='white', width=1)
            ),
            customdata=np.column_stack(hover_data) if hover_data else None,
            hovertemplate=hover_template if hover_data else 'Match Score: %{y:.2f}<br><extra></extra>'
        ))

# Update layout
fig.update_layout(
    title=dict(
        text='Boxplot with Score-Range-Colored Data Points',
        font=dict(size=14, family="Arial Black")
    ),
    yaxis=dict(
        title='Cosine Similarity Score',
        range=[-1, 1.08],
        gridcolor='rgba(128, 128, 128, 0.3)'
    ),
    xaxis=dict(
        range=[-0.6, 0.6],
        showticklabels=False,
        showgrid=False
    ),
    legend=dict(
        title='Score Range',
        x=1.02, # Moved legend outside
        y=0.98,
        xanchor='left', # Anchor to the left
        bgcolor='rgba(255, 255, 255, 0.8)',
        bordercolor='black',
        borderwidth=1
    ),
    plot_bgcolor='white',
    width=800,
    height=600
)

# Add reference line at 0 if data includes negative values
if df['score'].min() < 0:
    fig.add_hline(
        y=0,
        line_dash="dash",
        line_color="red",
        opacity=0.3,
        line_width=1
    )

# Save to HTML file
# fig.write_html("match_scores_boxplot.html")
print("Chart saved to match_scores_boxplot.html")

# Optionally also show it now
fig.show()

image
image1649×1230 101 KB