Skip to content
Tutorials
Use PyGWalker with Plotly Dash

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:

    pip install dash pygwalker dash-dangerously-set-inner-html
  2. Data Preparation:

    df = pd.read_csv("data.csv")
  3. PyGWalker Visualization with Predefined Config:

    Use the to_html function to obtain the visualization, providing the path to the pre-existing configuration gw_config.json:

    pyg_html_code = pyg.to_html(df, spec="./gw_config.json")
  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)