Expand on slider_demo example (#19264)

ianhi · timhoffm · web-flow · commit 47dcf54ee439 · 2021-01-12T00:36:34.000+01:00
* Expand on slider_demo example

* More explicit variable names

Co-Authored-By: Tim Hoffmann &lt;2836374+timhoffm@users.noreply.github.com&gt;

* Make vertical slider more nicely shaped

Co-authored-by: Tim Hoffmann &lt;2836374+timhoffm@users.noreply.github.com&gt;

* Simplify explanation and remove valstep from example

* Link between all the slider examples.

* Try to fix doc build

* cleanup python 2isms

Co-Authored-By: Tim Hoffmann &lt;2836374+timhoffm@users.noreply.github.com&gt;

Co-authored-by: Tim Hoffmann &lt;2836374+timhoffm@users.noreply.github.com&gt;
diff --git a/examples/widgets/range_slider.py b/examples/widgets/range_slider.py
@@ -8,6 +8,12 @@
 The RangeSlider widget can be used similarly to the `.widgets.Slider`
 widget. The major difference is that RangeSlider's ``val`` attribute
 is a tuple of floats ``(lower val, upper val)`` rather than a single float.
+
+See :doc:`/gallery/widgets/slider_demo` for an example of using
+a ``Slider`` to control a single float.
+
+See :doc:`/gallery/widgets/slider_snap_demo` for an example of having
+the ``Slider`` snap to discrete values.
 """
 
 import numpy as np
diff --git a/examples/widgets/slider_demo.py b/examples/widgets/slider_demo.py
@@ -3,65 +3,83 @@
 Slider
 ======
 
-Using the slider widget to control visual properties of your plot.
+In this example, sliders are used to control the frequency and amplitude of
+a sine wave.
 
-In this example, a slider is used to choose the frequency of a sine
-wave. You can control many continuously-varying properties of your plot in
-this way.
+See :doc:`/gallery/widgets/slider_snap_demo` for an example of having
+the ``Slider`` snap to discrete values.
+
+See :doc:`/gallery/widgets/range_slider` for an example of using
+a ``RangeSlider`` to define a range of values.
 """
 import numpy as np
 import matplotlib.pyplot as plt
-from matplotlib.widgets import Slider, Button, RadioButtons
+from matplotlib.widgets import Slider, Button
+
+
+# The parametrized function to be plotted
+def f(t, amplitude, frequency):
+    return amplitude * np.sin(2 * np.pi * frequency * t)
+
+t = np.linspace(0, 1, 1000)
+
+# Define initial parameters
+init_amplitude = 5
+init_frequency = 3
 
+# Create the figure and the line that we will manipulate
 fig, ax = plt.subplots()
-plt.subplots_adjust(left=0.25, bottom=0.25)
-t = np.arange(0.0, 1.0, 0.001)
-a0 = 5
-f0 = 3
-delta_f = 5.0
-s = a0 * np.sin(2 * np.pi * f0 * t)
-l, = plt.plot(t, s, lw=2)
-ax.margins(x=0)
+line, = plt.plot(t, f(t, init_amplitude, init_frequency), lw=2)
+ax.set_xlabel('Time [s]')
 
 axcolor = 'lightgoldenrodyellow'
-axfreq = plt.axes([0.25, 0.1, 0.65, 0.03], facecolor=axcolor)
-axamp = plt.axes([0.25, 0.15, 0.65, 0.03], facecolor=axcolor)
-
-sfreq = Slider(axfreq, 'Freq', 0.1, 30.0, valinit=f0, valstep=delta_f)
-samp = Slider(axamp, 'Amp', 0.1, 10.0, valinit=a0)
+ax.margins(x=0)
 
+# adjust the main plot to make room for the sliders
+plt.subplots_adjust(left=0.25, bottom=0.25)
 
+# Make a horizontal slider to control the frequency.
+axfreq = plt.axes([0.25, 0.1, 0.65, 0.03], facecolor=axcolor)
+freq_slider = Slider(
+    ax=axfreq,
+    label='Frequency [Hz]',
+    valmin=0.1,
+    valmax=30,
+    valinit=init_frequency,
+)
+
+# Make a vertically oriented slider to control the amplitude
+axamp = plt.axes([0.1, 0.25, 0.0225, 0.63], facecolor=axcolor)
+amp_slider = Slider(
+    ax=axamp,
+    label="Amplitude",
+    valmin=0,
+    valmax=10,
+    valinit=init_amplitude,
+    orientation="vertical"
+)
+
+
+# The function to be called anytime a slider's value changes
 def update(val):
-    amp = samp.val
-    freq = sfreq.val
-    l.set_ydata(amp*np.sin(2*np.pi*freq*t))
+    line.set_ydata(f(t, amp_slider.val, freq_slider.val))
     fig.canvas.draw_idle()
 
 
-sfreq.on_changed(update)
-samp.on_changed(update)
+# register the update function with each slider
+freq_slider.on_changed(update)
+amp_slider.on_changed(update)
 
+# Create a `matplotlib.widgets.Button` to reset the sliders to initial values.
 resetax = plt.axes([0.8, 0.025, 0.1, 0.04])
 button = Button(resetax, 'Reset', color=axcolor, hovercolor='0.975')
 
 
 def reset(event):
-    sfreq.reset()
-    samp.reset()
+    freq_slider.reset()
+    amp_slider.reset()
 button.on_clicked(reset)
 
-rax = plt.axes([0.025, 0.5, 0.15, 0.15], facecolor=axcolor)
-radio = RadioButtons(rax, ('red', 'blue', 'green'), active=0)
-
-
-def colorfunc(label):
-    l.set_color(label)
-    fig.canvas.draw_idle()
-radio.on_clicked(colorfunc)
-
-# Initialize plot with correct initial active value
-colorfunc(radio.value_selected)
-
 plt.show()
 
 #############################################################################
@@ -76,5 +94,4 @@ def colorfunc(label):
 
 import matplotlib
 matplotlib.widgets.Button
-matplotlib.widgets.RadioButtons
 matplotlib.widgets.Slider
diff --git a/examples/widgets/slider_snap_demo.py b/examples/widgets/slider_snap_demo.py
@@ -8,6 +8,12 @@
 In this example the Freq slider is constrained to be multiples of pi, and the
 Amp slider uses an array as the ``valstep`` argument to more densely sample
 the first part of its range.
+
+See :doc:`/gallery/widgets/slider_demo` for an example of using
+a ``Slider`` to control a single float.
+
+See :doc:`/gallery/widgets/range_slider` for an example of using
+a ``RangeSlider`` to define a range of values.
 """
 import numpy as np
 import matplotlib.pyplot as plt
