Interactive Scatter Plot

A scatter plot displays the relationship between two numerical variables using points on a Cartesian plane. Each point represents an observation, with its position determined by the values of two variables. Scatter plots are particularly useful for identifying patterns, correlations, clusters, and outliers in data.

The interactive scatter plots in ESMBenchmarkViz support tooltips, clickable points, diagnostic images, and export capabilities, making them ideal for exploring model performance, comparing datasets, and presenting results.

This notebook demonstrates the key features of interactive scatter plots with practical examples.

Detailed API description can be found here.

from bokeh.plotting import output_file, save, output_notebook
from ESMBenchmarkViz import scatter_plot

# Enable Bokeh output in the notebook
output_notebook()

Loading BokehJS ...

1: Basic usage

Example 1 show basic usage of the function.

x = [1, 2, 3]
y = [6, 7, 2]
names = ["Point A", "Point B", "Point C"]

# Create the plot layout
p = scatter_plot(x, y, names)

2: Custom styling

Example 2 demonstrates styling options including custom marker sizes and colors.

# Larger figure and custom title
p = scatter_plot(
    x, y, names,
    title="Custom Scatter Plot",
    width=700,
    height=500
)

3: Show Diagnostic figures in tooltips

Example 3 shows the default behavior when images are provided: images appear in tooltips on hover, but the interactive panel is not shown. This keeps the plot compact. The panel is hidden by default (show_image_panel=False).

images = [
 'images/model_sample1.png',
 'images/model_sample2.png',
 'images/model_sample3.png'
]

# Images appear in tooltips, but no panel (default: show_image_panel=False)
p = scatter_plot(
    x, y, names,
    images=images
)
# Images in tooltips only, no panel on the right

4: Show Diagnostic figures in tooltips with interactive panel

Example 4 expands Example 3 and shows how to display diagnostic images in both tooltips and an interactive panel. Set show_image_panel=True to display the interactive panel on the right with dropdown menu and navigation buttons.

x = [1, 2, 3]
y = [6, 7, 2]
names = ["Point A", "Point B", "Point C"]
images = [
    "images/image1.jpg",  # Example of a valid image URL
    None,                 # Example of no image (None value)
    "images/image3.jpg",  # Example of another valid image URL
]

p = scatter_plot(
    x, y, names,
    images=images,
    show_image_panel=True  # Show the interactive panel
)

5: Save to PNG

Example 5 demonstrates the save functionality. The toolbar now includes a save button for interactive saving, and you can also export static PNG files programmatically.

# The plot now has a save button in the toolbar (look for the download icon)
p = scatter_plot(x, y, names)

# For programmatic PNG export, use the static parameter:
# Uncomment the lines below to save as PNG
# p = scatter_plot(
#     x, y, names,
#     static=True,
#     static_filename='scatter_plot_example.png',
#     show_plot=False
# )
# print('PNG saved to: scatter_plot_example.png')

# Note: Static PNG export requires selenium and chromedriver

6: Practical usage example

Example 6 demonstrates a practical use case with realistic model performance data, including RMSE and correlation values with corresponding diagnostic plots.

x = [1.26, 0.93, 0.83]  # RMSE
y = [0.87, 0.91, 0.93]  # Correlation
names = ["ACCESS-CM2", "E3SM-1-0", "GFDL-CM4"]
images = [
    "images/model_sample1.png",
    "images/model_sample2.png",
    "images/model_sample3.png",
]

# Create the plot layout
p = scatter_plot(x, y, names, images=images, width=460, height=600, show_image_panel=True)

7: Save to HTML

# set output to static HTML file
output_file(filename="interactive_scatter_plot.html", title="Interactive Scatter Plot")

# save the results to a file
save(p)

# Result: [`interactive_scatter_plot.html`](interactive_scatter_plot.html)

'/Users/lee1043/Documents/Research/git/ESMBenchmarkViz/docs/examples/interactive_scatter_plot.html'