はじめに
この記事では、PythonとBokehライブラリを使って、画像付きのインタラクティブな散布図を作成する手法を紹介します。
Bokehを使用することで、データポイントにマウスをオーバーした際に画像を重畳して表示する効果を実現します。また、OpenCVを利用して適当な色で塗りつぶした画像を生成し、ダミーデータとして利用します。本記事では、コードの詳細な説明やサンプルコードを提供するとともに、最終的な可視化結果も示します。画像を用いた機械学習で、結果を可視化したい方におすすめです。
実行環境
Python 3.11.3
bokeh 3.2.1
numpy 1.25.2
目次
1. Bokehとは？
pythonでデータ可視化を行うためのライブラリです。
データ可視化のライブラリとしてはその他にも matplotlib や seaborn などのライブラリがありますが、
今回はインタラクティブな可視化に向いているBokehを使用しました。
2. ダミーデータの作成手順
今回は、5点のダミーデータを用意しました。
2.1. ダミーデータ(画像)の作成
適当な色の画像5枚を生成し、openCVを用いてjpgとして保存します。
import numpy as np
import cv2
# ダミーデータに適当な色の画像を作成
colors = [(0, 0, 0), (0, 255, 0), (255, 0, 0), (255, 255, 0), (127, 127, 127)]
# 適当な色で画像を生成し保存
for i,color in enumerate(colors):
size=(100, 100)
image = np.ones((size[1], size[0], 3), dtype=np.uint8) * color
# 画像を保存
cv2.imwrite(f'test{i}.jpg',image)
2.2. ダミーデータ(画像+座標)の作成
dict型でダミーデータを作成します。画像名(image_url)は2.1で作成した画像のパスを指定しています。
# ダミーデータ（例としてランダムな座標と画像を用意します）
data = {
'x': [1, 2, 3, 4, 5],
'y': [5, 4, 3, 2, 1],
'image_url': [
'test0.jpg',
'test1.jpg',
'test2.jpg',
'test3.jpg',
'test4.jpg'
]
}
3. Bokehを使った可視化
Bokehを使用してHTMLに画像と画像名を描画します。
from bokeh.plotting import figure, show
from bokeh.models import HoverTool, ColumnDataSource
# ColumnDataSourceを作成
source = ColumnDataSource(data)
plot = figure(width=600, height=400)
# 散布図をプロット
scatter = plot.scatter(x='x', y='y', size=15, source=source)
# 画像を重畳して表示
hover = HoverTool(renderers=[scatter], tooltips=None)
hover.tooltips = """
<div>
<img src="@image_url" height="100"></img>
</div>
<div>
<span style="font-size: 12px">@image_url</span>
</div>
"""
plot.add_tools(hover)
# 出力
show(plot)
4. 実行と結果
上記コードを実行することで、ブラウザ上で画像付きの散布図をインタラクティブに操作することができます。
また、show(plot)で、htmlファイルが作られるので、一度実行してしまえばスクリプトを再実行しなくてもhtmlで結果を確認することが可能です。
5. まとめ
PythonとBokehライブラリを使って、画像付きのインタラクティブな散布図を作成する手法を紹介しました。
本記事内で書かれたプログラムはほとんどchat-GPT先生に作ってもらいました。もし不備などありましたら、一報いただけると幸いです。
また、matplotlibにて同様のことをしている偉大な先人の方の記事はこちら
https://qiita.com/sage-git/items/00fc33722d68627c467d