WordPressブロガー向け Pythonで作るインタラクティブなグラフ

ブログやWeb運営をされている方、自身のサイトにデータやグラフを表示させたいと思ったことはありませんか？Excel等で作成したグラフを画像として貼り付けることは簡単ですが、グラフ中が示す詳細データを表示させるなど、伝えたい情報を全て盛り込むのは難しいですよね。

閲覧する側がグラフを拡大したり、マウスオーバーでデータを確認したりできる、インタラクティブ（対話型）なグラフだとシンプルなデザインでユーザーにより多くの情報を伝えることができます。今回はそのようなインタラクティブなグラフ作成方法、及びそれをWordpressのブログに挿入する方法をご紹介します。

スポンサーリンク

使用するツール、開発の流れ

今回使用するツールはPlotlyというオープンソースライブラリを使用します。このPlotlyは様々なプログラム言語に対応していますが、私はPythonを使って、このPlotlyを扱っています。今回ご紹介する方法もPythonを使ったものとなります。流れとしては以下の2ステップのみです。

PlotlyグラフをWordpressに掲載するまでの流れ
  • Step 1
    PythonでPlotlyライブラリを読み込み、グラフコードを作成する

  • Step 2
    WordPressの「カスタムHTML」ブロックに作成したコードをコピー＆ペーストする

いやいや、Pythonで開発なんてできないよ。。。という方は以下にて個別にサポートを行います。コード作成も、以下を経由して見積もり依頼を頂けたら検討させていただきますので、気軽にご相談ください。

【ココナラ】Python初学者向け　環境構築をサポートします

Plotlyを使った対話型グラフのご紹介

まずはPlotlyで作成する対話型グラフというのがどういうものなのかをご紹介します。拡大や画像保存などのメニューがグラフの右上に表示されますので、自由に操作してみてください。

なお例に示すグラフ以外にもバブルチャートやマップなど、様々なグラフ化が可能です。ここでは紹介しきれないくらい量があるので、気になる方は公式サイトをチェックしてみてください。

棒グラフ

散布図

円グラフ

サンバースト

グラフ中の項目をクリックしたら、グラフが動きます。初めて見たときは私も衝撃的でした！

スポンサーリンク

WordPress用グラフの作り方

ここでは例に示した棒グラフを作成する手順をご紹介します。まずはPythonスクリプトファイルを作成し、データを読み込み、棒グラフのオブジェクトを作成します。

なお作成するHTMLファイルやTXTファイルは、スクリプトファイルと同じ場所に保存するようにしています。

import pathlib
import plotly.express as px

# 用意されているデータ（人口データ）を読み込み
data_japan = px.data.gapminder().query('country == "Japan"')
# x軸に年、y軸に人口をセットし、棒グラフを作成
fig = px.bar(data_japan, x='year', y='pop')

今回は予め用意されているデータセットを利用しましたが、データさえ準備できればグラフ化は1行分のコードだけです。これでfigという変数にグラフデータが出来上がったので、HTMLファイルに書き出してチェックします。出力するHTMLファイル名は「barchart.html」としています。

# スクリプトファイルのディレクトリを取得
cwd_path = pathlib.Path(__file__).resolve().parent
# ファイルパスとファイル名を作成
html_path = cwd_path / 'barchart.html'

# HTMLファイルへグラフを書き出し
fig.write_html(html_path)

出来上がったbarchart.htmlファイルをブラウザで開くと、例に示したような対話型のグラフが表示されます。問題なければこれと同じものをWordpressで表示するため、貼り付け用のテキストデータを作成します。こちらのファイル名は「barchart.txt」です。

# スクリプトファイルのディレクトリを取得
cwd_path = pathlib.Path(__file__).resolve().parent
# ファイルパスとファイル名を作成
text_path = cwd_path / 'barchart.txt'

# 出力するテキストデータを生成
code_text = fig.to_html(include_plotlyjs='cdn',full_html=False).encode().decode('unicode-escape')
# ファイルへ書き出し
with open(text_path, 'w') as f:
    f.write(code_text)

ここまでできればWordpress上で「カスタムHTML」ブロックを作成し、その中にbarchart.txtの中身を丸ごとコピー＆ペーストすれば完成です！！

如何でしたでしょうか？Pythonプログラミングができないと難しそうに感じるかもしれませんが、グラフ化するデータ（ExcelやCSVでも可）さえきちんと用意できれば数行のプログラムで見栄えの良いグラフをブログに記載することができます。

Python開発環境の構築サポートや、Plotlyコードの開発代行などお役に立てることがあれば、以下のリンクよりご相談ください。

【ココナラ】Python初学者向け　環境構築をサポートします

スポンサーリンク

コメント