Plotly & ipywidgets Animated Plot With Controller for Frame Show or animation from SO 78590766/8508004 Using Serge de Gosson de Varennes' excellent code [here](https://stackoverflow.com/a/78590766/8508004).

ipywdgets_and_animated_plotly_together_with_controller.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "cedd88ee-4904-4a6b-b70c-07e258306d56",
   "metadata": {},
   "source": [
    "## Plotly & ipywidgets Animated Plot With Controller for Frame Show or animation from SO 78590766/8508004\n",
    "Using Serge de Gosson de Varennes' excellent code [here](https://stackoverflow.com/a/78590766/8508004).\n",
    "\n",
    "**If the slider widgets show up, yet the plot & controller fails to show up the first time the cell is run, or they blink away after being visible momentarily, simply run the cell below again.** Alternatively, if the plot & controller blink away upon first run, engaging with the ipywidgets sliders helps restore it usually."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "aeeb39b3-58f7-4ea3-b607-6796e0081b3b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "7ea7fa2c32aa471d8b4ceae70322cd24",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=30, description='Z', max=50, min=10, step=10), IntSlider(value=50, descr…"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import plotly.express as px\n",
    "import plotly.graph_objects as go\n",
    "from ipywidgets import interactive\n",
    "\n",
    "def generate_plot(Z, frames):\n",
    "    N = 50  \n",
    "    x = np.linspace(0, 2 * np.pi, 40)\n",
    "    y = np.array([np.sin(x + phase * Z) for phase in np.linspace(0, 2 * np.pi, N)])\n",
    "    \n",
    "    df = pd.DataFrame({\n",
    "        'x': np.tile(x, N * frames),\n",
    "        'y': np.sin(np.tile(x, N * frames) + np.repeat(np.linspace(0, 2 * np.pi, frames), N * 40)),\n",
    "        'line_id': np.repeat(np.arange(N), 40 * frames),\n",
    "        'frame_id': np.repeat(np.arange(frames), N * 40)\n",
    "    })\n",
    "    \n",
    "    fig = px.line(df, x='x', y='y', animation_frame='frame_id', animation_group='line_id', \n",
    "                  line_group='line_id', color='line_id')\n",
    "\n",
    "    fig.update_layout(\n",
    "        title=\"Animated Line Plot\",\n",
    "        xaxis_title=\"X Axis\",\n",
    "        yaxis_title=\"Y Axis\",\n",
    "        showlegend=False\n",
    "    )\n",
    "\n",
    "    fig.show()\n",
    "\n",
    "interactive_plot = interactive(generate_plot, Z=(10, 50, 10), frames=(10, 100, 10))\n",
    "output = interactive_plot.children[-1]\n",
    "output.layout.height = '600px'\n",
    "interactive_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9b089ed9-b0ab-428d-87a2-80828fc44d3a",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9260e111-8899-4fd8-a9b5-770a90e18679",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}