Bringing Matplotlib to the Browser

Image with Mouse Position

«  Linked Brushing Example   ::   Contents   ::   Defining a Custom Plugin  »

Image with Mouse Position

This example shows how mpld3 can display images using plt.imshow(). It also includes the mouse position plugin, so that the mouse coordinates are displayed in the lower-right corner.

Python source code: [download source: mouse_position.py]

import matplotlib.pyplot as plt
import numpy as np

import mpld3
from mpld3 import plugins

fig, ax = plt.subplots()

x = np.linspace(-2, 2, 20)
y = x[:, None]
X = np.zeros((20, 20, 4))

X[:, :, 0] = np.exp(- (x - 1) ** 2 - (y) ** 2)
X[:, :, 1] = np.exp(- (x + 0.71) ** 2 - (y - 0.71) ** 2)
X[:, :, 2] = np.exp(- (x + 0.71) ** 2 - (y + 0.71) ** 2)
X[:, :, 3] = np.exp(-0.25 * (x ** 2 + y ** 2))

im = ax.imshow(X, extent=(10, 20, 10, 20),
               origin='lower', zorder=1, interpolation='nearest')
fig.colorbar(im, ax=ax)

ax.set_title('An Image', size=20)

plugins.connect(fig, plugins.MousePosition(fontsize=14))

mpld3.show()

«  Linked Brushing Example   ::   Contents   ::   Defining a Custom Plugin  »