gr.ScatterPlot component (#2764)

* Try clean install

* Resolve peer dependencies?

* CHANGELOG

* Add outbreak_forcast notebook

* generate again

* CHANGELOG

* Add image to changelog

* Color palette

* Fix colors + legend

* Tooltip

* Add axis titles

* Clean up code a bit + quant scales

* Add code

* Add size, shape + rename legend title

* Fix demo

* Add update + demo

* Handle darkmode better

* Try new font

* Use sans-serif

* Add caption

* Changelog + tests

* More tests

* Address comments

* Make caption fontsize smaller and enable interactivity

* Add docstrings + add height + width

* Use normal font weight

* Make last values keyword only

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

* Fix typo

* Accept value as fn

* reword changelog a bit

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

CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ## New Features:
 
+### Scatter plot component
+
+It is now possible to create a scatter plot natively in Gradio!
+
+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 +67,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.

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,