Better plot demos for docs (#4528)

* scatter plot demo

* bar plot

* line plot

* notebooks

* adding demos to docstrings

* put demos in docstrings

* fixes

* notebooks

* show label

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

demo/bar_plot/requirements.txt

@@ -0,0 +1 @@
+pandas

demo/bar_plot/run.py

@@ -0,0 +1,140 @@
+import gradio as gr
+import pandas as pd
+import random
+
+simple = pd.DataFrame(
+    {
+        "a": ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
+        "b": [28, 55, 43, 91, 81, 53, 19, 87, 52],
+    }
+)
+
+fake_barley = pd.DataFrame(
+    {
+        "site": [
+            random.choice(
+                [
+                    "University Farm",
+                    "Waseca",
+                    "Morris",
+                    "Crookston",
+                    "Grand Rapids",
+                    "Duluth",
+                ]
+            )
+            for _ in range(120)
+        ],
+        "yield": [random.randint(25, 75) for _ in range(120)],
+        "variety": [
+            random.choice(
+                [
+                    "Manchuria",
+                    "Wisconsin No. 38",
+                    "Glabron",
+                    "No. 457",
+                    "No. 462",
+                    "No. 475",
+                ]
+            )
+            for _ in range(120)
+        ],
+        "year": [
+            random.choice(
+                [
+                    "1931",
+                    "1932",
+                ]
+            )
+            for _ in range(120)
+        ],
+    }
+)
+
+
+def bar_plot_fn(display):
+    if display == "simple":
+        return gr.BarPlot.update(
+            simple,
+            x="a",
+            y="b",
+            title="Simple Bar Plot with made up data",
+            tooltip=["a", "b"],
+            y_lim=[20, 100],
+        )
+    elif display == "stacked":
+        return gr.BarPlot.update(
+            fake_barley,
+            x="variety",
+            y="yield",
+            color="site",
+            title="Barley Yield Data",
+            tooltip=["variety", "site"],
+        )
+    elif display == "grouped":
+        return gr.BarPlot.update(
+            fake_barley.astype({"year": str}),
+            x="year",
+            y="yield",
+            color="year",
+            group="site",
+            title="Barley Yield by Year and Site",
+            group_title="",
+            tooltip=["yield", "site", "year"],
+        )
+    elif display == "simple-horizontal":
+        return gr.BarPlot.update(
+            simple,
+            x="a",
+            y="b",
+            x_title="Variable A",
+            y_title="Variable B",
+            title="Simple Bar Plot with made up data",
+            tooltip=["a", "b"],
+            vertical=False,
+            y_lim=[20, 100],
+        )
+    elif display == "stacked-horizontal":
+        return gr.BarPlot.update(
+            fake_barley,
+            x="variety",
+            y="yield",
+            color="site",
+            title="Barley Yield Data",
+            vertical=False,
+            tooltip=["variety", "site"],
+        )
+    elif display == "grouped-horizontal":
+        return gr.BarPlot.update(
+            fake_barley.astype({"year": str}),
+            x="year",
+            y="yield",
+            color="year",
+            group="site",
+            title="Barley Yield by Year and Site",
+            group_title="",
+            tooltip=["yield", "site", "year"],
+            vertical=False,
+        )
+
+
+with gr.Blocks() as bar_plot:
+    with gr.Row():
+        with gr.Column():
+            display = gr.Dropdown(
+                choices=[
+                    "simple",
+                    "stacked",
+                    "grouped",
+                    "simple-horizontal",
+                    "stacked-horizontal",
+                    "grouped-horizontal",
+                ],
+                value="simple",
+                label="Type of Bar Plot",
+            )
+        with gr.Column():
+            plot = gr.BarPlot()
+    display.change(bar_plot_fn, inputs=display, outputs=plot)
+    bar_plot.load(fn=bar_plot_fn, inputs=display, outputs=plot)
+
+bar_plot.launch()

demo/line_plot/requirements.txt

@@ -0,0 +1,2 @@
+vega_datasets
+pandas

demo/line_plot/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: line_plot"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets pandas"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "stocks = data.stocks()\n", "gapminder = data.gapminder()\n", "gapminder = gapminder.loc[\n", "    gapminder.country.isin([\"Argentina\", \"Australia\", \"Afghanistan\"])\n", "]\n", "climate = data.climate()\n", "seattle_weather = data.seattle_weather()\n", "\n", "## Or generate your own fake data, here's an example for stocks:\n", "#\n", "# import pandas as pd\n", "# import random\n", "#\n", "# stocks = pd.DataFrame(\n", "#     {\n", "#         \"symbol\": [\n", "#             random.choice(\n", "#                 [\n", "#                     \"MSFT\",\n", "#                     \"AAPL\",\n", "#                     \"AMZN\",\n", "#                     \"IBM\",\n", "#                     \"GOOG\",\n", "#                 ]\n", "#             )\n", "#             for _ in range(120)\n", "#         ],\n", "#         \"date\": [\n", "#             pd.Timestamp(year=2000 + i, month=j, day=1)\n", "#             for i in range(10)\n", "#             for j in range(1, 13)\n", "#         ],\n", "#         \"price\": [random.randint(10, 200) for _ in range(120)],\n", "#     }\n", "# )\n", "\n", "\n", "def line_plot_fn(dataset):\n", "    if dataset == \"stocks\":\n", "        return gr.LinePlot.update(\n", "            stocks,\n", "            x=\"date\",\n", "            y=\"price\",\n", "            color=\"symbol\",\n", "            color_legend_position=\"bottom\",\n", "            title=\"Stock Prices\",\n", "            tooltip=[\"date\", \"price\", \"symbol\"],\n", "            height=300,\n", "            width=500,\n", "        )\n", "    elif dataset == \"climate\":\n", "        return gr.LinePlot.update(\n", "            climate,\n", "            x=\"DATE\",\n", "            y=\"HLY-TEMP-NORMAL\",\n", "            y_lim=[250, 500],\n", "            title=\"Climate\",\n", "            tooltip=[\"DATE\", \"HLY-TEMP-NORMAL\"],\n", "            height=300,\n", "            width=500,\n", "        )\n", "    elif dataset == \"seattle_weather\":\n", "        return gr.LinePlot.update(\n", "            seattle_weather,\n", "            x=\"date\",\n", "            y=\"temp_min\",\n", "            tooltip=[\"weather\", \"date\"],\n", "            overlay_point=True,\n", "            title=\"Seattle Weather\",\n", "            height=300,\n", "            width=500,\n", "        )\n", "    elif dataset == \"gapminder\":\n", "        return gr.LinePlot.update(\n", "            gapminder,\n", "            x=\"year\",\n", "            y=\"life_expect\",\n", "            color=\"country\",\n", "            title=\"Life expectancy for countries\",\n", "            stroke_dash=\"cluster\",\n", "            x_lim=[1950, 2010],\n", "            tooltip=[\"country\", \"life_expect\"],\n", "            stroke_dash_legend_title=\"Country Cluster\",\n", "            height=300,\n", "            width=500,\n", "        )\n", "\n", "\n", "with gr.Blocks() as line_plot:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            dataset = gr.Dropdown(\n", "                choices=[\"stocks\", \"climate\", \"seattle_weather\", \"gapminder\"],\n", "                value=\"stocks\",\n", "            )\n", "        with gr.Column():\n", "            plot = gr.LinePlot()\n", "    dataset.change(line_plot_fn, inputs=dataset, outputs=plot)\n", "    line_plot.load(fn=line_plot_fn, inputs=dataset, outputs=plot)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    line_plot.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/line_plot/run.py

@@ -0,0 +1,106 @@
+import gradio as gr
+from vega_datasets import data
+
+stocks = data.stocks()
+gapminder = data.gapminder()
+gapminder = gapminder.loc[
+    gapminder.country.isin(["Argentina", "Australia", "Afghanistan"])
+]
+climate = data.climate()
+seattle_weather = data.seattle_weather()
+
+## Or generate your own fake data, here's an example for stocks:
+#
+# import pandas as pd
+# import random
+#
+# stocks = pd.DataFrame(
+#     {
+#         "symbol": [
+#             random.choice(
+#                 [
+#                     "MSFT",
+#                     "AAPL",
+#                     "AMZN",
+#                     "IBM",
+#                     "GOOG",
+#                 ]
+#             )
+#             for _ in range(120)
+#         ],
+#         "date": [
+#             pd.Timestamp(year=2000 + i, month=j, day=1)
+#             for i in range(10)
+#             for j in range(1, 13)
+#         ],
+#         "price": [random.randint(10, 200) for _ in range(120)],
+#     }
+# )
+
+
+def line_plot_fn(dataset):
+    if dataset == "stocks":
+        return gr.LinePlot.update(
+            stocks,
+            x="date",
+            y="price",
+            color="symbol",
+            color_legend_position="bottom",
+            title="Stock Prices",
+            tooltip=["date", "price", "symbol"],
+            height=300,
+            width=500,
+        )
+    elif dataset == "climate":
+        return gr.LinePlot.update(
+            climate,
+            x="DATE",
+            y="HLY-TEMP-NORMAL",
+            y_lim=[250, 500],
+            title="Climate",
+            tooltip=["DATE", "HLY-TEMP-NORMAL"],
+            height=300,
+            width=500,
+        )
+    elif dataset == "seattle_weather":
+        return gr.LinePlot.update(
+            seattle_weather,
+            x="date",
+            y="temp_min",
+            tooltip=["weather", "date"],
+            overlay_point=True,
+            title="Seattle Weather",
+            height=300,
+            width=500,
+        )
+    elif dataset == "gapminder":
+        return gr.LinePlot.update(
+            gapminder,
+            x="year",
+            y="life_expect",
+            color="country",
+            title="Life expectancy for countries",
+            stroke_dash="cluster",
+            x_lim=[1950, 2010],
+            tooltip=["country", "life_expect"],
+            stroke_dash_legend_title="Country Cluster",
+            height=300,
+            width=500,
+        )
+
+
+with gr.Blocks() as line_plot:
+    with gr.Row():
+        with gr.Column():
+            dataset = gr.Dropdown(
+                choices=["stocks", "climate", "seattle_weather", "gapminder"],
+                value="stocks",
+            )
+        with gr.Column():
+            plot = gr.LinePlot()
+    dataset.change(line_plot_fn, inputs=dataset, outputs=plot)
+    line_plot.load(fn=line_plot_fn, inputs=dataset, outputs=plot)
+
+
+if __name__ == "__main__":
+    line_plot.launch()

demo/scatter_plot/requirements.txt

@@ -0,0 +1,2 @@
+vega_datasets
+pandas

demo/scatter_plot/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: scatter_plot"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets pandas"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from vega_datasets import data\n", "\n", "cars = data.cars()\n", "iris = data.iris()\n", "\n", "# # Or generate your own fake data\n", "\n", "# import pandas as pd\n", "# import random\n", "\n", "# cars_data = {\n", "#     \"Name\": [\"car name \" + f\" {int(i/10)}\" for i in range(400)],\n", "#     \"Miles_per_Gallon\": [random.randint(10, 30) for _ in range(400)],\n", "#     \"Origin\": [random.choice([\"USA\", \"Europe\", \"Japan\"]) for _ in range(400)],\n", "#     \"Horsepower\": [random.randint(50, 250) for _ in range(400)],\n", "# }\n", "\n", "# iris_data = {\n", "#     \"petalWidth\": [round(random.uniform(0, 2.5), 2) for _ in range(150)],\n", "#     \"petalLength\": [round(random.uniform(0, 7), 2) for _ in range(150)],\n", "#     \"species\": [\n", "#         random.choice([\"setosa\", \"versicolor\", \"virginica\"]) for _ in range(150)\n", "#     ],\n", "# }\n", "\n", "# cars = pd.DataFrame(cars_data)\n", "# iris = pd.DataFrame(iris_data)\n", "\n", "\n", "def scatter_plot_fn(dataset):\n", "    if dataset == \"iris\":\n", "        return gr.ScatterPlot.update(\n", "            value=iris,\n", "            x=\"petalWidth\",\n", "            y=\"petalLength\",\n", "            color=\"species\",\n", "            title=\"Iris Dataset\",\n", "            color_legend_title=\"Species\",\n", "            x_title=\"Petal Width\",\n", "            y_title=\"Petal Length\",\n", "            tooltip=[\"petalWidth\", \"petalLength\", \"species\"],\n", "            caption=\"\",\n", "        )\n", "    else:\n", "        return gr.ScatterPlot.update(\n", "            value=cars,\n", "            x=\"Horsepower\",\n", "            y=\"Miles_per_Gallon\",\n", "            color=\"Origin\",\n", "            tooltip=\"Name\",\n", "            title=\"Car Data\",\n", "            y_title=\"Miles per Gallon\",\n", "            color_legend_title=\"Origin of Car\",\n", "            caption=\"MPG vs Horsepower of various cars\",\n", "        )\n", "\n", "\n", "with gr.Blocks() as scatter_plot:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            dataset = gr.Dropdown(choices=[\"cars\", \"iris\"], value=\"cars\")\n", "        with gr.Column():\n", "            plot = gr.ScatterPlot()\n", "    dataset.change(scatter_plot_fn, inputs=dataset, outputs=plot)\n", "    scatter_plot.load(fn=scatter_plot_fn, inputs=dataset, outputs=plot)\n", "\n", "if __name__ == \"__main__\":\n", "    scatter_plot.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/scatter_plot/run.py

@@ -0,0 +1,69 @@
+import gradio as gr
+from vega_datasets import data
+
+cars = data.cars()
+iris = data.iris()
+
+# # Or generate your own fake data
+
+# import pandas as pd
+# import random
+
+# cars_data = {
+#     "Name": ["car name " + f" {int(i/10)}" for i in range(400)],
+#     "Miles_per_Gallon": [random.randint(10, 30) for _ in range(400)],
+#     "Origin": [random.choice(["USA", "Europe", "Japan"]) for _ in range(400)],
+#     "Horsepower": [random.randint(50, 250) for _ in range(400)],
+# }
+
+# iris_data = {
+#     "petalWidth": [round(random.uniform(0, 2.5), 2) for _ in range(150)],
+#     "petalLength": [round(random.uniform(0, 7), 2) for _ in range(150)],
+#     "species": [
+#         random.choice(["setosa", "versicolor", "virginica"]) for _ in range(150)
+#     ],
+# }
+
+# cars = pd.DataFrame(cars_data)
+# iris = pd.DataFrame(iris_data)
+
+
+def scatter_plot_fn(dataset):
+    if dataset == "iris":
+        return gr.ScatterPlot.update(
+            value=iris,
+            x="petalWidth",
+            y="petalLength",
+            color="species",
+            title="Iris Dataset",
+            color_legend_title="Species",
+            x_title="Petal Width",
+            y_title="Petal Length",
+            tooltip=["petalWidth", "petalLength", "species"],
+            caption="",
+        )
+    else:
+        return gr.ScatterPlot.update(
+            value=cars,
+            x="Horsepower",
+            y="Miles_per_Gallon",
+            color="Origin",
+            tooltip="Name",
+            title="Car Data",
+            y_title="Miles per Gallon",
+            color_legend_title="Origin of Car",
+            caption="MPG vs Horsepower of various cars",
+        )
+
+
+with gr.Blocks() as scatter_plot:
+    with gr.Row():
+        with gr.Column():
+            dataset = gr.Dropdown(choices=["cars", "iris"], value="cars")
+        with gr.Column():
+            plot = gr.ScatterPlot()
+    dataset.change(scatter_plot_fn, inputs=dataset, outputs=plot)
+    scatter_plot.load(fn=scatter_plot_fn, inputs=dataset, outputs=plot)
+
+if __name__ == "__main__":
+    scatter_plot.launch()

gradio/components/bar_plot.py

@@ -22,7 +22,7 @@ class BarPlot(Plot):
     Preprocessing: this component does *not* accept input.
     Postprocessing: expects a pandas dataframe with the data to plot.
 
-    Demos: native_plots, chicago-bikeshare-dashboard
+    Demos: bar_plot, chicago-bikeshare-dashboard
     """
 
     def __init__(

gradio/components/line_plot.py

@@ -22,7 +22,7 @@ class LinePlot(Plot):
     Preprocessing: this component does *not* accept input.
     Postprocessing: expects a pandas dataframe with the data to plot.
 
-    Demos: native_plots, live_dashboard
+    Demos: line_plot, live_dashboard
     """
 
     def __init__(

gradio/components/scatter_plot.py

@@ -23,7 +23,7 @@ class ScatterPlot(Plot):
     Preprocessing: this component does *not* accept input.
     Postprocessing: expects a pandas dataframe with the data to plot.
 
-    Demos: native_plots
+    Demos: scatter_plot
     Guides: creating-a-dashboard-from-bigquery-data
     """