gr.ScatterPlot component #2764

freddyaboulton · 2022-12-05T16:00:08Z

Description

Overview

Implements a gr.ScatterPlot component. My plan is to have a separate component for each type of plot but they all inherit for gr.Plot. They should only differ from Plot in their init signatures and postprocess methods. This saves us from creating a different ui component for each plot subtype.

Proposed API

1. Create a static scatter plot

gr.ScatterPlot(value=cars, x="Horsepower", y="Miles_per_Gallon",
                        color="Origin", tooltip="Name", title="Car Data", y_title="Miles per Gallon")

2. Update an existing plot

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"
)

The value parameter must be passed in order to be able to update the plot.

Additional features added:

.style(container=False) added to Plot component
A caption can be added below gr.Scatterplot (and future plot types)

Open questions

1. Position of caption relative to the plot

The caption and plot are technically centered but it may look off-centered if there is a legend on the right of the plot

We can make it look more centered by placing all legends in the bottom of the plot. Wondering what people think and any other possible solutions.

2. Make labels + titles bold font or not

Using bold makes this info stand out but it looks different from the other fonts on the app even though they are technically the same font. For comparison

Bold (current):

No Bold:

3. General styling/look of the plots

Please send any feedback on the look of the plots. Tried my best to make sure they match the look of gradio but there could still be more to do. In particular:

Fonts
Text colors
Colors used in legends

To test

Runpython demo/native_plots/run.py (also deployed to spaces)
The following script

import gradio as gr
from vega_datasets import data


cars = data.cars()

io = gr.Interface(fn=lambda:cars,
                     inputs=None,
                     outputs=[gr.ScatterPlot(x="Horsepower", y="Miles_per_Gallon", color="Cylinders")])

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            gr.ScatterPlot(value=cars, x="Horsepower", y="Miles_per_Gallon",
                    color="Origin", tooltip="Name", title="Car Data", y_title="Miles per Gallon")
        with gr.Column():
            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",
                        legend_title="Origin of Car").style(container=False)
        with gr.Column():
            gr.ScatterPlot(value=cars, x="Horsepower", y="Miles_per_Gallon",
                           tooltip="Name", title="Car Data").style(container=False)
    with gr.Row():
        io.render()

demo.launch()

github-actions · 2022-12-05T16:00:30Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-05T16:01:53Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-05T16:04:19Z

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2764-all-demos

github-actions · 2022-12-05T20:36:51Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

freddyaboulton · 2022-12-07T20:50:19Z

ui/packages/app/src/main.ts

@@ -192,6 +192,7 @@ function create_custom_element() {
 		root: ShadowRoot;
 		wrapper: HTMLDivElement;
 		_id: number;
+		theme: string;


All the changes here are so that the Plot component has access to the current theme

freddyaboulton · 2022-12-07T20:51:07Z

ui/packages/plot/src/Plot.svelte

+	export let theme: string;
+	export let caption: string;
+
+	function get_color(index: number) {


I yanked this from Chart.svelte. Ideally this would be consolidated but it relies on the global colors prop so I wasn't sure what the best way to refactor was.

This function should produce the same colors for qualitative scales as the Chart.svelte (e.g. TimeSeries) component which is why I used it here

We'll probably want to update the color schemes for visualisations in the future with a few pre-baked options for users. Data-viz colour schemes have some specific requirements/ demands that fall outside of typical 'design' issues. We can address that (and the duplication) later.

Completely agree! Filed #2780

freddyaboulton · 2022-12-07T20:53:14Z

ui/packages/plot/src/Plot.svelte

+		const config = create_config(darkmode);
+		spec['config'] = config;
+		switch (value['chart'] || '') {
+			case "scatter":


My guess is that we'll have a separate case for each plot type. I'd expect this code to change in the future though as we add more types.

pngwn · 2022-12-08T14:40:23Z

ui/packages/app/src/main.ts

@@ -260,6 +262,7 @@ function create_custom_element() {
 			const _autoscroll = autoscroll === "true" ? true : false;

 			this.wrapper.style.minHeight = initial_height || "300px";
+			console.log(this.theme);


pngwn · 2022-12-08T14:41:58Z

ui/packages/plot/src/Plot.svelte


 	$: if(value && value['type'] == "altair") {
 		spec = JSON.parse(value['plot'])
+		const config = create_config(darkmode);
+		spec['config'] = config;


Suggested change

spec['config'] = config;

spec.config = config;

This is more idiomatic.

pngwn · 2022-12-08T14:42:28Z

ui/packages/plot/src/Plot.svelte

+		}
+	}
+
+	$: darkmode = theme == "dark"

 	$: if(value && value['type'] == "altair") {


Suggested change

$: if(value && value['type'] == "altair") {

$: if(value && value.type == "altair") {

pngwn · 2022-12-08T14:42:45Z

ui/packages/plot/src/Plot.svelte


 	$: if(value && value['type'] == "altair") {
 		spec = JSON.parse(value['plot'])
+		const config = create_config(darkmode);
+		spec['config'] = config;
+		switch (value['chart'] || '') {


Suggested change

switch (value['chart'] || '') {

switch (value.chart || '') {

pngwn · 2022-12-08T14:43:25Z

ui/packages/plot/src/Plot.svelte

+				if (spec['encoding']['color'] && spec['encoding']['color']['type'] == 'nominal') {
+					spec['encoding']['color']['scale']['range'] = spec['encoding']['color']['scale']['range'].map((e, i) => get_color(i));
+				}
+				else if (spec['encoding']['color'] && spec['encoding']['color']['type'] == 'quantitative') {
+					spec['encoding']['color']['scale']['range'] = ['#eff6ff', '#1e3a8a'];
+					spec['encoding']['color']['scale']['interpolate'] = "hsl";
+				}


I won't suggest but use dot notation for property access: object.prop1.prop2.prop3 etc.

pngwn · 2022-12-08T14:45:15Z

ui/packages/plot/src/Plot.svelte

 	//@ts-nocheck
 	import Plotly from "plotly.js-dist-min";
 	import { Plot as PlotIcon } from "@gradio/icons";
+	import { colors as color_palette, ordered_colors } from "@gradio/theme";
+	import { get_next_color } from "@gradio/utils";
 	import { Vega } from "svelte-vega";


We'll probably want to dynamically load the SDK for the specific plot in the future but this is fine for now. Just mentioning it here. No changes required.

pngwn · 2022-12-08T14:46:27Z

ui/packages/plot/src/Plot.svelte

+	export let theme: string;
+	export let caption: string;
+
+	function get_color(index: number) {


We'll probably want to update the color schemes for visualisations in the future with a few pre-baked options for users. Data-viz colour schemes have some specific requirements/ demands that fall outside of typical 'design' issues. We can address that (and the duplication) later.

pngwn

Code looks good. Not sure about the pending design questions but I think we can solve them in a follow-up, if needed.

abidlabs · 2022-12-08T21:28:56Z

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!


Just a suggestion, feel free to ignore

Suggested change

It is now possible to create a scatter plot without knowledge of a plotting library!

It is now possible to create a scatter plot natively in Gradio!

gradio/components.py

abidlabs · 2022-12-09T09:08:28Z

test/test_blocks.py

@@ -294,7 +294,9 @@ def test_slider_random_value_config(self):
        assert not any([dep["queue"] for dep in demo.config["dependencies"]])

    def test_io_components_attach_load_events_when_value_is_fn(self, io_components):
-        io_components = [comp for comp in io_components if not (comp == gr.State)]
+        io_components = [
+            comp for comp in io_components if comp not in [gr.State, gr.ScatterPlot]


gr.ScatterPlot should also be able to take in a function for the value, no?

abidlabs

Powerhouse of a PR @freddyaboulton! I only had a suggestion for the order of the parameters in the class, but otherwise LGTM. Tested and works great

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

freddyaboulton · 2022-12-09T15:14:02Z

Thank you all so much for the help and reviews!

freddyaboulton added 12 commits December 5, 2022 08:53

Try clean install

5fbc4e4

Resolve peer dependencies?

3dd95fc

CHANGELOG

50b6006

Add outbreak_forcast notebook

1d56cde

generate again

bfa84f7

CHANGELOG

ee242ba

Add image to changelog

1f832c9

Color palette

18079f7

Fix colors + legend

44a043c

Tooltip

7f2a058

Add axis titles

d7f985a

Clean up code a bit + quant scales

80a0095

Add code

c8f8a18

freddyaboulton self-assigned this Dec 5, 2022

Add size, shape + rename legend title

f455f4d

freddyaboulton added 8 commits December 5, 2022 15:39

Fix demo

f546f03

Add update + demo

289f075

Handle darkmode better

c4006e8

Try new font

6dbf58c

Use sans-serif

7401b80

Add caption

3e1f397

Changelog + tests

611e764

More tests

4ef2d91

freddyaboulton commented Dec 7, 2022

View reviewed changes

freddyaboulton requested review from aliabid94, pngwn, abidlabs and aliabd and removed request for aliabid94 December 7, 2022 20:54

freddyaboulton changed the title ~~[WIP] gr.ScatterPlot component~~ gr.ScatterPlot component Dec 7, 2022

pngwn requested changes Dec 8, 2022

View reviewed changes

Address comments

d56eb10

freddyaboulton mentioned this pull request Dec 8, 2022

Add preset color schemes for gradio plots #2780

Closed

pngwn approved these changes Dec 8, 2022

View reviewed changes

freddyaboulton added 2 commits December 8, 2022 14:23

Make caption fontsize smaller and enable interactivity

08ffebb

Add docstrings + add height + width

130ee75

abidlabs reviewed Dec 8, 2022

View reviewed changes

gradio/components.py Show resolved Hide resolved

Merge branch 'main' into scatter-plot

076ab56

abidlabs reviewed Dec 9, 2022

View reviewed changes

gradio/components.py Outdated Show resolved Hide resolved

abidlabs reviewed Dec 9, 2022

View reviewed changes

abidlabs approved these changes Dec 9, 2022

View reviewed changes

freddyaboulton and others added 8 commits December 9, 2022 09:00

Use normal font weight

5dc41e2

Merge main

8715506

Merge branch 'main' into scatter-plot

0b73f5e

Merge upstream changelog

620f656

Make last values keyword only

ec01da3

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

Fix typo

8146fda

Accept value as fn

920cd92

reword changelog a bit

f2cb2e9

freddyaboulton merged commit f60053d into main Dec 9, 2022

freddyaboulton deleted the scatter-plot branch December 9, 2022 15:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

gr.ScatterPlot component #2764

gr.ScatterPlot component #2764

freddyaboulton commented Dec 5, 2022 •

edited

Loading

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

freddyaboulton Dec 7, 2022

freddyaboulton Dec 7, 2022

freddyaboulton Dec 7, 2022

pngwn Dec 8, 2022

freddyaboulton Dec 8, 2022

freddyaboulton Dec 7, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn Dec 8, 2022

pngwn left a comment

abidlabs Dec 8, 2022

abidlabs Dec 9, 2022

abidlabs left a comment

freddyaboulton commented Dec 9, 2022

	$: if(value && value['type'] == "altair") {
	$: if(value && value.type == "altair") {

	It is now possible to create a scatter plot without knowledge of a plotting library!
	It is now possible to create a scatter plot natively in Gradio!

gr.ScatterPlot component #2764

gr.ScatterPlot component #2764

Conversation

freddyaboulton commented Dec 5, 2022 • edited Loading

Description

Overview

Proposed API

1. Create a static scatter plot

2. Update an existing plot

Additional features added:

Open questions

1. Position of caption relative to the plot

2. Make labels + titles bold font or not

3. General styling/look of the plots

To test

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pngwn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abidlabs left a comment

Choose a reason for hiding this comment

freddyaboulton commented Dec 9, 2022

freddyaboulton commented Dec 5, 2022 •

edited

Loading