MatplotlibのチャートをHTMLページに埋め込む3つの方法

3 ways to embed Matplotlib charts in HTML pages.

データ可視化、Webアプリケーション

MatplotlibチャートをHTMLファイルにインポートする方法のチュートリアル

Image by Author

Pythonには、データ可視化を含むさまざまな操作を実行するための多くのライブラリが用意されています。しかし、Matplotlibを使用して構築したチャートをHTMLページに統合することは複雑な場合があります。最も簡単な解決策は、PNGやJPEGなどの静的な画像としてチャートをエクスポートし、それをHTMLページに統合することです。ただし、静的な画像を使用すると、元のチャートから可能な相互作用を失います。

別の解決策として、StreamlitやFlaskなどの外部フレームワークを使用することが考えられますが、いずれの場合もスタンドアロンのWebサーバーを設定して画像を提供する必要があります。この解決策はコストがかかりすぎる場合があります。私たちの町では、大げさになると「大砲で蠅を撃つ」と言います！

このブログ投稿では、MatplotlibチャートをHTMLページに埋め込むための3つの戦略を紹介します。3つの解決策は以下の通りです。

  • mpld3ライブラリを使用する
  • 画像をBase64でエンコードする
  • py-scriptを使用する。

各解決策を説明する前に、3つのケースを示すために使用するシナリオを説明しましょう。

シナリオ

Matplotlibを使用して正弦波を描画したいとします。以下は、チャートを生成するためのコードです。

import numpy as npimport matplotlib.pyplot as plt# Generate x from 0 to 2*pi with a step size of 0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoid')plt.show()

次の図は、生成されたチャートを示しています。

Image by Author

mpld3ライブラリを使用する

mpld3ライブラリは、データ可視化のための人気のあるJavascriptライブラリであるD3.jsとMatplotlibを組み合わせたものです。mpld3は、MatplotlibチャートをD3.jsでエクスポートするAPIを提供します。

まず、mpld3ライブラリをインストールします。

pip install mpld3

MatplotlibチャートをHTMLページとして保存するには、mtpld3が提供するsave_html()関数を使用します。

import mpld3import numpy as npimport matplotlib.pyplot as plt# Generate x from 0 to 2*pi with a step size of 0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)# Create a figure and axisfig, ax = plt.subplots()# Plot the sinusoidax.plot(x, y)# Set labels and titleax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoid')# Display the plotmpld3.save_html(fig,'fig.html')

save_html()関数は、Matplotlib図を入力として受け取り、図の名前を受け取ります。スクリプトはfig.htmlを生成します。ブラウザで開くと、次のチャートが表示されます。

Image by Author

チャートは、元のチャートと若干異なるため、元のグラフからD3.jsのバージョンに変換されていることを意味します。これは、mpld3ライブラリが元のグラフをD3.jsに変換することを意味します。ブラウザでHTMLファイルを検査すると、次の図に示すように、チャートがSVG画像であることがわかります。

Image by Author

生成したグラフを別のHTMLページに埋め込むには、生成されたファイルの内容を正確にコピーして、画像を含めたい位置に貼り付けます。手順の詳細については、前回のチュートリアルに従ってください。

画像をbase64でエンコードする

別の解決策として、このStack Overflowのスレッドで説明されているように、Matplotlib図をbase64画像としてエンコードすることができます。 Matplotlib画像を含むHTMLページを生成するためのコードは次のとおりです。

import base64from io import BytesIOimport numpy as npimport matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoid')tmpfile = BytesIO()fig.savefig(tmpfile, format='png')encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')html = '<html>' + '<img src=\'data:image/png;base64,{}\'>'.format(encoded) + '</html>'with open('fig2.html','w') as f:    f.write(html)

実際には、BytesIO()オブジェクトを生成し、PNG形式で図を保存します。次に、b64encode()関数を使用して画像をエンコードし、decode()関数を使用してデコードします。最後に、デコードされた画像をHTML文字列に追加して保存します。その結果、元のMatplotlib図が正確に得られます。

py-scriptを使用する

Py-scriptは、Pythonコードを直接HTMLページに含めることができるJavascriptライブラリです。 Py-scriptを使用するには、次のpy-scriptライブラリをHTMLヘッドに含める必要があります。

<head>    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />    <script defer src="https://pyscript.net/latest/pyscript.js"></script></head>

次に、必要なPythonライブラリをインストールするためにpy-configタグを使用します。

<py-config>  packages = ["matplotlib", "numpy"]</py-config>

最後に、py-scripタグを使用してPythonコードを含めます。

 <py-script>    import numpy as np    import matplotlib.pyplot as plt            x = np.arange(0, 2*np.pi, 0.1)    y = np.sin(x)    fig, ax = plt.subplots()    ax.plot(x, y)    ax.set_xlabel('x')    ax.set_ylabel('y')    ax.set_title('Sinusoid')    display(fig, target="graph-area", append=False)  </py-script>  <div id="graph-area"></div>

Matplotlib図を表示するには、Matplotlib図、プロットを含めたいHTMLdiv、およびappendのモダリティを受け取るdisplay()関数を使用します。

最終的な結果として、元の図とまったく同じ図が得られます。

まとめ

おめでとうございます！ MatplotlibチャートをHTMLページに含める3つの方法を学びました！ 3つの戦略は次のとおりです。

  • mpld3ライブラリを使用すると、MatplotlibチャートをD3.jsチャートに変換できます。
  • 画像をbase64でエンコードすると、MatplotlibチャートのPNG画像がbase64エンコードされた画像として生成され、HTMLページに含まれます。
  • py-scriptを使用すると、PythonコードをHTMLに直接組み込むことができます。

PythonグラフをHTMLウェブサイトに挿入する方法

towardsdatascience.com

Python Altairで地理的マップを構築する3つの方法

Python Altairで3つの異なるマップを構築するデータ可視化チュートリアル：コロプレスマップ、ドット密度マップ…

towardsdatascience.com

知らなかった3つの時系列データの可視化方法

PythonとAltairで時系列データを可視化するための実行可能なチュートリアル

towardsdatascience.com

コミュニケーションを取り合いましょう！

  • VoAGIでフォロー
  • ニュースレターのサインアップ
  • LinkedInでつながる
  • Twitterでフォロー
  • Facebookでフォロー
  • Githubでフォロー

We will continue to update VoAGI; if you have any questions or suggestions, please contact us!

Share:

Was this article helpful?

93 out of 132 found this helpful

Related articles

Discover more

Want to read more? Go here