Use gr.lineplot for kinematics demo (#2998)

* Use lineplot for kinematics

* Changelog

CHANGELOG.md

@@ -14,7 +14,7 @@ No changes to highlight.
 * Fixes issue where markdown support in chatbot breaks older demos [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3006](https://github.com/gradio-app/gradio/pull/3006) 
 
 ## Documentation Changes:
-No changes to highlight.
+* Use `gr.LinePlot` for the `blocks_kinematics` demo by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2998](https://github.com/gradio-app/gradio/pull/2998)  
 
 ## Testing and Infrastructure Changes:
 No changes to highlight.

demo/blocks_kinematics/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import matplotlib\n", "matplotlib.use('Agg')\n", "import matplotlib.pyplot as plt\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "\n", "def plot(v, a):\n", "    g = 9.81\n", "    theta = a / 180 * 3.14\n", "    tmax = ((2 * v) * np.sin(theta)) / g\n", "    timemat = tmax * np.linspace(0, 1, 40)[:, None]\n", "\n", "    x = (v * timemat) * np.cos(theta)\n", "    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "\n", "    fig = plt.figure()\n", "    plt.scatter(x=x, y=y, marker=\".\")\n", "    plt.xlim(0, 100)\n", "    plt.ylim(0, 60)\n", "    return fig\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    gr.Markdown(\n", "        r\"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \\cdot \\frac{\\sin(2\\theta)}{g}$\"\n", "    )\n", "\n", "    with gr.Row():\n", "        speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", "        angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", "    output = gr.Plot()\n", "    btn = gr.Button(value=\"Run\")\n", "    btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "\n", "def plot(v, a):\n", "    g = 9.81\n", "    theta = a / 180 * 3.14\n", "    tmax = ((2 * v) * np.sin(theta)) / g\n", "    timemat = tmax * np.linspace(0, 1, 40)\n", "\n", "    x = (v * timemat) * np.cos(theta)\n", "    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "    df = pd.DataFrame({\"x\": x, \"y\": y})\n", "    return df\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    gr.Markdown(\n", "        r\"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \\cdot \\frac{\\sin(2\\theta)}{g}$\"\n", "    )\n", "\n", "    with gr.Row():\n", "        speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", "        angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", "    output = gr.LinePlot(\n", "        x=\"x\",\n", "        y=\"y\",\n", "        overlay_point=True,\n", "        tooltip=[\"x\", \"y\"],\n", "        x_lim=[0, 100],\n", "        y_lim=[0, 60],\n", "        width=350,\n", "        height=300,\n", "    )\n", "    btn = gr.Button(value=\"Run\")\n", "    btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_kinematics/run.py

@@ -1,6 +1,4 @@
-import matplotlib
-matplotlib.use('Agg')
-import matplotlib.pyplot as plt
+import pandas as pd
 import numpy as np
 
 import gradio as gr
@@ -10,16 +8,12 @@ def plot(v, a):
     g = 9.81
     theta = a / 180 * 3.14
     tmax = ((2 * v) * np.sin(theta)) / g
-    timemat = tmax * np.linspace(0, 1, 40)[:, None]
+    timemat = tmax * np.linspace(0, 1, 40)
 
     x = (v * timemat) * np.cos(theta)
     y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
-
-    fig = plt.figure()
-    plt.scatter(x=x, y=y, marker=".")
-    plt.xlim(0, 100)
-    plt.ylim(0, 60)
-    return fig
+    df = pd.DataFrame({"x": x, "y": y})
+    return df
 
 
 demo = gr.Blocks()
@@ -32,7 +26,16 @@ with demo:
     with gr.Row():
         speed = gr.Slider(1, 30, 25, label="Speed")
         angle = gr.Slider(0, 90, 45, label="Angle")
-    output = gr.Plot()
+    output = gr.LinePlot(
+        x="x",
+        y="y",
+        overlay_point=True,
+        tooltip=["x", "y"],
+        x_lim=[0, 100],
+        y_lim=[0, 60],
+        width=350,
+        height=300,
+    )
     btn = gr.Button(value="Run")
     btn.click(plot, [speed, angle], output)