GTK3 に Matplotlib を埋め込んでインタラクティブなデータ可視化を行う

はじめに

Matplotlib は、Python で静的、アニメーション、インタラクティブなビジュアライゼーションを作成するための人気のある Python ライブラリです。この実験では、Matplotlib を GTK3 アプリケーションに埋め込み、ツリービューとやり取りしてデータを保存する方法を学びます。

VM のヒント

VM の起動が完了したら、左上隅をクリックしてノートブックタブに切り替え、Jupyter Notebook を使って練習しましょう。

時々、Jupyter Notebook が読み込み終わるまで数秒待つ必要がある場合があります。Jupyter Notebook の制限により、操作の検証を自動化することはできません。

学習中に問題に遭遇した場合は、Labby にお問い合わせください。セッション後にフィードバックを提供してください。すぐに問題を解決いたします。

環境をセットアップする

始める前に、環境をセットアップする必要があります。まず新しい Python ファイルを作成し、必要なライブラリをインポートします。

import gi
gi.require_version('Gtk', '3.0')
gi.require_version('Gdk', '3.0')
from gi.repository import Gdk, Gtk
from numpy.random import random
from matplotlib.backends.backend_gtk3agg import FigureCanvas
from matplotlib.figure import Figure

データマネージャウィンドウを作成する

このステップでは、Gtk.Window クラスから拡張された DataManager クラスを作成します。このクラスは、描画したいデータの管理を担当します。

class DataManager(Gtk.Window):
    num_rows, num_cols = 20, 10
    data = random((num_rows, num_cols))

ウィンドウをセットアップする

このステップでは、データを表示するウィンドウをセットアップします。まず、ウィンドウをタイトルとサイズで初期化します。

def __init__(self):
    super().__init__()
    self.set_default_size(600, 600)
    self.connect('destroy', lambda win: Gtk.main_quit())
    self.set_title('GtkListStore demo')
    self.set_border_width(8)

ラベルを追加する

このステップでは、ウィンドウにラベルを追加します。このラベルは、ユーザーに行をダブルクリックしてデータを描画するよう促すものです。

vbox = Gtk.VBox(homogeneous=False, spacing=8)
self.add(vbox)
label = Gtk.Label(label='Double click a row to plot the data')
vbox.pack_start(label, False, False, 0)

ツリービューを追加する

このステップでは、データを表示するツリービューをウィンドウに追加します。また、データを格納するモデルも作成します。

sw = Gtk.ScrolledWindow()
sw.set_shadow_type(Gtk.ShadowType.ETCHED_IN)
sw.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC)
vbox.pack_start(sw, True, True, 0)
model = self.create_model()
self.treeview = Gtk.TreeView(model=model)
self.treeview.connect('row-activated', self.plot_row)
sw.add(self.treeview)
self.add_columns()

Matplotlib のプロットを作成する

このステップでは、データを表示する Matplotlib のプロットを作成します。まず、グラフを作成してサブプロットを追加します。

fig = Figure(figsize=(6, 4))
self.canvas = FigureCanvas(fig)
vbox.pack_start(self.canvas, True, True, 0)
ax = fig.add_subplot()

データを描画する

このステップでは、Matplotlib のプロットにデータの最初の行を描画します。

self.line, = ax.plot(self.data[0, :], 'go')

描画機能を実装する

このステップでは、行をダブルクリックしたときにデータを描画する機能を実装します。

def plot_row(self, treeview, path, view_column):
    ind, = path
    points = self.data[ind, :]
    self.line.set_ydata(points)
    self.canvas.draw()

ツリービューに列を追加する

このステップでは、データを表示するための列をツリービューに追加します。

def add_columns(self):
    for i in range(self.num_cols):
        column = Gtk.TreeViewColumn(str(i), Gtk.CellRendererText(), text=i)
        self.treeview.append_column(column)

モデルを作成する

このステップでは、データを格納するモデルを作成します。

def create_model(self):
    types = [float] * self.num_cols
    store = Gtk.ListStore(*types)
    for row in self.data:
        store.append(tuple(row))
    return store

ウィンドウを表示する

このステップでは、データを表示するウィンドウを表示します。

manager = DataManager()
manager.show_all()
Gtk.main()

まとめ

この実験では、Matplotlib を GTK3 アプリケーションに埋め込み、ツリービューとやり取りしてデータを格納する方法を学びました。また、Matplotlib を使ってデータをプロットする方法と、ツリービューにデータを格納するためのモデルを作成する方法も学びました。

Gtk3 スプレッドシート Sgskip