| Creating Plots |
| ============== |
|
|
| Gradio is a great way to create extremely customizable dashboards. Gradio comes with three native Plot components: `gr.LinePlot`, `gr.ScatterPlot` and `gr.BarPlot`. All these plots have the same API. Let's take a look how to set them up. |
|
|
| Creating a Plot with a pd.Dataframe[%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)](#creating-a-plot-with-a-pd-dataframe) |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| Plots accept a pandas Dataframe as their value. The plot also takes `x` and `y` which represent the names of the columns that represent the x and y axes respectively. Here's a simple example: |
|
|
| import gradio as gr |
| import pandas as pd |
| import numpy as np |
| import random |
| |
| df = pd.DataFrame({ |
| 'height': np.random.randint(50, 70, 25), |
| 'weight': np.random.randint(120, 320, 25), |
| 'age': np.random.randint(18, 65, 25), |
| 'ethnicity': [random.choice(["white", "black", "asian"]) for _ in range(25)] |
| }) |
| |
| with gr.Blocks() as demo: |
| gr.LinePlot(df, x="weight", y="height") |
| |
| demo.launch() |
| |
| Textbox |
|
|
| [gradio/plot\_guide\_line](https://huggingface.co/spaces/gradio/plot_guide_line) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| All plots have the same API, so you could swap this out with a `gr.ScatterPlot`: |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.ScatterPlot(df, x="weight", y="height") |
| |
| demo.launch() |
| |
| Textbox |
|
|
| [gradio/plot\_guide\_scatter](https://huggingface.co/spaces/gradio/plot_guide_scatter) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| The y axis column in the dataframe should have a numeric type, but the x axis column can be anything from strings, numbers, categories, or datetimes. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.ScatterPlot(df, x="ethnicity", y="height") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_scatter\_nominal](https://huggingface.co/spaces/gradio/plot_guide_scatter_nominal) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| Breaking out Series by Color[%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)](#breaking-out-series-by-color) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| You can break out your plot into series using the `color` argument. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.ScatterPlot(df, x="weight", y="height", color="ethnicity") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_series\_nominal](https://huggingface.co/spaces/gradio/plot_guide_series_nominal) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| If you wish to assign series specific colors, use the `color_map` arg, e.g. `gr.ScatterPlot(..., color_map={'white': '#FF9988', 'asian': '#88EEAA', 'black': '#333388'})` |
|
|
| The color column can be numeric type as well. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.ScatterPlot(df, x="weight", y="height", color="age") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_series\_quantitative](https://huggingface.co/spaces/gradio/plot_guide_series_quantitative) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| Aggregating Values[%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)](#aggregating-values) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| You can aggregate values into groups using the `x_bin` and `y_aggregate` arguments. If your x-axis is numeric, providing an `x_bin` will create a histogram-style binning: |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.BarPlot(df, x="weight", y="height", x_bin=10, y_aggregate="sum") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_aggregate\_quantitative](https://huggingface.co/spaces/gradio/plot_guide_aggregate_quantitative) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| If your x-axis is a string type instead, they will act as the category bins automatically: |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| gr.BarPlot(df, x="ethnicity", y="height", y_aggregate="mean") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_aggregate\_nominal](https://huggingface.co/spaces/gradio/plot_guide_aggregate_nominal) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| Selecting Regions[%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)](#selecting-regions) |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| You can use the `.select` listener to select regions of a plot. Click and drag on the plot below to select part of the plot. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| plt = gr.LinePlot(df, x="weight", y="height") |
| selection_total = gr.Number(label="Total Weight of Selection") |
| |
| def select_region(selection: gr.SelectData): |
| min_w, max_w = selection.index |
| return df[(df["weight"] >= min_w) & (df["weight"] <= max_w)]["weight"].sum() |
| |
| plt.select(select_region, None, selection_total) |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_selection](https://huggingface.co/spaces/gradio/plot_guide_selection) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| You can combine this and the `.double_click` listener to create some zoom in/out effects by changing `x_lim` which sets the bounds of the x-axis: |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| plt = gr.LinePlot(df, x="weight", y="height") |
| |
| def select_region(selection: gr.SelectData): |
| min_w, max_w = selection.index |
| return gr.LinePlot(x_lim=(min_w, max_w)) |
| |
| plt.select(select_region, None, plt) |
| plt.double_click(lambda: gr.LinePlot(x_lim=None), None, plt) |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_zoom](https://huggingface.co/spaces/gradio/plot_guide_zoom) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| If you had multiple plots with the same x column, your event listeners could target the x limits of all other plots so that the x-axes stay in sync. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| plt1 = gr.LinePlot(df, x="weight", y="height") |
| plt2 = gr.BarPlot(df, x="weight", y="age", x_bin=10) |
| plots = [plt1, plt2] |
| |
| def select_region(selection: gr.SelectData): |
| min_w, max_w = selection.index |
| return [gr.LinePlot(x_lim=(min_w, max_w))] * len(plots) |
| |
| for plt in plots: |
| plt.select(select_region, None, plots) |
| plt.double_click(lambda: [gr.LinePlot(x_lim=None)] * len(plots), None, plots) |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_zoom\_sync](https://huggingface.co/spaces/gradio/plot_guide_zoom_sync) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| Making an Interactive Dashboard[%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)](#making-an-interactive-dashboard) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| Take a look how you can have an interactive dashboard where the plots are functions of other Components. |
|
|
| import gradio as gr |
| from data import df |
| |
| with gr.Blocks() as demo: |
| with gr.Row(): |
| ethnicity = gr.Dropdown(["all", "white", "black", "asian"], value="all") |
| max_age = gr.Slider(18, 65, value=65) |
| |
| def filtered_df(ethnic, age): |
| _df = df if ethnic == "all" else df[df["ethnicity"] == ethnic] |
| _df = _df[_df["age"] < age] |
| return _df |
| |
| gr.ScatterPlot(filtered_df, inputs=[ethnicity, max_age], x="weight", y="height", title="Weight x Height") |
| gr.LinePlot(filtered_df, inputs=[ethnicity, max_age], x="age", y="height", title="Age x Height") |
| |
| demo.launch() |
| |
| Loading... |
|
|
| [gradio/plot\_guide\_interactive](https://huggingface.co/spaces/gradio/plot_guide_interactive) built with [Gradio](https://gradio.app). Hosted on [ Spaces](https://huggingface.co/spaces) |
|
|
| It's that simple to filter and control the data presented in your visualization! |
