Need Help In Creating an interactive Scatter Plot - Emmanuel Katto Uganda

Dash R, MATLAB, Julia Dash for MATLAB®
1

Hi All, I am Emmanuel Katto. I have a dataset with x and y coordinates for several points. I want to create a scatter plot where hovering over each point displays a text box with additional information about the point, such as its ID or a brief description. Can someone help me how can I create this interactive scatter?

Thanks!
Emmanuel Katto

1 Like
2

Does the example ‘Setting size and color with column names’ at this link do the kind of thing you want?

3

Customized hover info can be a little tricky. I use numpy np.stack for the customdata, and then include a hovertemplate as a plot parameter. If you can share a data frame sample with x, y, and the parameters you want to show in the hover info, I can show you the code to make it work.

4

Hi @emmanuelkatto,

Here is an example of customized hover info, used for plotting major league base ball wins & losses of National League West teams. If you have any questions or care to post a code sample I can help you with this task. Hover if one of my favorite features of plotly, so I do this frequently.

# Custom Hover Example - August 28, 2024
# MLB National League West baseball standings

import pandas as pd
import plotly.express as px
import numpy as np
df = pd.DataFrame(
    { 
        'TEAM'        : ['Dodgers', 'Diamondback', 'Padres', 'Giants', 'Rockies'],
        'LOCATION'    : ['Los Angeles', 'Arizona', 'San Diego', 'San Francisco', 'Colorado'],
        'WINS'        :  [78, 75, 76, 67, 49],
        'LOSSES'      : [54, 57, 58, 66, 84],
        'MANAGER'     : ['Roberts','Lovullo','Shildt','Melvin','Black'],
        'DES. HITTER' :  ['Ohtani','Pederson','Cruz','Rodriguez','Blackmon'],
        'TOP PITCHER' :  ['Yamamoto','Gallen','Musgrove','Webb','Quantrill']
    }
)
df['GAMES'] = df['WINS'] + df['LOSSES']
df['PCT'] = df['WINS'] / df['GAMES']
df['PCT'] = df['PCT'].apply(lambda x: round(x, 3))
fig = px.scatter(
    df,
    'LOSSES',
    'WINS',
)
fig.update_layout(
    template = 'plotly_white',
    width=500,
    height=300,
    title='MLB National League West, August 28, 2024'
)
customdata = np.stack(
    [
        df['LOCATION'],      # customdata[0]
        df['TEAM'],          # customdata[1]
        df['WINS'],          # customdata[2]
        df['LOSSES'],        # customdata[3]
        df['PCT'],           # customdata[4]
        df['MANAGER'],       # customdata[5]
        df['DES. HITTER'],   # customdata[6] 
        df['TOP PITCHER']    # customdata[7]
    ], 
    axis=-1
)
hovertemplate = (
    '<b>%{customdata[0]} %{customdata[1]}</b> (%{customdata[2]} - %{customdata[3]}) %{customdata[4]:.3f} PCT<br>' + 
    '<b>Manager:</b> %{customdata[5]} <br>' + 
    '<b>Designated Hitter:</b> %{customdata[6]} <br>' +  
    '<b>Top Pitcher:</b> %{customdata[7]} <br>' +  
    '<extra></extra>')

fig.update_traces(customdata=customdata, hovertemplate=hovertemplate)
print(df.to_string(index=False))
fig.write_html('MLB_WEST.html')
fig.show()
1 Like