PyscriptでMatplotlib
久しぶりにPython関係の記事を書いてみようと思います。
というのも、非常に面白いものを見つけたからです。
それは「Pyscript」です。
もうご存知のかたも多いかと思います。
HTML内にPythonコードを書いて、実行させるという非常に興味深いものです。
とはいえ、実は知ってから数日は動けませんでした。
なにせネガティブシンカーなので。
「えーどうせ難しいんでしょう」とか。
ところがある動画に出会いました。
Python Vtuberさぶーさんが紹介していた動画です。
見た感想、「あれ、簡単そう」
というので早速実行してみました。
まずPyscriptのサイトはこちらになります。
demo も
こちらにあるので、いろいろ試せそうです。
まずはMatplotlibから試してみることにしました。
demoと同じでは面白くないので、Matplotlibのサイトからこちらもdemoを参考にしました。
こちら、3D surface plot を試してみることにしました。
とはいえ、やったことは非常に簡単。
Pyscriptのdemoに、Matplotlibのdemoを入れ込んだだけです。
<html>
<head>
<title>Matplotlib</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
- numpy
</py-env>
</head>
<body>
<div id="mpl"></div>
<py-script output="mpl">
import matplotlib.pyplot as plt
from matplotlib import cm
from matplotlib.ticker import LinearLocator
import numpy as np
fig, ax = plt.subplots(subplot_kw={"projection": "3d"})
# Make data.
X = np.arange(-5, 5, 0.25)
Y = np.arange(-5, 5, 0.25)
X, Y = np.meshgrid(X, Y)
R = np.sqrt(X**2 + Y**2)
Z = np.sin(R)
# Plot the surface.
surf = ax.plot_surface(X, Y, Z, cmap=cm.coolwarm,
linewidth=0, antialiased=False)
# Customize the z axis.
ax.set_zlim(-1.01, 1.01)
ax.zaxis.set_major_locator(LinearLocator(10))
# A StrMethodFormatter is used automatically
ax.zaxis.set_major_formatter('{x:.02f}')
# Add a color bar which maps values to colors.
fig.colorbar(surf, shrink=0.5, aspect=5)
fig
</py-script>
</body>
</html>
で表示された画像がタイトル画像にもなっている、3D surface plot (color map)の画像です。
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>で、Pyscriptを使えるようにJSを読み込んで、
py-scriptタグ内でPythonコード（今回はMatplotlibのdemoコード）を入れておわりです。
必要なライブラリは、py-envタグ内に書いておきます。
意外に簡単にここまで出来てしまいました。
py-scriptタグ内を書き換えればいいだけですので、
よかったら皆様も試してみてください。
py-envタグで使えるライブラリは Pyodide のサイトから調べることができます。
すべてのライブラリが使えるわけでなないようです。
それでも、numpy, pandas, matplotlib, scipy, scikit-learnが使えるので、いろいろ試せそうですね。