gr.ScatterPlot component

CHANGELOG.md

@@ -2,6 +2,41 @@
 
 ## New Features:
 
+### Scatter plot component
+
+It is now possible to create a scatter plot without knowledge of a plotting library!
+
+The `gr.ScatterPlot` component accepts a pandas dataframe and some optional configuration parameters
+and will automatically create a plot for you!
+
+This is the first of many native plotting components in Gradio!
+
+For an example of how to use `gr.ScatterPlot` see below:
+
+```python
+import gradio as gr
+from vega_datasets import data
+
+cars = data.cars()
+
+with gr.Blocks() as demo:
+    gr.ScatterPlot(show_label=False,
+                   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").style(container=False)
+
+demo.launch()
+```
+
+By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2764](https://github.com/gradio-app/gradio/pull/2764)
+
+
+
 ### Support for altair plots
 
 The `Plot` component can now accept altair plots as values! 
@@ -33,7 +68,7 @@ demo.launch()
 
 By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2741](https://github.com/gradio-app/gradio/pull/2741)
 
-### Set the background color of a Label component 
+### Set the background color of a Label component
 
 The `Label` component now accepts a `color` argument by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2736](https://github.com/gradio-app/gradio/pull/2736).
 The `color` argument should either be a valid css color name or hexadecimal string.
@@ -70,7 +105,6 @@ demo.queue().launch()
 
 ![label_bg_color_update](https://user-images.githubusercontent.com/41651716/204400372-80e53857-f26f-4a38-a1ae-1acadff75e89.gif)
 
-
 ## Bug Fixes:
 * Fixed issue where image thumbnails were not showing when an example directory was provided
 by by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745) 

demo/native_plots/requirements.txt

@@ -0,0 +1 @@
+vega_datasets

demo/native_plots/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: native_plots"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/scatter_plot_demo.py"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "from scatter_plot_demo import scatter_plot\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.TabItem(\"Scatter Plot\"):\n", "            scatter_plot.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/native_plots/run.py

@@ -0,0 +1,12 @@
+import gradio as gr
+
+from scatter_plot_demo import scatter_plot
+
+
+with gr.Blocks() as demo:
+    with gr.Tabs():
+        with gr.TabItem("Scatter Plot"):
+            scatter_plot.render()
+
+if __name__ == "__main__":
+    demo.launch()

demo/native_plots/scatter_plot_demo.py

@@ -0,0 +1,47 @@
+import gradio as gr
+
+from vega_datasets import data
+
+cars = data.cars()
+iris = data.iris()
+
+
+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(show_label=False).style(container=True)
+    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()

demo/scatterplot_component/requirements.txt

@@ -0,0 +1 @@
+vega_datasets

demo/scatterplot_component/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: scatterplot_component"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"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", "\n", "with gr.Blocks() as demo:\n", "    gr.ScatterPlot(show_label=False,\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\").style(container=False)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/scatterplot_component/run.py

@@ -0,0 +1,18 @@
+import gradio as gr
+from vega_datasets import data
+
+cars = data.cars()
+
+with gr.Blocks() as demo:
+    gr.ScatterPlot(show_label=False,
+                   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").style(container=False)
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -35,6 +35,7 @@
     Number,
     Plot,
     Radio,
+    ScatterPlot,
     Slider,
     State,
     StatusTracker,