What plot components should we implement?

[freddyaboulton]

• [x] I have searched to see if a similar issue already exists. This is a placeholder issue so we don't forget. The Gradio for DS milestone is taking shape and we still need to prioritize all the issues we've already filed.

Is your feature request related to a problem? Please describe.
Gradio developers can already create cool visualizations with the Plot component. See this interactive map and this bike share dashboard (https://gradio.app/connecting_to_a_database/).

This is great but it has some drawbacks:

• Requires knowledge of plotly or matplotlib. These are common libraries but if you don't use them regularly, you may have to spend longer than you'd like trying to get it to look nice.
• Since the plot is delegated to antother library, the style of the plot will not match with the style of the rest of the gradio demo.

Describe the solution you'd like

Implement components for common plot types. gr.BarPlot, gr.LinePlot etc.

These components should just take a dataframe or dict and some additional parameters to configure the plot, e.g. gr.BarPlot(df, x="category", y="spent", x_label="Spending Category").

Rather than delegating to an external library to generate the plot, the front-end will plot the data. This will ensure consistent theming with the rest of the app and will make it easier to apply custom themes to plots once we do theming.

We can also do something like gr.Barplot(..., backend="plotly") if the developer wants to use plotly. gr.Plot should still work as expected and handle plotly or matplotlib plots.

Additional context
Add any other context or screenshots about the feature request here.

[freddyaboulton]

A proposal of possible plot types to support:

General plots

• [x] gr.ScatterPlot
• [x] gr.LinePlot
• [ ] gr.BarPlot
• [ ] gr.Map (for geospatial data)
• [ ] gr.HeatMap

Statistical more specific plots:

• [ ] gr.Histogram
• [ ] gr.BoxPlot

My current thinking is that some more specific visualizations can be implemented with the primitives listed above by extending their api slightly. We can also add first-class components for these:

Area Chart

Grouped and Stacked BarCharts

Layered Histogram

[abidlabs]

Pinned the issue -- would appreciate feedback from Gradio users on other plot types they'd like to see!

[radames]

hi @freddyaboulton, I'd also tag @severo for more Data Vis ideas. Are these plots powered by matplotlib or plotly? Not sure if this is the case now, but with custom components in the future, I'd like to try something like Observablehq Plot to provide a grammar of composable Marks, that maybe can be build direct from python.

[freddyaboulton]

Thanks for the comment @radames !

Right now, the plan is to use altair which is a python front-end for vega. Vega supports a "grammar of graphics" similar to observable's Plot from what I can tell.

The "gradio plots", like gr.ScatterPlot and gr.LinePlot, etc will just be convenient wrappers over altair (and thus vega) with the added benefit that they will play play better with the current gradio theme (fonts, colors etc).

For custom visualizations, developers will be able to use altair to display their viz in a standard Plot component. Once the theming work is done, my hope is that the current theme is exposed on the python side as well so that users can make their custom visualizations match the rest of the app.

If developers prefer to write their charting code in js, that will have wait for custom components. But again they should be able to make them match the rest of the app by leveraging the current theme.

Let me know if this meshes with your thoughts as well!

[severo]

What level of abstraction would you like for the library? The following article and figures can help define it: https://nightingaledvs.com/navigating-the-wide-world-of-data-visualization-libraries/. Once you have chosen the right level of abstraction, you also have a list of (JS) libraries that implement it, so it's easier to get inspiration about the list of components to create.

[pngwn]

Going to unpin as engagement has dropped off.

[abidlabs]

Let's go ahead and close if we are not planning on adding any more Plot components soon @freddyaboulton?

[sri-awadh]

could we add functionality to interact with gradio.components.Plot. For example if plotly.graph_objs.FigureWidget is used for displaying graph through gradio.components.Plot could we get selected-graph-points through plotly's 'Box select' functionality .

[sri-awadh]

is there any event listener for gradio.components.Plot? if no. please consider it for implementation.

[jsirait]

Would be interested to see BoxPlot component implemented :)

[freddyaboulton]

Going to close. I think new plots can be implemented via custom components! https://www.gradio.app/guides/custom-components-in-five-minutes