04 Jupyter Notebook 超炫的互動功能.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Python Tutor](images/pythontutor.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "我們介紹兩個很好的 Python 學習資源。\n",
    "\n",
    "### 1. W3Schools\n",
    "\n",
    "W3Schools 向來是學習網路相關語言 HTML, CSS, JavaScript 等很棒的地方, 現在他們也有 [Python 教學](https://www.w3schools.com/python/default.asp)。除了基本語法的介紹, 還有線上作業練習, 很快可以進入狀況!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2. Python Tutor\n",
    "\n",
    "在 [Python Tutor](http://pythontutor.com/visualize.html#mode=edit) 當中, 只要你打入一段 Python 程式, 就可以一步步看它執行, 而且還有各個變數的變化。非常適合瞭解 Python 程式是怎麼運作的!\n",
    "\n",
    "![Python Tutor](images/pythontutor_visual.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Jupyter Notebook 的互動功能](images/T_interact.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Jupyter Notebook 有個很酷的互動功能, 基本上任何有帶參數的式函都可以互動! 我們要用到的是\n",
    "\n",
    "    ipywidgets\n",
    "    \n",
    "中的 `interact` 函式。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "%matplotlib inline\n",
    "\n",
    "import numpy as np\n",
    "import matplotlib.pyplot as plt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import interact"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 有函數就有互動\n",
    "\n",
    "我們來定義個超級簡單的函數。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "def f(x):\n",
    "    print(x)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 數值滑桿"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fc094783a57341778aa25ad3e77bf9b4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=3, description='x', max=9, min=-3), Output()), _dom_classes=('widget-int…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x=3)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這樣數值滑桿就出現了!! 這樣不是浮點數, 有可能變成浮點數數值滑桿嗎?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "93419e4aebc0423e9ff16a3947e2b3c1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=3.0, description='x', max=9.0, min=-3.0), Output()), _dom_classes=('wi…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x=3.0)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "指定範圍。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1af99c0f1b32472181f096bba2cf6931",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=5, description='x', max=10, min=1), Output()), _dom_classes=('widget-int…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x=(1, 10))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 文字框"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9435a62d2c5248b887db30126b70618f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Text(value='輸入你的姓名', description='x'), Output()), _dom_classes=('widget-interact',))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x = \"輸入你的姓名\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 下拉式選單 (串列篇)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "98eb8c941bd2431891fd9c839eff68a8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Dropdown(description='x', options=('台北', '台中', '高雄'), value='台北'), Output()), _dom_class…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 27,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x = [\"台北\", \"台中\", \"高雄\"])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 下拉式選單 (字典篇)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ec88b870268743d5b5df44d7801fae78",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Dropdown(description='x', options={'台北': 1, '台中': 2, '高雄': 3}, value=1), Output()), _dom…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.f(x)>"
      ]
     },
     "execution_count": 30,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(f, x = {\"台北\":1, \"台中\":2, \"高雄\":3})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 範例"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [],
   "source": [
    "def move(n=1):\n",
    "    print(\" \"*n + \"⸜(* ॑꒳ ॑* )⸝\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "注意 Python 的函式怎麼給預設值。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3d79d1a4c9aa40428d6ac093d6c7e397",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=1, description='n', max=80, min=1), Output()), _dom_classes=('widget-int…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "interact(move, n=(1, 80));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 畫圖的範例"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [],
   "source": [
    "x = np.linspace(-10, 10, 500)\n",
    "\n",
    "def myplot(n=1):\n",
    "    y = np.sinc(n*x)\n",
    "    plt.plot(x, y)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b7d0da6b124642ecb930528347f81f69",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(FloatSlider(value=1.0, description='n', max=10.0, min=1.0), Output()), _dom_classes=('wi…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.myplot(n=1)>"
      ]
     },
     "execution_count": 37,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interact(myplot, n=(1., 10.))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 按鈕之後才互動\n",
    "\n",
    "我們也可以不要那麼及時, 而是「按鈕之後」才執行。這時可以用 `interact_manual`, 用法基本上和 `interact` 一樣!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import interact_manual"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {},
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "from IPython.display import clear_output"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這裡我們用了兩個套件中的兩個函式, 其中:\n",
    "    \n",
    "* `sleep(n)`: 要 Python 暫停 n 秒。\n",
    "* `clear_output()`: 清除 Jupyter Notebook 當前 cell 的東西。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [],
   "source": [
    "def pipi(message):\n",
    "    print(\"拍拍\")\n",
    "    sleep(2)\n",
    "    clear_output()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c95508f361324edb9b338e531db506de",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(Text(value='請輸入你要說的話', description='message'), Button(description='Run Interact', style=…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "interact_manual(pipi, message=\"請輸入你要說的話\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![map 和 filter](images/T_map_and_filter.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `map` 篇\n",
    "\n",
    "還記得之前我們要把一個串列裡的法郎, 一次全換算成台幣, 需要用迴圈一個個做嗎? 現在我們學會函式的寫法, 可以先寫一個「匯率換算」的程式, 然後用 `map` 一次把串列中所有的錢換算好!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 問題\n",
    "\n",
    "這次我們到了澳洲, 又是要買三件物品, 價格分別是\n",
    "\n",
    "    200, 450, 35\n",
    "    \n",
    "澳幣。我們又 Google 了一下, 發現 1 澳幣合台幣 21.8686884 元, 於是我們寫個函數來換算一下。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "c = 21.8686884\n",
    "\n",
    "def aud2twd(m):\n",
    "    return c*m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "我們來試用一下, 假設我們想知道 100 澳幣合台幣多少。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "2186.86884"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "aud2twd(100)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "現在來換算我們三個物品合台幣多少。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "price = [200, 450, 35]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![map 使用方式](images/map.png)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<map at 0x7ff5484a6a58>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "map(aud2twd, price)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "耶? 這什麼意思? 原來我們真的要「看到」, 需要把這個 `map` 用串列表現出來。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4373.73768, 9840.90978, 765.404094]"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "list(map(aud2twd, price))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `lambda`: 臨時要使用的函數\n",
    "\n",
    "`map` 看來挺方便的, 不過還是有一個問題, 需要特別去定義一個函數。這麼簡單的函數, 難道不能臨時定義一個嗎? 答案是肯定的, `lambda` 就是為臨時要用的函數而生。定義方式非常簡單:\n",
    "\n",
    "![lambda 的使用](images/lambda.png)\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4373.73768, 9840.90978, 765.404094]"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "list(map(lambda x:c*x, price))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "果然一次成功!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `filter` 篇\n",
    "\n",
    "現在我們來討論 `filter`。要使用 `filter`, 我們需要定義一個輸出為布林值 (Ture/Flase) 的函數。然後用 filter 過濾, 如果一個串列中符合這個要求 (True) 的就留下來, 否則就去掉。\n",
    "\n",
    "![filter](images/filter.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 問題\n",
    "\n",
    "在一個 1-20 的串列中, 我們想找出其中為偶數的數字。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "def isEven(n):\n",
    "    if n%2 == 0:\n",
    "        return True\n",
    "    else:\n",
    "        return False"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "這樣可以檢查是不是偶數, 我們來試試!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "True"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "isEven(94)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "False"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "isEven(87)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "濾出偶數!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "L = range(1, 21)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "range(1, 21)"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "L"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "list(filter(isEven, L))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "果然成功了!\n",
    "\n",
    "我們可能用 `lambda` 做這件事嗎?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "list(filter(lambda x:x%2==0, L))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "一樣可以!!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}