はじめに
この実験では、Matplotlib を使ってインタラクティブなヒストグラムを作成する方法を学びます。インタラクティビティは ECMAScript（JavaScript）でエンコードされ、後処理ステップで SVG コードに挿入されます。結果として得られるヒストグラムには、凡例マーカーをクリックすることでバーを非表示または表示にできるようになります。
VM のヒント
VM の起動が完了したら、左上隅をクリックしてノートブックタブに切り替え、Jupyter Notebook を使って練習しましょう。
時々、Jupyter Notebook が読み込み終了するまで数秒待つ必要がある場合があります。Jupyter Notebook の制限により、操作の検証を自動化することはできません。
学習中に問題に遭遇した場合は、Labby にお問い合わせください。セッション後にフィードバックを提供してください。そうすれば、迅速に問題を解決します。
ヒストグラム、凡例、タイトルの作成
まず、Matplotlib を使ってヒストグラム、凡例、タイトルを作成します。また、set_gid() メソッドを使って各オブジェクトに ID を割り当てます。これにより、Python で作成された Matplotlib オブジェクトと、2 番目のステップで解析される対応する SVG 構成要素を関連付けることができます。
import matplotlib.pyplot as plt
import numpy as np
## Fixing random state for reproducibility
np.random.seed(19680801)
## Create histogram, legend, and title
plt.figure()
r = np.random.randn(100)
r1 = r + 1
labels = ['Rabbits', 'Frogs']
H = plt.hist([r, r1], label=labels)
containers = H[-1]
leg = plt.legend(frameon=False)
plt.title("From a web browser, click on the legend\n"
"marker to toggle the corresponding histogram.")
## Assign IDs to the SVG objects we'll modify
hist_patches = {}
for ic, c in enumerate(containers):
hist_patches[f'hist_{ic}'] = []
for il, element in enumerate(c):
element.set_gid(f'hist_{ic}_patch_{il}')
hist_patches[f'hist_{ic}'].append(f'hist_{ic}_patch_{il}')
## Set IDs for the legend patches
for i, t in enumerate(leg.get_patches()):
t.set_gid(f'leg_patch_{i}')
## Set IDs for the text patches
for i, t in enumerate(leg.get_texts()):
t.set_gid(f'leg_text_{i}')
ヒストグラムにインタラクティビティを追加する
次に、ECMAScript（JavaScript）を使って SVG コードを変更することで、ヒストグラムにインタラクティビティを追加します。set() メソッドを使って、パッチとテキストオブジェクトに属性を追加します。また、各ヒストグラムに属するパッチの ID を格納するグローバル変数 container を作成します。最後に、各ヒストグラムのすべてのパッチの表示属性とマーカー自体の不透明度を設定する関数 toggle_hist() を作成します。
from io import BytesIO
import json
import xml.etree.ElementTree as ET
plt.rcParams['svg.fonttype'] = 'none'
## Save SVG in a fake file object
f = BytesIO()
plt.savefig(f, format="svg")
## Create XML tree from the SVG file
tree, xmlid = ET.XMLID(f.getvalue())
## Add attributes to the patch objects
for i, t in enumerate(leg.get_patches()):
el = xmlid[f'leg_patch_{i}']
el.set('cursor', 'pointer')
el.set('onclick', "toggle_hist(this)")
## Add attributes to the text objects
for i, t in enumerate(leg.get_texts()):
el = xmlid[f'leg_text_{i}']
el.set('cursor', 'pointer')
el.set('onclick', "toggle_hist(this)")
## Create script defining the function `toggle_hist`
script = """
<script type="text/ecmascript">
<![CDATA[
var container = %s
function toggle(oid, attribute, values) {
/* Toggle the style attribute of an object between two values.
Parameters
----------
oid : str
Object identifier.
attribute : str
Name of style attribute.
values : [on state, off state]
The two values that are switched between.
*/
var obj = document.getElementById(oid);
var a = obj.style[attribute];
a = (a == values[0] || a == "")? values[1] : values[0];
obj.style[attribute] = a;
}
function toggle_hist(obj) {
var num = obj.id.slice(-1);
toggle('leg_patch_' + num, 'opacity', [1, 0.3]);
toggle('leg_text_' + num, 'opacity', [1, 0.5]);
var names = container['hist_'+num]
for (var i=0; i < names.length; i++) {
toggle(names[i], 'opacity', [1, 0])
};
}
]]>
</script>
""" % json.dumps(hist_patches)
## Add a transition effect
css = tree.find('.//{http://www.w3.org/2000/svg}style')
css.text = css.text + "g {-webkit-transition:opacity 0.4s ease-out;" + \
"-moz-transition:opacity 0.4s ease-out;}"
## Insert the script and save to file
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write("svg_histogram.svg")
インタラクティブなヒストグラムを表示する
最後に、SVG ファイルをウェブブラウザで開くことで、インタラクティブなヒストグラムを表示できます。バーを非表示または表示にするには、単に凡例マーカーをクリックします。
まとめ
この実験では、Matplotlib を使ってインタラクティブなヒストグラムを作成する方法を学びました。SVG コードを変更することで、ECMAScript（JavaScript）を使ってヒストグラムにインタラクティビティを追加しました。結果として得られるヒストグラムには、凡例マーカーをクリックすることでバーを非表示または表示にできるようになっています。