Embedding Matplotlib in GTK3 for Interactive Data Visualization

Introduction

Matplotlib is a popular Python library for creating static, animated, and interactive visualizations in Python. In this lab, you will learn how to embed Matplotlib in a GTK3 application and interact with a treeview to store data.

VM Tips

After the VM startup is done, click the top left corner to switch to the Notebook tab to access Jupyter Notebook for practice.

Sometimes, you may need to wait a few seconds for Jupyter Notebook to finish loading. The validation of operations cannot be automated because of limitations in Jupyter Notebook.

If you face issues during learning, feel free to ask Labby. Provide feedback after the session, and we will promptly resolve the problem for you.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL matplotlib(("`Matplotlib`")) -.-> matplotlib/BasicConceptsGroup(["`Basic Concepts`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/PlottingDataGroup(["`Plotting Data`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/AdvancedTopicsGroup(["`Advanced Topics`"]) python(("`Python`")) -.-> python/BasicConceptsGroup(["`Basic Concepts`"]) python(("`Python`")) -.-> python/ControlFlowGroup(["`Control Flow`"]) python(("`Python`")) -.-> python/DataStructuresGroup(["`Data Structures`"]) python(("`Python`")) -.-> python/FunctionsGroup(["`Functions`"]) python(("`Python`")) -.-> python/ModulesandPackagesGroup(["`Modules and Packages`"]) python(("`Python`")) -.-> python/ObjectOrientedProgrammingGroup(["`Object-Oriented Programming`"]) python(("`Python`")) -.-> python/PythonStandardLibraryGroup(["`Python Standard Library`"]) python(("`Python`")) -.-> python/DataScienceandMachineLearningGroup(["`Data Science and Machine Learning`"]) matplotlib/BasicConceptsGroup -.-> matplotlib/figures_axes("`Understanding Figures and Axes`") matplotlib/PlottingDataGroup -.-> matplotlib/line_plots("`Line Plots`") matplotlib/AdvancedTopicsGroup -.-> matplotlib/custom_backends("`Custom Backends`") matplotlib/AdvancedTopicsGroup -.-> matplotlib/event_handling("`Event Handling`") python/BasicConceptsGroup -.-> python/variables_data_types("`Variables and Data Types`") python/BasicConceptsGroup -.-> python/numeric_types("`Numeric Types`") python/BasicConceptsGroup -.-> python/strings("`Strings`") python/BasicConceptsGroup -.-> python/booleans("`Booleans`") python/BasicConceptsGroup -.-> python/type_conversion("`Type Conversion`") python/ControlFlowGroup -.-> python/for_loops("`For Loops`") python/DataStructuresGroup -.-> python/lists("`Lists`") python/DataStructuresGroup -.-> python/tuples("`Tuples`") python/FunctionsGroup -.-> python/function_definition("`Function Definition`") python/FunctionsGroup -.-> python/lambda_functions("`Lambda Functions`") python/ModulesandPackagesGroup -.-> python/importing_modules("`Importing Modules`") python/ModulesandPackagesGroup -.-> python/using_packages("`Using Packages`") python/ModulesandPackagesGroup -.-> python/standard_libraries("`Common Standard Libraries`") python/ObjectOrientedProgrammingGroup -.-> python/classes_objects("`Classes and Objects`") python/ObjectOrientedProgrammingGroup -.-> python/constructor("`Constructor`") python/ObjectOrientedProgrammingGroup -.-> python/encapsulation("`Encapsulation`") python/PythonStandardLibraryGroup -.-> python/math_random("`Math and Random`") python/PythonStandardLibraryGroup -.-> python/data_collections("`Data Collections`") python/DataScienceandMachineLearningGroup -.-> python/numerical_computing("`Numerical Computing`") python/DataScienceandMachineLearningGroup -.-> python/data_visualization("`Data Visualization`") python/FunctionsGroup -.-> python/build_in_functions("`Build-in Functions`") subgraph Lab Skills matplotlib/figures_axes -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} matplotlib/line_plots -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} matplotlib/custom_backends -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} matplotlib/event_handling -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/variables_data_types -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/numeric_types -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/strings -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/booleans -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/type_conversion -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/for_loops -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/lists -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/tuples -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/function_definition -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/lambda_functions -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/importing_modules -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/using_packages -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/standard_libraries -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/classes_objects -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/constructor -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/encapsulation -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/math_random -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/data_collections -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/numerical_computing -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/data_visualization -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} python/build_in_functions -.-> lab-48760{{"`Gtk3 Spreadsheet Sgskip`"}} end

Set up the Environment

Before getting started, we need to set up our environment. We'll start by creating a new Python file and importing the necessary libraries.

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

Create the Data Manager Window

In this step, we'll create the DataManager class that extends from the Gtk.Window class. This class will be responsible for managing the data that we want to plot.

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

Set Up the Window

In this step, we'll set up the window that will display our data. We'll start by initializing the window with a title and a size.

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)

Add a Label

In this step, we'll add a label to the window that will prompt the user to double-click a row to plot the data.

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)

Add a TreeView

In this step, we'll add a treeview to the window that will display our data. We'll also create a model to store the data.

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()

Create the Matplotlib Plot

In this step, we'll create a Matplotlib plot that will display our data. We'll start by creating a figure and adding a subplot.

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

Plot the Data

In this step, we'll plot the first row of our data on the Matplotlib plot.

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

Implement Plotting Functionality

In this step, we'll implement the functionality to plot the data when a row is double-clicked.

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

Add Columns to TreeView

In this step, we'll add columns to the treeview that will display our data.

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)

Create the Model

In this step, we'll create the model that will store our data.

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

Show the Window

In this step, we'll show the window that displays our data.

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

Summary

In this lab, you learned how to embed Matplotlib in a GTK3 application and interact with a treeview to store data. You also learned how to plot data using Matplotlib and how to create a model to store data in a treeview.

Gtk3 Spreadsheet Sgskip