<Python, matplotlib, mpld3> matplotlib を d3.js へ いいねー。

matplotlibのfigureをd3.jsへ変換してくれるすげーパッケージ。

MPLD3 — Bringing Matplotlib to the Browser

作った人は、Jake VanderPlasさん。

www.astro.washington.edu

いやー。　すごいねー。

ということで、サンプルコード。

import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import mpld3
from mpld3 import plugins

import seaborn; seaborn.set()

# Define some CSS to control our custom labels
css = """
table
{
  border-collapse: collapse;
}
th
{
  color: #ffffff;
  background-color:rgba(0, 0, 0, 0.8)
}
td
{
  background-color:rgba(208, 208, 208, 0.8)
}
table, th, td
{
  font-family:Calibri;
  border: 1px solid black;
  text-align: right;
}
"""

if __name__ == '__main__':
    df = pd.DataFrame(data=np.random.randn(20,5),columns=list('abcde'))

    fig, ax = plt.subplots()

    labels = []
    for i in df.a.items():
        label = df.ix[[i[0]], :].T
        label.columns = ['X {0}'.format(i)]
        labels.append(str(label.to_html()))

    points = ax.plot(df.a, df.b, 'o', mec='k', ms=15, mew=1, alpha=.6)

    ax.set_xlabel('a')
    ax.set_ylabel('b')
    ax.set_title('hoge')

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

    mpld3.save_html(fig, 'hoge.html')

結果のhoge.htmlは、下記。
すごいのは、カーソルあわせると、値のテーブルがでるんだよーん。　すごいねー。

<Python, matplotlib, mpld3> mpld3の出力結果（hoge.html） - ねこゆきのメモ