From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid
Explore the power of Dash AG Grid in a Jupyter Notebook environment for enhanced data visualization and analysis — efficient data handling, advanced filtering capabilities, and dynamic charting. Read this step-by-step guide.
Author: Elliot Gunn
GitHub repository: https://github.com/plotly/dash-ag-grid-sample
Earlier this year, Plotly announced that Dash AG Grid, our highly performant and customizable component library for working with tabular data, became open source.
Dash AG Grid makes it easy for users of all skill levels to perform advanced data operations directly through the front end. You don’t need a developer working on a complex code base to enable rich interactions like filtering, sorting, and pivoting–these capabilities are readily accessible and intuitive, empowering end users to mine data for insights quickly.
This article will walk you through how and why you should use Dash AG Grid in your next data application. I’ll demonstrate how you can prototype interactive data applications in a Jupyter Notebook. Then, I’ll cover how you can build and deploy a Dash application featuring advanced Dash AG Grid capabilities such as advanced filtering.
What is Dash AG Grid?
Dash AG Grid is an advanced, interactive, and customizable data table component integrated into Dash applications. Dash is a framework from Plotly for creating analytical web applications without requiring advanced web development skills (including HTML, CSS, and Javascript).
AG Grid, a feature-rich data grid, is known for its performance, flexibility, and comprehensive set of features. When integrated with Dash, it enhances the data handling capabilities of Dash applications significantly.
Why Dash AG Grid?
In traditional data applications, much of the data manipulation — like filtering or pivoting — happens in the backend using Python code. This can be a major hurdle for non-technical users.
Dash AG Grid makes data manipulation more accessible: even non-technical users can perform complex data operations like filtering, selection, and pivoting directly within the grid interface.
This also simplifies the coding process: since many data manipulation tasks are offloaded to the front end, it reduces code complexity, making the developer’s job easier.
Dash AG Grid has transformed the way data apps are built and interacted with, particularly in terms of filtering capabilities, and it’s proven increasingly popular with users. It has seen more than 25,000 monthly downloads recently, with more than 75% of its usage being driven by financial services.
It’s clear why Dash AG Grid can be beneficial for many users and use cases in analytics. Let’s dive into a practical example.
Exploratory analysis in a Jupyter Notebook
Our application will use Our World in Data’s Energy dataset as it provides time-series data on global energy consumption, its sources, and impacts. We’ll use it to understand how global energy trends have changed over time across countries and regions. Follow along with the GitHub repository.
Exploratory data analysis
Before we create our dashboard with Plotly Dash, we need to first understand the distribution, trends, and patterns in the data. You can do this in a hosted notebook (e.g., Google Colab) or by spinning up a Jupyter Notebook on your computer. Jupyter Notebooks are suitable for exploratory data analysis as they provide an interactive environment and combine code, visual outputs, and documentation in one place.
After loading and performing some light data cleaning involving missing values, we can take a look at how renewable energy consumption has changed over the years:
# Line chart showing the trend of renewable energy consumption
fig = px.line(df, x='year', y='renewables_consumption', color='country', title='Renewable Energy Consumption Over Years')
fig.show()Prototyping a Dash app with Dash AG Grid
Next, we can start to sketch out key components of a fully-fledged Dash application right in a Jupyter notebook. Building Dash applications piece-by-piece in a Jupyter Notebook makes it easy to build fully-fledged Dash applications.
In our Dash AG Grid table here, we can sort and filter data directly within the grid. There are many customization opportunities that we’ll dive into in the next section.
import dash
from dash import Dash, html, dcc
import dash_ag_grid as dag
from dash.dependencies import Input, Output
import pandas as pd
app = Dash(__name__)
app.layout = html.Div([
dag.AgGrid(
id='my_ag_grid',
rowData=df.to_dict('records'),
columnDefs=[{'field': c} for c in df.columns],
# Add other AG-Grid properties as needed
)
])
if __name__ == '__main__':
app.run_server(debug=True)Building our Dash application
We’re now ready to create a complete dashboard that uses Dash with Dash AG Grid components.
If you’re not familiar with a Dash application, check out our “Dash in 20 Minutes” tutorial that walks you through a basic Dash app. This application is fairly simple and contains the dependencies, data loading and preprocessing, layout design with Dash Bootstrap Components, the interactive components which include the dropdowns and AG Grid, and the callbacks for interactivity.
Dash AG Grid Table & advanced filtering
In a typical data science workflow, a data scientist would use Python to clean and filter this data. However, with Dash AG Grid, end users can interactively explore trends, like how renewable energy consumption has evolved over the years, by applying filters and sorting data directly within a Dash AG Grid table.
We incorporated Dash AG Grid’s advanced filtering capabilities in the table as it reduces code complexity compared to a traditional Dash DataTable, with two main benefits:
- Filtering UI embedded in columns: Each column in the Dash AG Grid can have its own filter interface. This allows users to apply filters directly within the grid, manipulating the dataset at a granular level.
2. Fewer callbacks: In traditional Dash apps, each input field would typically have its own callback function, triggering data updates or actions. With Dash AG Grid, a single callback can listen to changes across the entire grid, including all column filters. This callback reacts to any state change in the grid, whether it’s a filter change, a sort action, or an edit.
How does this work? Column-level filtering in the Dash AG Grid is set up through the configuration of column definitions and is dynamically managed through a callback function that responds to changes in the filter state.
We first define the columns in the AG Grid and specify that each column should have a filter. This is done in the columnDefs attribute of the AgGrid component, where the columns are tailored according to their data types for filtering, and other functionalities like resizing, sorting, and editing are enabled for enhanced user interaction:
columnDefs=[
{
"field": c,
"filter": (
"agNumberColumnFilter"
if c in [
"year",
"primary_energy_consumption",
"renewables_consumption"
]
else "agTextColumnFilter"
),
"floatingFilter": True,
"resizable": True,
"sortable": True,
"editable": True,
}
for c in df.columns
],The most crucial part of column-level filtering is how the app responds when filters are applied. This is managed by the callback function:
@callback(
...
[Input('my_ag_grid', 'filterModel')],
...
)Within the callback function, there’s logic to process the filterModel, which contains the current state of filters applied in the grid. This shows how changes made by the user are captured and processed:
if filter_model:
for col, f in filter_model.items():
if "filter" in f:
filtered_column = filtered_df[col].astype(str)
filter_condition = filtered_column.str.contains(f["filter"])
filtered_df = filtered_df[filter_condition]To show how Dash AG Grid makes it incredibly easy to filter data directly within the grid and allows end users to independently manipulate data through the Dash application user interface, we created the same app but with the Dash AG Grid table swapped out for a Dash DataTable instead:
With Dash DataTable, the filtering (filter_action) and sorting (sort_action) functionalities are native and basic. They provide standard filtering and sorting capabilities but lack the depth of customization available in Dash AG Grid:
dash_table.DataTable(
id="my_datatable",
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict("records"),
page_size=20,
filter_action="native",
sort_action="native",
)By contrast, Dash AG Grid offers additional properties like floatingFilter, resizable, and editable to enhance user interaction — making the grid more flexible and interactive.
Supercharging data workflows
Having features like Dash AG Grid’s column-level filtering is helpful for data science workflows because embedding filters directly into the grid columns allows users to manipulate data more intuitively.
Users of all technical backgrounds can explore and analyze the data without deep technical knowledge of Python just by defining the appropriate filter types and other properties in Dash AG Grid’s columnDefs configuration.
This reduces the need for separate UI elements and callbacks for each filter, simplifying the interface. Writing fewer callbacks reduces the complexity associated with managing numerous filters, and a single callback for all grid changes makes for better performance, which is critical when handling large datasets.
Conclusion
Dash AG Grid is not just about handling data efficiently; it’s about democratizing data analysis. By enabling end-users to perform complex data operations through a user-friendly front end, AG Grid opens up new possibilities for data applications
This tutorial has showcased how Dash AG Grid can streamline your data science workflows, enabling the creation of professional-grade applications using only open-source Python tools. It simplifies traditionally time-consuming processes involved in cleaning, transforming, visualizing, and deploying data applications.
With Dash AG Grid, the challenges of debugging and managing increasingly complex codebases are substantially reduced, cutting down the time it takes to develop interactive data applications.
For data professionals looking to take their Dash applications to the next level — transitioning from prototypes to production-ready and secure applications — Dash Enterprise is the next step. With Dash Enterprise, you can effortlessly scale your apps, enjoy robust security features, and simplify the deployment process, ensuring seamless performance and protection for your data applications.
Data scientists and developers can not only expedite the development process but also ensure that the applications they build are robust, secure, and ready for the demands of real-world use. Questions or want to learn more? Email info@plotly.com.
