Widget-based interactions (sliders, buttons) in Matplotlib - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of slider interaction code

What will be the output when you move the slider in this matplotlib widget example?

Matplotlib

import matplotlib.pyplot as plt
from matplotlib.widgets import Slider

fig, ax = plt.subplots()
plt.subplots_adjust(bottom=0.25)
x = range(10)
y = [i**2 for i in x]
line, = ax.plot(x, y)

ax_slider = plt.axes([0.25, 0.1, 0.65, 0.03])
slider = Slider(ax_slider, 'Scale', 0.1, 2.0, valinit=1)

def update(val):
    scale = slider.val
    line.set_ydata([i**2 * scale for i in x])
    fig.canvas.draw_idle()

slider.on_changed(update)
plt.show()

A The code raises a TypeError because set_ydata expects a numpy array

B The plot updates but x-values are scaled instead of y-values

C The slider does not affect the plot because update is not connected

D The plot updates dynamically scaling the y-values by the slider value

💡 Hint

Check what the update function changes when the slider moves.

The update function multiplies each y-value by the slider's current value and updates the plot line's y-data. This causes the plot to scale vertically as the slider moves.

❓ data_output

intermediate

Resulting data after button click

Given this matplotlib button widget code, what is the value of counter after clicking the button three times?

Matplotlib

import matplotlib.pyplot as plt
from matplotlib.widgets import Button

counter = 0

def on_click(event):
    global counter
    counter += 1

fig, ax = plt.subplots()
plt.subplots_adjust(bottom=0.2)
ax_button = plt.axes([0.7, 0.05, 0.1, 0.075])
button = Button(ax_button, 'Click me')
button.on_clicked(on_click)

# Simulate three clicks
for _ in range(3):
    on_click(None)

print(counter)

A 3

B 0

C 1

D Raises NameError because counter is not global

💡 Hint

Look at how counter is updated inside the on_click function.

The on_click function increments the global counter by 1 each time it is called. Calling it three times increases counter from 0 to 3.

🔧 Debug

advanced

Identify the error in slider update function

What error will this code raise when moving the slider?

Matplotlib

import matplotlib.pyplot as plt
from matplotlib.widgets import Slider

fig, ax = plt.subplots()
x = range(5)
y = [i*2 for i in x]
line, = ax.plot(x, y)

ax_slider = plt.axes([0.25, 0.1, 0.65, 0.03])
slider = Slider(ax_slider, 'Multiplier', 1, 5, valinit=1)

def update(val):
    scale = slider.val
    line.set_ydata([v * scale for v in y])
    fig.canvas.draw_idle()

slider.on_changed(update)
plt.show()

A ValueError: x and y must have same first dimension

B AttributeError: 'Slider' object has no attribute 'val'

C TypeError: can't multiply list by float

D No error, plot updates correctly

💡 Hint

Check the type of y and what happens when multiplying by scale.

Multiplying a list by a float is not allowed in Python, causing a TypeError. The code tries to multiply y (a list) by scale (a float).

❓ visualization

advanced

Effect of button on plot color

What happens to the plot color when the button is clicked in this code?

Matplotlib

import matplotlib.pyplot as plt
from matplotlib.widgets import Button

fig, ax = plt.subplots()
x = range(10)
y = [i for i in x]
line, = ax.plot(x, y, color='blue')

ax_button = plt.axes([0.7, 0.05, 0.1, 0.075])
button = Button(ax_button, 'Change Color')

colors = ['blue', 'green', 'red']
index = 0

def on_click(event):
    global index
    index = (index + 1) % len(colors)
    line.set_color(colors[index])
    fig.canvas.draw_idle()

button.on_clicked(on_click)
plt.show()

A The plot color changes to red on first click and stays red

B The plot color cycles through green, red, then back to blue on each click

C The plot color changes to green on first click and stays green

D The code raises SyntaxError due to 'nonlocal' usage

💡 Hint

Look at how index changes and how colors are assigned.

The index variable cycles through 0,1,2 using modulo. Each click changes the plot color to the next color in the list, cycling through blue, green, red repeatedly.

🚀 Application

expert

Combining slider and button for interactive plot

In this code, what is the final y-data of the plot after moving the slider to 3 and clicking the button once?

Matplotlib

import matplotlib.pyplot as plt
from matplotlib.widgets import Slider, Button

fig, ax = plt.subplots()
x = range(4)
y = [1, 2, 3, 4]
line, = ax.plot(x, y)

ax_slider = plt.axes([0.25, 0.1, 0.65, 0.03])
slider = Slider(ax_slider, 'Multiplier', 1, 5, valinit=1)

ax_button = plt.axes([0.7, 0.05, 0.1, 0.075])
button = Button(ax_button, 'Add 10')

current_y = y.copy()

def update(val):
    nonlocal current_y
    scale = slider.val
    current_y = [v * scale for v in y]
    line.set_ydata(current_y)
    fig.canvas.draw_idle()

slider.on_changed(update)

def on_click(event):
    nonlocal current_y
    current_y = [v + 10 for v in current_y]
    line.set_ydata(current_y)
    fig.canvas.draw_idle()

button.on_clicked(on_click)

# Simulate slider move to 3
slider.set_val(3)
# Simulate button click
on_click(None)

print(current_y)

A [13, 16, 19, 22]

B [3, 6, 9, 12]

C [11, 12, 13, 14]

D [10, 20, 30, 40]

💡 Hint

First the slider multiplies original y by 3, then the button adds 10 to each element.

After slider moves to 3, y becomes [3,6,9,12]. Then button adds 10 to each, resulting in [13,16,19,22].