How to Use PyGWalker with Gradio

pygwalker is a python library that turns your data into an interactive visualization app (like tableau or powerBI). For example, in Juypter Notebook, data scientists often use pygwalker to turn data into an interactive module embedded in juypter, where they can explore visualizations using drag-and-drop or natural language, without writing any code or switching to other tools.

However, how to share the interactive visualization with others? How to let your users explore the data by themselves? In this tutorial, we will show you how to use pygwalker with Gradio to build a data exploration and sharing app.

What is Gradio?

Gradio (opens in a new tab) is a python library that allows you to quickly create customizable UI components around your machine learning models, deep learning models, and other functions. It allows you to build a simple, shareable UI for your model in only a few lines of code. Gradio is a great tool for quickly creating a web app to share your model with others.

How to Use PyGWalker with Gradio

Before we start running pygwalker with Gradio, let's make sure your computer has a Python environment set up (version 3.6 or higher). Once done, follow these simple steps:

Great! You've already made substantial progress. I'll help you complete the tutorial article with the provided information.

Step-by-Step Guide to Integrate PyGWalker with Gradio

1. Installation

Before we dive in, you need to have both pygwalker and gradio libraries installed. If you haven’t done that yet, it's a breeze with pip:

pip install pygwalker gradio

2. Import Necessary Libraries

Import all the essential modules you’ll need, as shown in your code:

import gradio as gr
import pygwalker as pyg
from datasets import load_dataset

3. Load Your Dataset

For this tutorial, we're using the NYC-Airbnb dataset from Gradio, but feel free to swap it out for any dataset of your choice:

dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()

4. Build the Gradio Interface with PyGWalker

Use Gradio’s Blocks feature to encapsulate the user interface components, as shown in the provided code:

with gr.Blocks() as demo:
    gr.Label("Visual Explore NYC-Airbnb data in PyGWalker and Gradio")
    gr.Markdown("This is a data app built with pygwalker and gradio library. You can use drag-and-drop operations to explore the data. Start your analysis now!")
    gr.HTML(pyg.walk(dataset=df, spec="./viz-config.json", debug=False, return_html=True))

Here's a breakdown:

gr.Label(): Provides a label or title for your Gradio interface.
gr.Markdown(): Allows you to include markdown-formatted text for detailed descriptions or information.
gr.HTML(): This is where pygwalker comes in. The pyg.walk() function turns the dataset into an interactive visualization and then it’s rendered in the Gradio interface through this HTML component.

5. Launch the App

Finally, with one simple command, you can launch the web app:

demo.launch()

By executing the script, your interactive data visualization should be available in a browser. You can explore the dataset using drag-and-drop functionality or natural language (require kanaries API key to enable).

(opens in a new tab)

A more native way to integrate pygwalker with gradio

pygwalker contains some advanced features, like kernel computation, which enable a duckDB-powered engine to accelerate the data exploration. Since pygwalker version>=0.3.10, there is a native support for gradio.

from pygwalker.api.gradio import PYGWALKER_ROUTE, get_html_on_gradio
 
with gr.Blocks() as demo:
    # load dataset
    dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
    df = dataset.to_pandas()
    pyg_app = get_html_on_gradio(df, spec="./viz-config.json")
    gr.HTML(pyg_app)
 
app = demo.launch(app_kwargs={
    "routes": [PYGWALKER_ROUTE]
})

Conclusion

Combining the power of pygwalker and gradio, you can quickly build and share interactive data visualizations. It not only simplifies data exploration but also democratizes access to data insights, allowing even non-tech users to interact with your findings. Give it a try, and share your insights with the world!

References

[1] Gradio (opens in a new tab) [2] PyGWalker documents (opens in a new tab) [3] pygwalker + gradio playground (opens in a new tab) [4] pygwalker github (opens in a new tab)