Use PyGWalker with Plotly Dash

Overview

Embed PyGWalker visualizations within a Plotly Dash application to utilize Dash's hosting capabilities. This updated guide also includes steps to load a pre-existing visualization configuration.

Prerequisites

• Familiarity with PyGWalker and Plotly Dash.
• Python environment set up.

Tools Introduction

PyGWalker

• An interactive data visualization library.
• Enables intuitive drag-and-drop data exploration.
• Supports a feature to load predefined visualization configurations.
• Official Repository (opens in a new tab)

Plotly Dash

• A user-friendly framework to host web-based data visualizations.
• Allows data scientists to deploy interactive web applications without in-depth web development knowledge.
• Official Website (opens in a new tab)

Integration Steps

1. Environment Setup:

   • Install required libraries:

     pip install dash pygwalker dash-dangerously-set-inner-html datasets

2. Data Preparation:

   • Load the NYC-Airbnb-Open-Data dataset from gradio.
   • Convert to Pandas DataFrame:

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

3. PyGWalker Visualization with Predefined Config:

   • Use the walk function to obtain the visualization, providing the path to the pre-existing configuration viz-code.json:

     walker = pyg.walk(df, spec="./viz-code.json", debug=False)
     html_code = walker.to_html()

4. Dash Integration:

   • Embed the PyGWalker HTML within the Dash application using dash-dangerously-set-inner-html. Ensure the HTML content is secure:

     app.layout = html.Div([
         dash_dangerously_set_inner_html.DangerouslySetInnerHTML(html_code),
     ])

5. Launch Dash App:

   • Execute the application to view the PyGWalker visualization hosted in a Dash web app:

     if __name__ == '__main__':
         app.run_server(debug=True)

Notes

• Leveraging a pre-existing visualization configuration facilitates consistent visualization setups across different datasets or platforms.
• Always ensure the security and integrity of any HTML content added using dash-dangerously-set-inner-html.

Experience seamless data exploration by integrating PyGWalker's predefined visualization configurations within a Dash application.

References

PyGWalker + Dash Code example (opens in a new tab)