How to embed an interactive Matplotlib plot on a webpage?

To create an interactive plot on a webpage, we can use Bokeh, which generates HTML files with JavaScript interactivity. This allows users to pan, zoom, and interact with plots directly in their browser.

Installation and Setup

First, install Bokeh if you haven't already ?

pip install bokeh

Basic Interactive Plot Example

Here's how to create a simple interactive scatter plot ?

from bokeh.plotting import figure, show, output_file
import numpy as np

# Configure output to HTML file
output_file('interactive_plot.html')

# Generate sample data
x = np.random.random(100) * 100
y = np.random.random(100) * 100
colors = np.random.choice(['red', 'green', 'blue', 'orange'], 100)

# Create figure with tools
p = figure(title="Interactive Scatter Plot", 
           x_axis_label='X-axis', 
           y_axis_label='Y-axis',
           width=600, height=400)

# Add circle markers
p.circle(x, y, size=10, color=colors, alpha=0.6)

# Display the plot
show(p)

Adding Image to Interactive Plot

You can also embed images within interactive plots ?

from bokeh.plotting import figure, show, output_file

# Configure output file
output_file('image_plot.html')

# Create figure with specific ranges
p = figure(x_range=(0, 1), y_range=(0, 1), 
           title="Interactive Image Plot",
           width=600, height=400)

# Add image (requires local file or accessible URL)
p.image_url(url=['https://example.com/image.jpg'], 
           x=0, y=1, w=0.8, h=0.6)

# Display the plot
show(p)

Key Features

Interactive Bokeh plots provide several built-in tools ?

• Pan − Click and drag to move around the plot
• Zoom − Use mouse wheel or zoom tool to zoom in/out
• Reset − Return to original view
• Save − Download plot as PNG image
• Crosshair − Show coordinate crosshairs on hover

Customizing Interactivity

from bokeh.plotting import figure, show, output_file
from bokeh.models import HoverTool

output_file('custom_interactive.html')

# Sample data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]
labels = ['Point A', 'Point B', 'Point C', 'Point D', 'Point E']

# Create figure with custom tools
p = figure(title="Custom Interactive Plot", 
           tools="pan,wheel_zoom,box_zoom,reset,save")

# Add hover tool
hover = HoverTool(tooltips=[("Label", "@label"), ("(X,Y)", "($x, $y)")])
p.add_tools(hover)

# Add circle markers with labels
p.circle(x, y, size=15, label=labels, color='navy', alpha=0.5)

show(p)

Output

When you execute the code, Bokeh will ?

• Generate an HTML file with embedded JavaScript
• Open the plot in your default browser automatically
• Allow full interactivity including pan, zoom, and hover tooltips

Conclusion

Bokeh makes it easy to create interactive web-based plots from Python. The generated HTML files contain all necessary JavaScript for interactivity, making them perfect for sharing interactive visualizations without requiring Python installation.