Search code examples
pythonmatplotliblayoutwidgetipython

How can I arrange several plots using ipywidgets?


Question. How can I make a grid (or other similar layout) out of matplotlib plots using ipywidgets?

Description of my attempt. I want to have two plots, each of witch is on separate matplotlib figure. I want them to be converted into ipython widgets and arranged in a such a way that one plot is on the right and other is on the left, but I am getting two plots where first is on top of second. I tried using HBox and TwoByTwoLayout.

My code.

import matplotlib.pyplot as plt
import ipywidgets as widgets

output = widgets.Output()
output1 = widgets.Output()

with output:
    with plt.style.context("ggplot"):
        fig = plt.figure(figsize=(4,4))
        plt.plot([1,2,3], [4,5,6]);
with output1:
    with plt.style.context("ggplot"):
        fig = plt.figure(figsize=(4,4))
        plt.plot([1,2,3], [1,8,5]);

widgets.HBox([output1,output])

from ipywidgets import TwoByTwoLayout 
TwoByTwoLayout(top_left=output,top_right=output1)

Some sources I tried to use. Here are some examples that I failed to cannibalize to my code.

First one, second one, third one.


Solution

  • I was able to find answer myself.

    My Code.

    %matplotlib widget
    
    import matplotlib.pyplot as plt
    import ipywidgets as widgets
    
    with plt.ioff():
        fig1 = plt.figure()
        im1 = plt.scatter([1,2,3],[4,3,1])
        
    with plt.ioff():
        fig2 = plt.figure()
        im2 = plt.scatter([2,4,3],[1,6,5])
        
    display(widgets.HBox([fig1.canvas, fig2.canvas]))