Skip to main content
Chemistry LibreTexts

5.2.8.1: Enabling and Using Interactive Matplotlib Features

  • Page ID
    278188
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Matplotlib is a Python library which supports a broad range of plotting functions and features. If you have ever created and displayed a plot using matplotlib yourself, then you may have noticed that the plot has some interactive features allowing you to pan, reset view, save the image, and more. These features are not available by default on Libretexts, but by using the ipympl widget you can enable all of those same functions for your plots. We will follow a short and simple example to demonstrate this.

    To compare, run the following cell and check the output. Without the ipympl widget, matplotlib plots will simply appear like an embedded image.

    import matplotlib.pyplot as plt
    import numpy as np
    
    fig = plt.figure()
    plt.plot(np.sin(np.linspace(0, 20, 100)));
     

    Next, we will enable the ipympl backend which controls the interactive features of matplotlib and then we will draw a 3D plot, because we can. Run the code, and you should see that there is a vertical toolbar on the left-hand side of the plot which allows us to interact with the figure. At the moment, this toolbar does not work perfectly with 3D plots on Libretexts, so you may find that the 'rest original view' and 'forward/previous view' buttons do not work. You may still freely rotate the plot around.

    # Enable the ipympl backend with the following line
    %matplotlib widget
    
    from mpl_toolkits.mplot3d import axes3d
    
    fig = plt.figure()
    ax = fig.add_subplot(111, projection='3d')
    X, Y, Z = axes3d.get_test_data(0.05)
    ax.plot_wireframe(X, Y, Z, rstride=10, cstride=10)
    plt.show()
     

    Once the widget is enabled, that change will persist throughout the whole page until the kernel is restarted (either by explicitly pressing the 'restart' button or by refreshing the page). If you go back and rerun the first cell after the one directly above, you will notice that it also has interactive features enabled. Whichever widget you have most recently enabled within a kernel session is the one that will be activated for the entire webpage. To return to the static plotting images, use %matplotlib inline. This allows you to include both static and interactive plots on your Libretexts page; just call the relevant %matplotlib magic command and you can switch between the two styles. 

    %matplotlib inline
    
    fig = plt.figure()
    ax = fig.add_subplot(111, projection='3d')
    X, Y, Z = axes3d.get_test_data(0.05)
    ax.plot_wireframe(X, Y, Z, rstride=10, cstride=10)
    plt.show()
     

    You can also adjust the interactive features of your plot with fig.canvas booleans. The next cell demonstrates this by disabling the header, toolbox, and footer. You can find more options like this on this ipympl example page. Current limitations of the Libretexts code cell plugin prevent later code cells from interacting with earlier ones, so you will have to set all your fig.canvas options within the same cell that you display the plot.

    %matplotlib widget
    
    fig = plt.figure()
    ax = fig.add_subplot(111, projection='3d')
    X, Y, Z = axes3d.get_test_data(0.05)
    ax.plot_wireframe(X, Y, Z, rstride=10, cstride=10)
    plt.show()
    
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.footer_visible = False
     

    The github page for ipympl and usage guide for matplotlib are two external resources that may help you debug your code.  If you run into any bugs or difficulties and those websites still do not resolve your issue, feel free to email us at jupyterteam@ucdavis.edu and we can provide you with more assistance.

    The ipywidgets also work with ipympl. For example:

    %matplotlib widget
    import ipywidgets as widgets
    import matplotlib.pyplot as plt
    import numpy as np
    
    x = np.linspace(0,10)
    
    def sine_func(x, w, amp):
        return amp*np.sin(w*x)
    
    @widgets.interact(w=(0, 4, 0.25), amp=(0, 4, .1))
    def update(w = 1, amp = 1):
        plt.clf()
        plt.ylim(-4, 4)
        plt.plot(x, sine_func(x, w, amp))
     
    1.00
     
    1.00

     


    5.2.8.1: Enabling and Using Interactive Matplotlib Features is shared under a CC BY 1.3 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?