How to highlight all the values from a group on hover in Python Plotly?

Plotly enables you to group data points and highlight all values from a group when hovering over any point in that group. This is achieved using the groupby transform feature, which creates interactive visualizations with enhanced hover capabilities.

Understanding Group Highlighting

When you hover over any data point in a group, Plotly automatically highlights all related points in the same group. This feature uses the transforms property with groupby type to organize data into distinct visual groups.

Step-by-Step Implementation

Step 1: Import Required Module

Import plotly.io for creating and displaying interactive plots ?

import plotly.io as pio

Step 2: Prepare Sample Data

Create data lists that will be used for grouping and visualization ?

fonts = ['Arial', 'Arial', 'Courier', 'Arial', 'Courier', 'Arial']
shade = ['bold', 'bold', 'italic', 'italic', 'bold', 'bold']
score = [1, 2, 3, 4, 5, 6]

Step 3: Configure Grouped Scatter Plot

Create a scatter plot with groupby transforms and custom styles for each group ?

data = [dict(
    type='scatter',
    x=shade,
    y=score,
    mode='markers',
    transforms=[dict(
        type='groupby',
        groups=fonts,
        styles=[
            dict(target='Arial', value=dict(marker=dict(color='blue'))),
            dict(target='Courier', value=dict(marker=dict(color='red'))),
        ]
    )]
)]

Step 4: Display the Interactive Plot

Generate and display the figure with group highlighting enabled ?

fig_dict = dict(data=data)
pio.show(fig_dict, validate=False)

Complete Example

Here's the complete code to create a grouped scatter plot with hover highlighting ?

import plotly.io as pio

# Sample data for demonstration
fonts = ['Arial', 'Arial', 'Courier', 'Arial', 'Courier', 'Arial']
shade = ['bold', 'bold', 'italic', 'italic', 'bold', 'bold']
score = [1, 2, 3, 4, 5, 6]

# Create grouped scatter plot
data = [dict(
    type='scatter',
    x=shade,
    y=score,
    mode='markers',
    transforms=[dict(
        type='groupby',
        groups=fonts,
        styles=[
            dict(target='Arial', value=dict(marker=dict(color='blue'))),
            dict(target='Courier', value=dict(marker=dict(color='red')))
        ]
    )]
)]

# Display the interactive plot
fig_dict = dict(data=data)
pio.show(fig_dict, validate=False)

Key Features

The resulting visualization will have the following interactive features:

• Group Highlighting: Hovering over any point highlights all points in the same font group
• Color Coding: Arial font points appear in blue, Courier font points in red
• Interactive Legend: Click legend items to show/hide specific groups
• Hover Information: Displays detailed information about each data point

Conclusion

Plotly's groupby transform with hover highlighting creates intuitive data visualizations where users can easily identify related data points. This feature is particularly useful for analyzing categorical data and understanding group relationships in scatter plots.