j1-template 2022.2.3 → 2022.3.0

data/lib/starter_web/pages/public/jupyter/notebooks/j1/.ipynb_checkpoints/{j1_altair_interactive_test-checkpoint.ipynb → j1_ode_selected-checkpoint.ipynb}

@@ -9,12 +9,12 @@
     }
    },
    "source": [
-    "### Resources"
+    "#### Resources"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 54,
+   "execution_count": 1,
    "metadata": {
     "ExecuteTime": {
      "end_time": "2017-08-15T00:19:29.880777Z",
@@ -26,362 +26,143 @@
     "import warnings\n",
     "warnings.filterwarnings(\"ignore\")\n",
     "\n",
-    "import pandas as pd\n",
+    "### General Purpose\n",
     "import numpy as np\n",
-    "import altair as alt\n",
+    "from matplotlib import pyplot as plt\n",
+    "from scipy.integrate import odeint\n",
     "\n",
-    "import ipywidgets as widgets\n",
-    "from ipywidgets import interact\n",
+    "### Jupyter Specifics\n",
+    "from IPython.display import HTML\n",
+    "from ipywidgets.widgets import interact, IntSlider, FloatSlider, Layout\n",
     "\n",
-    "from IPython.display import HTML\n"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Load Vega Datasets\n",
+    "%matplotlib inline\n",
     "\n",
-    "To list all the available datsets, use list_datasets:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 55,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from vega_datasets import data"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Load Theme\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 68,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# See: https://stackoverflow.com/questions/21034373/how-to-load-edit-run-save-text-files-py-into-an-ipython-notebook-cell\n",
-    "%load ../themes/altair/theme_ggplot.py\n",
-    "\n"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Register Theme"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 69,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "ThemeRegistry.enable('theme_ggplot')"
-      ]
-     },
-     "execution_count": 69,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "alt.themes.register(\"theme_ggplot\", theme_ggplot)\n",
-    "alt.themes.enable(\"theme_ggplot\")"
+    "style = {'description_width': '150px'}\n",
+    "slider_layout = Layout(width='99%')"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "### Building Complex Selections\n",
-    "\n",
-    "Selection values can be accessed directly and used in expressions that affect the chart. For example, here we create a slider to choose a cutoff value, and color points based on whether they are smaller or larger than the value:"
+    "#### Calculation"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 70,
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "\n",
-       "<div id=\"altair-viz-1b202d8be5a44618bb456f08a9464178\"></div>\n",
-       "<script type=\"text/javascript\">\n",
-       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
-       "  (function(spec, embedOpt){\n",
-       "    let outputDiv = document.currentScript.previousElementSibling;\n",
-       "    if (outputDiv.id !== \"altair-viz-1b202d8be5a44618bb456f08a9464178\") {\n",
-       "      outputDiv = document.getElementById(\"altair-viz-1b202d8be5a44618bb456f08a9464178\");\n",
-       "    }\n",
-       "    const paths = {\n",
-       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
-       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
-       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
-       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
-       "    };\n",
-       "\n",
-       "    function maybeLoadScript(lib, version) {\n",
-       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
-       "      return (VEGA_DEBUG[key] == version) ?\n",
-       "        Promise.resolve(paths[lib]) :\n",
-       "        new Promise(function(resolve, reject) {\n",
-       "          var s = document.createElement('script');\n",
-       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
-       "          s.async = true;\n",
-       "          s.onload = () => {\n",
-       "            VEGA_DEBUG[key] = version;\n",
-       "            return resolve(paths[lib]);\n",
-       "          };\n",
-       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
-       "          s.src = paths[lib];\n",
-       "        });\n",
-       "    }\n",
-       "\n",
-       "    function showError(err) {\n",
-       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
-       "      throw err;\n",
-       "    }\n",
-       "\n",
-       "    function displayChart(vegaEmbed) {\n",
-       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
-       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
-       "    }\n",
-       "\n",
-       "    if(typeof define === \"function\" && define.amd) {\n",
-       "      requirejs.config({paths});\n",
-       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
-       "    } else {\n",
-       "      maybeLoadScript(\"vega\", \"5\")\n",
-       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
-       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
-       "        .catch(showError)\n",
-       "        .then(() => displayChart(vegaEmbed));\n",
-       "    }\n",
-       "  })({\"config\": {\"view\": {\"fill\": \"#f0f2f6\"}, \"arc\": {\"fill\": \"#F63366\"}, \"area\": {\"fill\": \"#F63366\"}, \"circle\": {\"fill\": \"#F63366\", \"stroke\": \"#262730\", \"strokeWidth\": 0.5}, \"line\": {\"stroke\": \"#F63366\"}, \"path\": {\"stroke\": \"#F63366\"}, \"point\": {\"stroke\": \"#F63366\"}, \"rect\": {\"fill\": \"#F63366\"}, \"shape\": {\"stroke\": \"#F63366\"}, \"symbol\": {\"fill\": \"#F63366\"}, \"title\": {\"font\": \"IBM Plex Mono\", \"color\": \"#262730\", \"fontSize\": 20.0, \"anchor\": \"start\"}, \"axis\": {\"titleFont\": \"IBM Plex Mono\", \"titleColor\": \"#262730\", \"titleFontSize\": 12.8, \"labelFont\": \"IBM Plex Mono\", \"labelColor\": \"#262730\", \"labelFontSize\": 12.8, \"grid\": true, \"gridColor\": \"#fff\", \"gridOpacity\": 1, \"domain\": false, \"tickColor\": \"#262730\"}, \"header\": {\"labelFont\": \"IBM Plex Mono\", \"titleFont\": \"IBM Plex Mono\", \"labelFontSize\": 16, \"titleFontSize\": 16}, \"legend\": {\"titleFont\": \"IBM Plex Mono\", \"titleColor\": \"#262730\", \"titleFontSize\": 12.8, \"labelFont\": \"IBM Plex Mono\", \"labelColor\": \"#262730\", \"labelFontSize\": 12.8}, \"range\": {\"category\": [\"#f63366\", \"#fffd80\", \"#0068c9\", \"#ff2b2b\", \"#09ab3b\"], \"diverging\": [\"#850018\", \"#cd1549\", \"#f6618d\", \"#fbafc4\", \"#f5f5f5\", \"#93c5fe\", \"#5091e6\", \"#1d5ebd\", \"#002f84\"], \"heatmap\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"], \"ramp\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"], \"ordinal\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"]}}, \"data\": {\"name\": \"data-a99664901d810a6b330d8e4930eed708\"}, \"mark\": \"point\", \"encoding\": {\"color\": {\"condition\": {\"value\": \"red\", \"test\": \"(datum.xval < SelectorName.cutoff)\"}, \"value\": \"blue\"}, \"x\": {\"field\": \"xval\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"yval\", \"type\": \"quantitative\"}}, \"selection\": {\"SelectorName\": {\"type\": \"single\", \"fields\": [\"cutoff\"], \"bind\": {\"input\": \"range\", \"max\": 100, \"min\": 0, \"name\": \"CutOff:\", \"step\": 1}, \"init\": {\"cutoff\": 50}}, \"selector011\": {\"type\": \"interval\", \"bind\": \"scales\", \"encodings\": [\"x\", \"y\"]}}, \"width\": 1024, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\", \"datasets\": {\"data-a99664901d810a6b330d8e4930eed708\": [{\"xval\": 0, \"yval\": 0.4967141530112327}, {\"xval\": 1, \"yval\": 0.358449851840048}, {\"xval\": 2, \"yval\": 1.0061383899407406}, {\"xval\": 3, \"yval\": 2.5291682463487657}, {\"xval\": 4, \"yval\": 2.2950148716254297}, {\"xval\": 5, \"yval\": 2.060877914676249}, {\"xval\": 6, \"yval\": 3.6400907301836405}, {\"xval\": 7, \"yval\": 4.407525459336549}, {\"xval\": 8, \"yval\": 3.938051073401597}, {\"xval\": 9, \"yval\": 4.4806111169875615}, {\"xval\": 10, \"yval\": 4.017193424175099}, {\"xval\": 11, \"yval\": 3.5514636706048424}, {\"xval\": 12, \"yval\": 3.7934259421708765}, {\"xval\": 13, \"yval\": 1.8801456975130786}, {\"xval\": 14, \"yval\": 0.15522786500004582}, {\"xval\": 15, \"yval\": -0.4070596642409269}, {\"xval\": 16, \"yval\": -1.4198907845753506}, {\"xval\": 17, \"yval\": -1.1056434519800766}, {\"xval\": 18, \"yval\": -2.0136675275012874}, {\"xval\": 19, \"yval\": -3.4259712288365787}, {\"xval\": 20, \"yval\": -1.9603224599150246}, {\"xval\": 21, \"yval\": -2.1860987604015603}, {\"xval\": 22, \"yval\": -2.1185705557136365}, {\"xval\": 23, \"yval\": -3.5433187419270933}, {\"xval\": 24, \"yval\": -4.087701466452276}, {\"xval\": 25, \"yval\": -3.9767788767424097}, {\"xval\": 26, \"yval\": -5.127772454164712}, {\"xval\": 27, \"yval\": -4.75207443581904}, {\"xval\": 28, \"yval\": -5.352713125737845}, {\"xval\": 29, \"yval\": -5.644406875531121}, {\"xval\": 30, \"yval\": -6.2461134877605184}, {\"xval\": 31, \"yval\": -4.3938353032515804}, {\"xval\": 32, \"yval\": -4.407332527989515}, {\"xval\": 33, \"yval\": -5.4650434569454145}, {\"xval\": 34, \"yval\": -4.642498544842225}, {\"xval\": 35, \"yval\": -5.863342194813248}, {\"xval\": 36, \"yval\": -5.654478599808492}, {\"xval\": 37, \"yval\": -7.614148723688268}, {\"xval\": 38, \"yval\": -8.942334772586698}, {\"xval\": 39, \"yval\": -8.745473536717574}, {\"xval\": 40, \"yval\": -8.007006956722163}, {\"xval\": 41, \"yval\": -7.835638675532193}, {\"xval\": 42, \"yval\": -7.951286957920433}, {\"xval\": 43, \"yval\": -8.252390653509723}, {\"xval\": 44, \"yval\": -9.73091264387715}, {\"xval\": 45, \"yval\": -10.450756852271859}, {\"xval\": 46, \"yval\": -10.911395623231646}, {\"xval\": 47, \"yval\": -9.854273397012731}, {\"xval\": 48, \"yval\": -9.51065510744427}, {\"xval\": 49, \"yval\": -11.273695262807005}, {\"xval\": 50, \"yval\": -10.94961129341221}, {\"xval\": 51, \"yval\": -11.334693573828526}, {\"xval\": 52, \"yval\": -12.011615574134485}, {\"xval\": 53, \"yval\": -11.399939285293616}, {\"xval\": 54, \"yval\": -10.368939762797666}, {\"xval\": 55, \"yval\": -9.437659643681467}, {\"xval\": 56, \"yval\": -10.276877166904105}, {\"xval\": 57, \"yval\": -10.58608954275532}, {\"xval\": 58, \"yval\": -10.254826111351756}, {\"xval\": 59, \"yval\": -9.279280984229397}, {\"xval\": 60, \"yval\": -9.758455222074687}, {\"xval\": 61, \"yval\": -9.944114198738504}, {\"xval\": 62, \"yval\": -11.050449172744532}, {\"xval\": 63, \"yval\": -12.246655796825202}, {\"xval\": 64, \"yval\": -11.434129974431004}, {\"xval\": 65, \"yval\": -10.07788994586018}, {\"xval\": 66, \"yval\": -10.149900067440514}, {\"xval\": 67, \"yval\": -9.14636716954849}, {\"xval\": 68, \"yval\": -8.784731144500856}, {\"xval\": 69, \"yval\": -9.42985089910598}, {\"xval\": 70, \"yval\": -9.068455293597568}, {\"xval\": 71, \"yval\": -7.5304187271315985}, {\"xval\": 72, \"yval\": -7.56624476624155}, {\"xval\": 73, \"yval\": -6.001601110427544}, {\"xval\": 74, \"yval\": -8.621346214517288}, {\"xval\": 75, \"yval\": -7.799443710142064}, {\"xval\": 76, \"yval\": -7.712396641903893}, {\"xval\": 77, \"yval\": -8.011403992369761}, {\"xval\": 78, \"yval\": -7.919643215834259}, {\"xval\": 79, \"yval\": -9.907212130435152}, {\"xval\": 80, \"yval\": -10.126884018272664}, {\"xval\": 81, \"yval\": -9.769771446760917}, {\"xval\": 82, \"yval\": -8.2918774020194}, {\"xval\": 83, \"yval\": -8.810147620293048}, {\"xval\": 84, \"yval\": -9.618641223186236}, {\"xval\": 85, \"yval\": -10.120398266770772}, {\"xval\": 86, \"yval\": -9.204996149068698}, {\"xval\": 87, \"yval\": -8.876245039409014}, {\"xval\": 88, \"yval\": -9.406005243176052}, {\"xval\": 89, \"yval\": -8.892737810062696}, {\"xval\": 90, \"yval\": -8.795660260714657}, {\"xval\": 91, \"yval\": -7.827015270181768}, {\"xval\": 92, \"yval\": -8.529068364059121}, {\"xval\": 93, \"yval\": -8.85673051065689}, {\"xval\": 94, \"yval\": -9.248838663789048}, {\"xval\": 95, \"yval\": -10.712353611921166}, {\"xval\": 96, \"yval\": -10.41623333485659}, {\"xval\": 97, \"yval\": -10.1551780626767}, {\"xval\": 98, \"yval\": -10.15006460603424}, {\"xval\": 99, \"yval\": -10.384651739409387}]}}, {\"mode\": \"vega-lite\"});\n",
-       "</script>"
-      ],
-      "text/plain": [
-       "alt.Chart(...)"
-      ]
-     },
-     "execution_count": 70,
-     "metadata": {},
-     "output_type": "execute_result"
+   "execution_count": 2,
+   "metadata": {
+    "ExecuteTime": {
+     "end_time": "2017-08-15T00:19:30.835126Z",
+     "start_time": "2017-08-15T00:19:29.885794Z"
     }
-   ],
+   },
+   "outputs": [],
    "source": [
-    "# nbi:hide_in\n",
-    "rand = np.random.RandomState(42)\n",
+    "def main(rabbits_birthrate, rabbits_deathrate, foxes_birthrate,\n",
+    "         foxes_deathrate, initial_rabbits, foxes_inicial, days):\n",
     "\n",
-    "df = pd.DataFrame({\n",
-    "    'xval': range(100),\n",
-    "    'yval': rand.randn(100).cumsum()\n",
-    "})\n",
+    "    def function(s, t):\n",
+    "        x, y = s\n",
+    "        dydt = [\n",
+    "            rabbits_birthrate * x - rabbits_deathrate * x * y, # dx/dy -> Change in Rabbits\n",
+    "            foxes_birthrate * x * y - foxes_deathrate * y      # dy/dt -> Change in Foxes\n",
+    "        ]\n",
+    "        \n",
+    "        return dydt\n",
+    "    \n",
+    "    time = np.arange(0, days, 0.01)\n",
+    "    initial_conditions = [initial_rabbits, foxes_inicial]\n",
+    "    solution = odeint(function, initial_conditions, time)\n",
     "\n",
-    "slider = alt.binding_range(min=0, max=100, step=1, name='CutOff:')\n",
-    "selector = alt.selection_single(\n",
-    "    name=\"SelectorName\", fields=['cutoff'],\n",
-    "    bind=slider, init={'cutoff': 50})\n",
+    "    #Graphic details\n",
+    "    fig, axes = plt.subplots(1, 2, figsize=(15, 10))\n",
+    "    \n",
+    "    ax = axes[0]\n",
+    "    \n",
+    "    ax.plot(time, solution[:, 0], label='Rabbits(t)')\n",
+    "    ax.plot(time, solution[:, 1], label='Foxes(t)')\n",
+    "    \n",
+    "    if days <= 30:\n",
+    "        step = 1\n",
+    "        rotation = \"horizontal\"\n",
+    "    elif days <= 150:\n",
+    "        step = 5\n",
+    "        rotation = \"vertical\"\n",
+    "    else:\n",
+    "        step = 10\n",
+    "        rotation = \"vertical\"\n",
+    "    \n",
+    "    ax.set_xticklabels(np.arange(0, days + 1, step, dtype=int), rotation=rotation)\n",
+    "    ax.set_xticks(np.arange(0, days + 1, step))\n",
+    "        \n",
+    "    ax.set_xlim([0, days])\n",
+    "    ax.set_ylim([0, max(max(solution[:, 0]), max(solution[:, 1])) * 1.05])\n",
+    "    ax.set_xlabel('Time')\n",
+    "    ax.set_ylabel('Population')\n",
+    "    ax.legend(loc='best')\n",
+    "    ax.grid()\n",
+    "    \n",
+    "    \n",
+    "    ax = axes[1]\n",
+    "    \n",
+    "    ax.plot(solution[:, 0], solution[:, 1], label='Foxes vs Rabbits')\n",
     "\n",
-    "alt.Chart(df).mark_point().encode(\n",
-    "    x='xval',\n",
-    "    y='yval',\n",
-    "    color=alt.condition(\n",
-    "        alt.datum.xval < selector.cutoff,\n",
-    "        alt.value('red'), alt.value('blue')\n",
-    "    )\n",
-    ").add_selection(\n",
-    "    selector\n",
-    ").interactive().properties(width=1024)\n"
+    "    ax.set_xlim([0, max(solution[:, 0]) * 1.05])\n",
+    "    ax.set_ylim([0, max(solution[:, 1]) * 1.05])\n",
+    "    ax.set_xlabel('Rabbits')\n",
+    "    ax.set_ylabel('Foxes')\n",
+    "    ax.legend(loc='best')\n",
+    "    ax.grid()\n",
+    "    \n",
+    "    plt.tight_layout()\n",
+    "    plt.show()"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "#### Multiple Interactions\n",
-    "\n",
-    "This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows:\n",
-    "\n",
-    "* Dropdown: Filters the movies by genre\n",
-    "* Radio Buttons: Highlights certain films by Worldwide Gross\n",
-    "* Mouse Drag and Scroll: Zooms the x and y scales to allow for panning.\n",
-    "\n"
+    "#### Evaluation"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 71,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [
     {
      "data": {
-      "text/html": [
-       "\n",
-       "<div id=\"altair-viz-acd9e9c4a68a497f9c1777981b7664c5\"></div>\n",
-       "<script type=\"text/javascript\">\n",
-       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
-       "  (function(spec, embedOpt){\n",
-       "    let outputDiv = document.currentScript.previousElementSibling;\n",
-       "    if (outputDiv.id !== \"altair-viz-acd9e9c4a68a497f9c1777981b7664c5\") {\n",
-       "      outputDiv = document.getElementById(\"altair-viz-acd9e9c4a68a497f9c1777981b7664c5\");\n",
-       "    }\n",
-       "    const paths = {\n",
-       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
-       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
-       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
-       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
-       "    };\n",
-       "\n",
-       "    function maybeLoadScript(lib, version) {\n",
-       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
-       "      return (VEGA_DEBUG[key] == version) ?\n",
-       "        Promise.resolve(paths[lib]) :\n",
-       "        new Promise(function(resolve, reject) {\n",
-       "          var s = document.createElement('script');\n",
-       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
-       "          s.async = true;\n",
-       "          s.onload = () => {\n",
-       "            VEGA_DEBUG[key] = version;\n",
-       "            return resolve(paths[lib]);\n",
-       "          };\n",
-       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
-       "          s.src = paths[lib];\n",
-       "        });\n",
-       "    }\n",
-       "\n",
-       "    function showError(err) {\n",
-       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
-       "      throw err;\n",
-       "    }\n",
-       "\n",
-       "    function displayChart(vegaEmbed) {\n",
-       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
-       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
-       "    }\n",
-       "\n",
-       "    if(typeof define === \"function\" && define.amd) {\n",
-       "      requirejs.config({paths});\n",
-       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
-       "    } else {\n",
-       "      maybeLoadScript(\"vega\", \"5\")\n",
-       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
-       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
-       "        .catch(showError)\n",
-       "        .then(() => displayChart(vegaEmbed));\n",
-       "    }\n",
-       "  })({\"config\": {\"view\": {\"fill\": \"#f0f2f6\"}, \"arc\": {\"fill\": \"#F63366\"}, \"area\": {\"fill\": \"#F63366\"}, \"circle\": {\"fill\": \"#F63366\", \"stroke\": \"#262730\", \"strokeWidth\": 0.5}, \"line\": {\"stroke\": \"#F63366\"}, \"path\": {\"stroke\": \"#F63366\"}, \"point\": {\"stroke\": \"#F63366\"}, \"rect\": {\"fill\": \"#F63366\"}, \"shape\": {\"stroke\": \"#F63366\"}, \"symbol\": {\"fill\": \"#F63366\"}, \"title\": {\"font\": \"IBM Plex Mono\", \"color\": \"#262730\", \"fontSize\": 20.0, \"anchor\": \"start\"}, \"axis\": {\"titleFont\": \"IBM Plex Mono\", \"titleColor\": \"#262730\", \"titleFontSize\": 12.8, \"labelFont\": \"IBM Plex Mono\", \"labelColor\": \"#262730\", \"labelFontSize\": 12.8, \"grid\": true, \"gridColor\": \"#fff\", \"gridOpacity\": 1, \"domain\": false, \"tickColor\": \"#262730\"}, \"header\": {\"labelFont\": \"IBM Plex Mono\", \"titleFont\": \"IBM Plex Mono\", \"labelFontSize\": 16, \"titleFontSize\": 16}, \"legend\": {\"titleFont\": \"IBM Plex Mono\", \"titleColor\": \"#262730\", \"titleFontSize\": 12.8, \"labelFont\": \"IBM Plex Mono\", \"labelColor\": \"#262730\", \"labelFontSize\": 12.8}, \"range\": {\"category\": [\"#f63366\", \"#fffd80\", \"#0068c9\", \"#ff2b2b\", \"#09ab3b\"], \"diverging\": [\"#850018\", \"#cd1549\", \"#f6618d\", \"#fbafc4\", \"#f5f5f5\", \"#93c5fe\", \"#5091e6\", \"#1d5ebd\", \"#002f84\"], \"heatmap\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"], \"ramp\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"], \"ordinal\": [\"#ffb5d4\", \"#ff97b8\", \"#ff7499\", \"#fc4c78\", \"#ec245f\", \"#d2004b\", \"#b10034\", \"#91001f\", \"#720008\"]}}, \"vconcat\": [{\"hconcat\": [{\"mark\": {\"type\": \"point\", \"filled\": true}, \"encoding\": {\"tooltip\": {\"field\": \"Title\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Worldwide_Gross\", \"scale\": {\"clamp\": true, \"domain\": [100000, 1000000000]}, \"type\": \"quantitative\"}, \"y\": {\"field\": \"IMDB_Rating\", \"type\": \"quantitative\"}}, \"height\": 200, \"selection\": {\"Release Year_\": {\"type\": \"single\", \"bind\": {\"input\": \"range\", \"max\": 2018, \"min\": 1969, \"step\": 1}, \"fields\": [\"Release_Year\"]}}, \"title\": \"Slider Filtering\", \"transform\": [{\"calculate\": \"floor(datum.IMDB_Rating)\", \"as\": \"Rounded_IMDB_Rating\"}, {\"calculate\": \"datum.Production_Budget > 100000000.0 ? 100 : 10\", \"as\": \"Hundred_Million_Production\"}, {\"calculate\": \"year(datum.Release_Date)\", \"as\": \"Release_Year\"}, {\"filter\": \"(datum.IMDB_Rating > 0)\"}, {\"filter\": {\"field\": \"MPAA_Rating\", \"oneOf\": [\"G\", \"NC-17\", \"PG\", \"PG-13\", \"R\"]}}, {\"filter\": {\"selection\": \"Release Year_\"}}], \"width\": 200}, {\"mark\": {\"type\": \"point\", \"filled\": true}, \"encoding\": {\"tooltip\": {\"field\": \"Title\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Worldwide_Gross\", \"scale\": {\"clamp\": true, \"domain\": [100000, 1000000000]}, \"type\": \"quantitative\"}, \"y\": {\"field\": \"IMDB_Rating\", \"type\": \"quantitative\"}}, \"height\": 200, \"selection\": {\"Genre\": {\"type\": \"single\", \"fields\": [\"Major_Genre\"], \"bind\": {\"input\": \"select\", \"options\": [\"Action\", \"Adventure\", \"Black Comedy\", \"Comedy\", \"Concert/Performance\", \"Documentary\", \"Drama\", \"Horror\", \"Musical\", \"Romantic Comedy\", \"Thriller/Suspense\", \"Western\"]}}}, \"title\": \"Dropdown Filtering\", \"transform\": [{\"calculate\": \"floor(datum.IMDB_Rating)\", \"as\": \"Rounded_IMDB_Rating\"}, {\"calculate\": \"datum.Production_Budget > 100000000.0 ? 100 : 10\", \"as\": \"Hundred_Million_Production\"}, {\"calculate\": \"year(datum.Release_Date)\", \"as\": \"Release_Year\"}, {\"filter\": \"(datum.IMDB_Rating > 0)\"}, {\"filter\": {\"field\": \"MPAA_Rating\", \"oneOf\": [\"G\", \"NC-17\", \"PG\", \"PG-13\", \"R\"]}}, {\"filter\": {\"selection\": \"Genre\"}}], \"width\": 200}]}, {\"hconcat\": [{\"mark\": {\"type\": \"point\", \"filled\": true}, \"encoding\": {\"color\": {\"condition\": {\"field\": \"MPAA_Rating\", \"legend\": null, \"type\": \"nominal\", \"selection\": \"Rating\"}, \"value\": \"lightgray\"}, \"tooltip\": {\"field\": \"Title\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Worldwide_Gross\", \"scale\": {\"clamp\": true, \"domain\": [100000, 1000000000]}, \"type\": \"quantitative\"}, \"y\": {\"field\": \"IMDB_Rating\", \"type\": \"quantitative\"}}, \"height\": 200, \"selection\": {\"Rating\": {\"type\": \"single\", \"fields\": [\"MPAA_Rating\"], \"bind\": {\"input\": \"radio\", \"options\": [\"G\", \"NC-17\", \"PG\", \"PG-13\", \"R\"]}}}, \"title\": \"Radio Button Highlighting\", \"transform\": [{\"calculate\": \"floor(datum.IMDB_Rating)\", \"as\": \"Rounded_IMDB_Rating\"}, {\"calculate\": \"datum.Production_Budget > 100000000.0 ? 100 : 10\", \"as\": \"Hundred_Million_Production\"}, {\"calculate\": \"year(datum.Release_Date)\", \"as\": \"Release_Year\"}, {\"filter\": \"(datum.IMDB_Rating > 0)\"}, {\"filter\": {\"field\": \"MPAA_Rating\", \"oneOf\": [\"G\", \"NC-17\", \"PG\", \"PG-13\", \"R\"]}}], \"width\": 200}, {\"mark\": {\"type\": \"point\", \"filled\": true}, \"encoding\": {\"size\": {\"condition\": {\"value\": 25, \"selection\": \"Budget Films\"}, \"field\": \"Hundred_Million_Production\", \"type\": \"quantitative\"}, \"tooltip\": {\"field\": \"Title\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Worldwide_Gross\", \"scale\": {\"clamp\": true, \"domain\": [100000, 1000000000]}, \"type\": \"quantitative\"}, \"y\": {\"field\": \"IMDB_Rating\", \"type\": \"quantitative\"}}, \"height\": 200, \"selection\": {\"Budget Films\": {\"type\": \"single\", \"bind\": {\"input\": \"checkbox\"}}}, \"title\": \"Checkbox Formatting\", \"transform\": [{\"calculate\": \"floor(datum.IMDB_Rating)\", \"as\": \"Rounded_IMDB_Rating\"}, {\"calculate\": \"datum.Production_Budget > 100000000.0 ? 100 : 10\", \"as\": \"Hundred_Million_Production\"}, {\"calculate\": \"year(datum.Release_Date)\", \"as\": \"Release_Year\"}, {\"filter\": \"(datum.IMDB_Rating > 0)\"}, {\"filter\": {\"field\": \"MPAA_Rating\", \"oneOf\": [\"G\", \"NC-17\", \"PG\", \"PG-13\", \"R\"]}}], \"width\": 200}]}], \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/movies.json\", \"format\": {\"parse\": {\"Release_Date\": \"date\"}}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\"}, {\"mode\": \"vega-lite\"});\n",
-       "</script>"
-      ],
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "d630678e7e9046dd8654f6b3659b823b",
+       "version_major": 2,
+       "version_minor": 0
+      },
       "text/plain": [
-       "alt.VConcatChart(...)"
+       "interactive(children=(FloatSlider(value=1.0, description='Birth Rate/Rabbits', layout=Layout(width='99%'), max…"
       ]
      },
-     "execution_count": 71,
      "metadata": {},
-     "output_type": "execute_result"
+     "output_type": "display_data"
     }
    ],
    "source": [
-    "movies = alt.UrlData(\n",
-    "    data.movies.url,\n",
-    "    format=alt.DataFormat(parse={\"Release_Date\":\"date\"})\n",
-    ")\n",
-    "ratings = ['G', 'NC-17', 'PG', 'PG-13', 'R']\n",
-    "genres = ['Action', 'Adventure', 'Black Comedy', 'Comedy',\n",
-    "       'Concert/Performance', 'Documentary', 'Drama', 'Horror', 'Musical',\n",
-    "       'Romantic Comedy', 'Thriller/Suspense', 'Western']\n",
-    "\n",
-    "labels = ['All', 'Action', 'Adventure', 'Black Comedy', 'Comedy',\n",
-    "       'Concert/Performance', 'Documentary', 'Drama', 'Horror', 'Musical',\n",
-    "       'Romantic Comedy', 'Thriller/Suspense', 'Western']\n",
-    "\n",
-    "base = alt.Chart(movies, width=200, height=200).mark_point(filled=True).transform_calculate(\n",
-    "    Rounded_IMDB_Rating = \"floor(datum.IMDB_Rating)\",\n",
-    "    Hundred_Million_Production =  \"datum.Production_Budget > 100000000.0 ? 100 : 10\",\n",
-    "    Release_Year = \"year(datum.Release_Date)\"\n",
-    ").transform_filter(\n",
-    "    alt.datum.IMDB_Rating > 0\n",
-    ").transform_filter(\n",
-    "    alt.FieldOneOfPredicate(field='MPAA_Rating', oneOf=ratings)\n",
-    ").encode(\n",
-    "    x=alt.X('Worldwide_Gross:Q', scale=alt.Scale(domain=(100000,10**9), clamp=True)),\n",
-    "    y='IMDB_Rating:Q',\n",
-    "    tooltip=\"Title:N\"\n",
-    ")\n",
-    "\n",
-    "# A slider filter\n",
-    "year_slider = alt.binding_range(min=1969, max=2018, step=1)\n",
-    "slider_selection = alt.selection_single(bind=year_slider, fields=['Release_Year'], name=\"Release Year_\")\n",
-    "\n",
-    "\n",
-    "filter_year = base.add_selection(\n",
-    "    slider_selection\n",
-    ").transform_filter(\n",
-    "    slider_selection\n",
-    ").properties(title=\"Slider Filtering\")\n",
-    "\n",
-    "# A dropdown filter\n",
-    "genre_dropdown = alt.binding_select(options=genres)\n",
-    "genre_select = alt.selection_single(fields=['Major_Genre'], bind=genre_dropdown, name='Genre')\n",
-    "\n",
-    "filter_genres = base.add_selection(\n",
-    "    genre_select\n",
-    ").transform_filter(\n",
-    "    genre_select\n",
-    ").properties(title=\"Dropdown Filtering\")\n",
-    "\n",
-    "#color changing marks\n",
-    "rating_radio = alt.binding_radio(options=ratings)\n",
-    "\n",
-    "rating_select = alt.selection_single(fields=['MPAA_Rating'], bind=rating_radio, name='Rating')\n",
-    "rating_color_condition = alt.condition(rating_select,\n",
-    "                      alt.Color('MPAA_Rating:N', legend=None),\n",
-    "                      alt.value('lightgray'))\n",
-    "\n",
-    "highlight_ratings = base.add_selection(\n",
-    "    rating_select\n",
-    ").encode(\n",
-    "    color=rating_color_condition\n",
-    ").properties(title=\"Radio Button Highlighting\")\n",
-    "\n",
-    "# Boolean selection for format changes\n",
-    "input_checkbox = alt.binding_checkbox()\n",
-    "checkbox_selection = alt.selection_single(bind=input_checkbox, name='Budget Films')\n",
-    "\n",
-    "size_checkbox_condition = alt.condition(checkbox_selection,\n",
-    "                                        alt.SizeValue(25),\n",
-    "                                        alt.Size('Hundred_Million_Production:Q')\n",
-    "                                       )\n",
-    "\n",
-    "budget_sizing = base.add_selection(\n",
-    "    checkbox_selection\n",
-    ").encode(\n",
-    "    size=size_checkbox_condition\n",
-    ").properties(title=\"Checkbox Formatting\")\n",
-    "\n",
-    "\n",
-    "( filter_year | filter_genres) & (highlight_ratings | budget_sizing  )\n"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "#### Fick Dich"
+    "interact(main, \n",
+    "        rabbits_birthrate=FloatSlider(min=1, max=25, step=1, value=1, \n",
+    "               description='Birth Rate/Rabbits', style=style, layout=slider_layout),\n",
+    "        rabbits_deathrate=FloatSlider(min=1, max=25, step=1, value=1,\n",
+    "                description='Death Rate/Rabbits', style=style, layout=slider_layout),\n",
+    "        foxes_birthrate=FloatSlider(min=0, max=25, step=1, value=1,\n",
+    "                description='Birth Rate/Foxes', style=style, layout=slider_layout),\n",
+    "        foxes_deathrate=FloatSlider(min=0, max=25, step=1, value=1,\n",
+    "                description='Death Rate/Foxes', style=style, layout=slider_layout),\n",
+    "        initial_rabbits=FloatSlider(min=2 , max=100, step=1, value=2,\n",
+    "                description='Initial Rabbits', style=style, layout=slider_layout),\n",
+    "        foxes_inicial=FloatSlider(min=1 , max=100, step=1, value=1,\n",
+    "                description='Initial Foxes', style=style, layout=slider_layout),\n",
+    "        days=FloatSlider(min=15, max=365 , step=10, value=15,\n",
+    "                description='Number of Days', style=style, layout=slider_layout),\n",
+    "        );"
    ]
   }
  ],