In [1]:
!date
Tue Jan 28 07:39:35 PST 2014

Demonstrate the new HTML tooltips in mpld3

In [2]:
%matplotlib inline
import matplotlib.pyplot as plt, pandas as pd, numpy as np

import mpld3, mpld3.plugins
mpld3.enable_notebook("//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js")
In [3]:
# define style

css = """
table
{
border-collapse: collapse;
}
th
{
color: #ffffff;
background-color: #000000;
}
td
{
background-color: #cccccc;
}
table, th, td
{
font-family:Arial, Helvetica, sans-serif;
border: 1px solid black;
text-align: right;
}
"""
In [4]:
# generate data

N = 50
df = pd.DataFrame(index=range(N))
df['x'] = np.random.randn(N)
df['y'] = np.random.randn(N)
df['z'] = np.random.randn(N)
In [5]:
# create label html

labels = []
for i in range(N):
    label = df.ix[[i], :].T
    label.columns = ['Row {0}'.format(i)]
    labels.append(str(np.round(label, 3).to_html()))  # .to_html() is unicode, so make leading 'u' go away with str()
In [6]:
fig, ax = plt.subplots()
points = ax.plot(df.x, df.y, 'o', color='k', mec='w', ms=15, mew=1, alpha=.9)

tooltip = mpld3.plugins.PointHTMLTooltip(points[0], labels, voffset=10, hoffset=10, css=css)
mpld3.plugins.connect(fig, tooltip)

Simple.