Interactive Widgets in Jupyter

# CHAPTER 13

Interactive Widgets in Jupyter #

1. Chapter Introduction #

2. Installing ipywidgets #

To use widgets, you need the library installed. Run this in a cell if you don't have it: !pip install ipywidgets

Cell 1:

import ipywidgets as widgets
from IPython.display import display

# Let's verify it works by creating a simple slider
slider = widgets.IntSlider(
    value=50,
    min=0,
    max=100,
    step=1,
    description='Volume:'
)

# Display the slider in the notebook
display(slider)

*(When you run this, a clickable, draggable slider appears in your notebook!)*

3. Reading Values from a Widget #

A widget is useless unless you can use the value the user selected. You access the current state of a widget using .value.

Cell 2:

# Run this cell AFTER you drag the slider from Cell 1
print(f"The user selected a volume of: {slider.value}")

*Note: This is manual. You have to drag the slider, then run Cell 2. Next, we will learn how to make it update automatically.*

4. The @interact Decorator (The Magic Trick) #

The easiest way to link a widget to Python code automatically is the @interact decorator. You place it directly above a function. When the user moves the widget, it instantly re-runs the function with the new value.

Cell 3:

from ipywidgets import interact

# Place the decorator above the function
# By passing x=10, interact automatically generates an IntSlider
@interact(x=10)
def multiply_by_five(x):
    result = x * 5
    print(f"{x} multiplied by 5 is {result}")

*(Drag the slider generated by this cell. Notice the text updates instantly!)*

5. Other Types of Widgets #

interact is smart. It looks at the default value you provide and guesses the correct widget type.

Cell 4:

# 1. Boolean (True/False) -> Creates a Checkbox
@interact(show_details=False)
def toggle_view(show_details):
    if show_details:
        print("Detailed View: Access Granted.")
    else:
        print("Basic View.")

# 2. String -> Creates a Text Box
@interact(name="Guest")
def greet(name):
    print(f"Welcome to the dashboard, {name}!")

# 3. List of Strings -> Creates a Dropdown Menu
@interact(department=['Sales', 'HR', 'IT'])
def select_dept(department):
    print(f"Loading data for the {department} department...")

6. Mini Project: Interactive Financial Dashboard #

Let's combine widgets with Matplotlib to create an interactive chart where the user controls the data. We will simulate compound interest.

Cell 5:

import matplotlib.pyplot as plt
import numpy as np

# Create the interactive function
@interact(principal=(1000, 10000, 500), rate=(1.0, 10.0, 0.5), years=(1, 30, 1))
def plot_compound_interest(principal, rate, years):
    
    # Calculate interest over time
    time = np.arange(1, years + 1)
    # Compound interest formula: A = P(1 + r/100)^t
    amount = principal * (1 + rate/100) ** time
    
    # Plot the results
    plt.figure(figsize=(8, 4))
    plt.plot(time, amount, color='green', marker='o')
    plt.title(f"Growth of ${principal} at {rate}% over {years} years")
    plt.xlabel("Years")
    plt.ylabel("Total Value ($)")
    plt.grid(True)
    plt.show()

*(When executed, this creates three sliders. As you move them, the Matplotlib chart redraws itself in real-time!)*

7. Common Mistakes #

• Forgetting plt.show() inside the interact function: If you generate a Matplotlib chart inside an interactive function but forget plt.show(), the chart might not update properly when the slider moves, or it might print ugly object text to the screen.

• Slow functions: If the function takes 5 seconds to run (e.g., downloading a massive file), linking it to a slider is a bad idea. Every millimeter you drag the slider will trigger the 5-second function, freezing the notebook. Use a Button widget instead for slow tasks.

8. MCQs #

9. Interview Questions #

• Q: A non-technical manager wants to use your Jupyter Notebook to test different marketing budget scenarios. How would you design the notebook so they don't have to edit any Python code?

• Q: Explain how the @interact decorator infers which widget to display based on the default arguments you provide.

10. Summary #

11. Next Chapter Recommendation #