René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Trying to replicate your movie and slider examples","articleBody":"I'm brand new at this. Trying to create animated and interactive graphics in a JupyterBook for a classroom text that I'm writing. I found your examples of the Fermi-Dirac distribution in your nice Medium article of last year.\r\n\r\nI can easily recreate the static diagram but when I try to create either the movie or the slider example I get errors. I've pasted in the two projects at the end of the first one (is that the right thing to do?) I'm working in Jupyter Lab, but my eventual target is JupyterBook. I'd appreciate some pointers.\r\n\r\nBTW I know that making it work in a notebook is not how to make it work interactively in JupyterBook. *If you have suggestions there, that would be very much appreciated!*\r\n\r\nI'm working on an M1 MacBook pro in, like I said, Jupyter Lab.\r\n\r\n```\r\nPython 3.8.8 (default, Apr 13 2021, 12:59:45) \r\n[Clang 10.0.0 ] :: Anaconda, Inc. on darwin\r\n```\r\n\r\nThanks in advance for your help and advice on web-embedding?\r\n\r\nHere are the code and results: \r\n\r\n**Movie:** \r\n\r\nAfter the lines:\r\n\r\n```\r\nmpl.rcParams['xtick.major.size'] = 10\r\nmpl.rcParams['xtick.major.width'] = 2\r\nmpl.rcParams['ytick.major.size'] = 10\r\nmpl.rcParams['ytick.major.width'] = 2\r\n```\r\n\r\nin the static program, I insert \r\n\r\n```\r\n# Change matplotlib backend\r\n%matplotlib notebook\r\n\r\n\r\n# Create figure and add axes\r\nfig = plt.figure(figsize=(6, 4))\r\nax = fig.add_subplot(111)\r\n\r\nand so on\r\n```\r\n through to the end of your movie example code. It produces errors:\r\n\r\n```\r\nJavascript Error: Can't find variable: IPython\r\n```\r\n\r\n```\r\nNameError                                 Traceback (most recent call last)\r\n\u003cipython-input-1-a0c46868fd22\u003e in \u003cmodule\u003e\r\n     76 \r\n     77 # Create animation\r\n---\u003e 78 ani = FuncAnimation(fig, animate, frames=range(len(T)), interval=500, repeat=True)\r\n     79 \r\n     80 # Ensure the entire plot is visible\r\n\r\nNameError: name 'FuncAnimation' is not defined\r\n```\r\n\r\n**Sliders**\r\n\r\nIn the same way, at the same point, I add the lines from the example:\r\n\r\n```\r\n\r\nfig = plt.figure(figsize=(6, 4.5))\r\n\r\n# Create main axis\r\nax = fig.add_subplot(111)\r\nfig.subplots_adjust(bottom=0.2, top=0.75)\r\n\r\n```\r\n and it produces a static picture of the plot with sliders (probably a slice of the animated gif from your article?) and errors\r\n\r\n```\r\nNameError                                 Traceback (most recent call last)\r\n\u003cipython-input-1-560d20080917\u003e in \u003cmodule\u003e\r\n     72 plt.show()\r\n     73 \r\n---\u003e 74 Slider.on_changed(func)\r\n\r\nNameError: name 'func' is not defined\r\n```\r\n\r\nHere are the complete cells for both\r\n\r\n**Movie**\r\n\r\n```\r\n# Import packages\r\nimport matplotlib as mpl\r\nimport matplotlib.pyplot as plt\r\nimport numpy as np\r\n\r\n# Fermi-Dirac Distribution\r\ndef fermi(E: float, E_f: float, T: float) -\u003e float:\r\n    k_b = 8.617 * (10**-5) # eV/K\r\n    return 1/(np.exp((E - E_f)/(k_b * T)) + 1)\r\n\r\n# General plot parameters\r\nmpl.rcParams['font.family'] = 'Avenir'\r\nmpl.rcParams['font.size'] = 18\r\nmpl.rcParams['axes.linewidth'] = 2\r\nmpl.rcParams['axes.spines.top'] = False\r\nmpl.rcParams['axes.spines.right'] = False\r\nmpl.rcParams['xtick.major.size'] = 10\r\nmpl.rcParams['xtick.major.width'] = 2\r\nmpl.rcParams['ytick.major.size'] = 10\r\nmpl.rcParams['ytick.major.width'] = 2\r\n\r\n# Change matplotlib backend\r\n%matplotlib notebook\r\n\r\n\r\n# Create figure and add axes\r\nfig = plt.figure(figsize=(6, 4))\r\nax = fig.add_subplot(111)\r\n\r\n# Temperature values\r\nT = np.linspace(100, 1000, 10)\r\n\r\n# Get colors from coolwarm colormap\r\ncolors = plt.get_cmap('coolwarm', 10)\r\n\r\n# Plot F-D data\r\nfor i in range(len(T)):\r\n    x = np.linspace(0, 1, 100)\r\n    y = fermi(x, 0.5, T[i])\r\n    ax.plot(x, y, color=colors(i), linewidth=2.5)\r\n    \r\n# Add legend\r\nlabels = ['100 K', '200 K', '300 K', '400 K', '500 K', '600 K', \r\n          '700 K', '800 K', '900 K', '1000 K']\r\nax.legend(labels, bbox_to_anchor=(1.05, -0.1), loc='lower left', \r\n          frameon=False, labelspacing=0.2)\r\n\r\n# Create figure and add axes\r\nfig = plt.figure(figsize=(6, 4))\r\nax = fig.add_subplot(111)\r\n\r\n# Get colors from coolwarm colormap\r\ncolors = plt.get_cmap('coolwarm', 10)\r\n\r\n# Temperature values\r\nT = np.linspace(100, 1000, 10)\r\n\r\n# Create variable reference to plot\r\nf_d, = ax.plot([], [], linewidth=2.5)\r\n\r\n# Add text annotation and create variable reference\r\ntemp = ax.text(1, 1, '', ha='right', va='top', fontsize=24)\r\n\r\n# Set axes labels\r\nax.set_xlabel('Energy (eV)')\r\nax.set_ylabel('Fraction')\r\n\r\n# Animation function\r\ndef animate(i):\r\n    x = np.linspace(0, 1, 100)\r\n    y = fermi(x, 0.5, T[i])\r\n    f_d.set_data(x, y)\r\n    f_d.set_color(colors(i))\r\n    temp.set_text(str(int(T[i])) + ' K')\r\n    temp.set_color(colors(i))\r\n\r\n# Create animation\r\nani = FuncAnimation(fig, animate, frames=range(len(T)), interval=500, repeat=True)\r\n\r\n# Ensure the entire plot is visible\r\nfig.tight_layout()\r\n\r\n# Save and show animation\r\nani.save('AnimatedPlot.gif', writer='imagemagick', fps=2)\r\nplt.show()\r\n\r\n```\r\n\r\n**Sliders**\r\n\r\n```\r\n# Import packages\r\n%matplotlib inline\r\n\r\nimport matplotlib as mpl\r\nimport matplotlib.pyplot as plt\r\nfrom matplotlib.animation import FuncAnimation\r\nfrom matplotlib.widgets import Slider\r\nimport numpy as np\r\nimport networkx as nx\r\nfrom matplotlib.animation import FuncAnimation, PillowWriter \r\n\r\n# Fermi-Dirac Distribution\r\ndef fermi(E: float, E_f: float, T: float) -\u003e float:\r\n    k_b = 8.617 * (10**-5) # eV/K\r\n    return 1/(np.exp((E - E_f)/(k_b * T)) + 1)\r\n\r\n# General plot parameters\r\nmpl.rcParams['font.family'] = 'Avenir'\r\nmpl.rcParams['font.size'] = 18\r\n\r\nmpl.rcParams['axes.linewidth'] = 2\r\nmpl.rcParams['axes.spines.top'] = False\r\nmpl.rcParams['axes.spines.right'] = False\r\n\r\nmpl.rcParams['xtick.major.size'] = 10\r\nmpl.rcParams['xtick.major.width'] = 2\r\nmpl.rcParams['ytick.major.size'] = 10\r\nmpl.rcParams['ytick.major.width'] = 2\r\n\r\n\r\nfig = plt.figure(figsize=(6, 4.5))\r\n\r\n# Create main axis\r\nax = fig.add_subplot(111)\r\nfig.subplots_adjust(bottom=0.2, top=0.75)\r\n\r\n# Create axes for sliders\r\nax_Ef = fig.add_axes([0.3, 0.85, 0.4, 0.05])\r\nax_Ef.spines['top'].set_visible(True)\r\nax_Ef.spines['right'].set_visible(True)\r\n\r\nax_T = fig.add_axes([0.3, 0.92, 0.4, 0.05])\r\nax_T.spines['top'].set_visible(True)\r\nax_T.spines['right'].set_visible(True)\r\n\r\n# Create sliders\r\ns_Ef = Slider(ax=ax_Ef, label='Fermi Energy ', valmin=0, valmax=1.0, valinit=0.5, valfmt=' %1.1f eV', facecolor='#cc7000')\r\ns_T = Slider(ax=ax_T, label='Temperature ', valmin=100, valmax=1000, valinit=300, valfmt=' %i K', facecolor='#cc7000')\r\n\r\n# Plot default data\r\nx = np.linspace(-0, 1, 100)\r\nEf_0 = 0.5\r\nT_0 = 300\r\ny = fermi(x, Ef_0, T_0)\r\nf_d, = ax.plot(x, y, linewidth=2.5)\r\n\r\n\r\n# Update values\r\ndef update(val):\r\n    Ef = s_Ef.val\r\n    T = s_T.val\r\n    f_d.set_data(x, fermi(x, Ef, T))\r\n    fig.canvas.draw_idle()\r\n\r\ns_Ef.on_changed(update)\r\ns_T.on_changed(update)\r\n    \r\n# Set axis labels\r\nax.set_xlabel('Energy (eV)')\r\nax.set_ylabel('Fraction')\r\n\r\nplt.show()\r\n\r\nSlider.on_changed(func)\r\n\r\n```\r\n\r\n\r\n\r\n","author":{"url":"https://github.com/chipbrock","@type":"Person","name":"chipbrock"},"datePublished":"2021-07-04T12:33:26.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/1/python-science-tutorial/issues/1"}