PythonでリッチなWebグラフを作ろう！「Bokeh」で実現するインタラクティブなデータ可視化

投稿者: | 2026-08-30
0件のコメント

みなさん、こんにちは。日々データの分析や可視化に取り組んでいると、「静的なグラフ画像だけではなく、グラフを拡大したり、データポイントの詳細をマウスホバーで確認したりしたい」と思うことはありませんか？
今回は、そんな願いをPythonだけで叶えてくれる強力な可視化ライブラリ「Bokeh（ボケ）」をご紹介します。ブラウザ上で滑らかに動く、美しくインタラクティブなグラフを一緒に作ってみましょう。

Bokehとは？（概要）

Bokehは、Webブラウザでの表示に特化したPythonのインタラクティブな可視化ライブラリです。

Pythonでコードを書くだけで、内部で自動的にHTMLやJavaScriptを生成し、Webページ上で動的に操作できるグラフを出力してくれます。JavaScriptなどのフロントエンド言語の知識がなくても、直感的で洗練されたグラフやダッシュボードを作成できるのが大きな特徴です。

実は「Bokeh」という名前は、日本語の「ボケ（写真の背景のボケ味）」から名付けられているんですよ。データのピントを合わせる、という意味も込められているのかもしれませんね！

Bokehを使うメリット

Bokehには、従来の可視化ライブラリ（Matplotlibなど）と比較して、以下のような素晴らしいメリットがあります。

  • 直感的なインタラクティブ操作：マウスホイールでのズーム、ドラッグによる移動（パン）、特定のデータにカーソルを合わせた際の情報表示（ツールチップ）が標準で備わっています。
  • Webとの高い親和性：出力結果はHTMLファイルとして保存できるため、自身のサイトやブログに埋め込んだり、そのままWebアプリケーションとして公開したりすることが非常に簡単です。
  • 洗練されたモダンなデザイン：デフォルトのデザインが非常に美しく、少しのコードでプロ並みのビジュアルを実現できます。

簡単なサンプルコード

それでは、実際に動かせるシンプルな散布図を作成してみましょう。数行のコードで、ブラウザが立ち上がり、インタラクティブなグラフが表示されます！

pip install bokeh
from bokeh.plotting import figure, show, output_file
from bokeh.models import HoverTool

# 出力先となるHTMLファイルを指定します
output_file("interactive_plot.html")

# データの準備
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# グラフの土台（Figure）を作成
p = figure(
    title="初めてのBokehインタラクティブグラフ",
    x_axis_label="X軸",
    y_axis_label="Y軸",
    sizing_mode="stretch_width",
    max_width=800,
    height=400
)

# 散布図（円）をプロット
p.circle(x, y, size=15, color="navy", alpha=0.5)

# マウスホバー時にデータを表示するツールを追加
hover = HoverTool(tooltips=[
    ("インデックス", "$index"),
    ("(X, Y)", "($x, $y)")
])
p.add_tools(hover)

# グラフを表示（ブラウザでHTMLが開きます）
show(p)

このコードを実行するだけで、マウスの動きに合わせて値が表示される、動きのあるグラフが簡単に完成します。

みーちゃんのワンポイント

Bokehで作成したグラフをWebサイトやブログに埋め込む際は、HTML全体を出力するのではなく、bokeh.embed.components 関数を使いましょう。グラフを構成する「JavaScriptコード」と「divタグ」を個別に抽出できるため、既存のWebページのデザインを崩さずにスマートに埋め込むことができますよ。