How to Create a Dashboard with Dash and Plotly(Part 1: Layout)

Dash

Dash is one of the most popular Python frameworks for building analytical web applications. Code can be written using only Python and does not require detailed knowledge of HTML or CSS. In this series, I will explain step by step how to create an interactive dashboard with Dash and Plotly in three parts. In this part, we will focus on the layout settings.

The code presented in this article is available in the GitHub Repository here.

Dataset and Dashboard

In this case, we will use data from Kaggle’s tabular playground series Mar 2021. This data includes id, 19 categorical variables: cat0 – cat18, 11 continuous variables: cont0 – cont10, and a binary (0,1) target variable as shown in the table below.

The goal is to create the following dashboard with the sidebar section on the left and the content section on the right.

The left sidebar section displays three drop-down lists. The first two drop-down lists select one categorical variable and one continuous variable, respectively. The distribution of the variables selected in those drop-down lists is displayed at the top of the right content section. The third drop-down list allows you to select multiple continuous variables, and a correlation matrix heat map between the selected variables is displayed at the bottom of the content section. At the bottom of the sidebar, a pie chart is placed to see the percentage of the target variable.

The process of creating this dashboard is divided into the following five steps.

  1. Layout settings
  2. Component settings
  3. Style settings
  4. Graphs with Plotly
  5. Callback settings to make the graphs interactive

This article will focus on layout settings.

Split into Sidebar and Content

One of the most famous and useful frameworks for developing web applications is Bootstrap. Dash can also use this framework by importing dash_bootstrap_components. First, import the necessary modules. Next, create a Dash instance and load the bootstrap stylesheets. The external_stylesheets argument of the Dash instance allows you to set a theme that determines the overall color scheme, fonts, and appearance of components. Here we have chosen the theme FLATLY.

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])

Assign the components to be displayed in the sidebar section and the content section to sidebar variable and content variable. First, set the strings to display only “sidebar” and “content”, respectively, as shown below.

sidebar = html.Div(
    [
        html.P('Sidebar')
        ]
)

content = html.Div(
    [
        html.P('Content')
    ]
)

Bootstrap has a grid system for dividing the screen into rows and columns. The overall layout is created by combining dbc.Row and dbc.Col in dbc.Container. Here we adjust the width of the left sidebar section and the right content section to be 1:3. Since the grid system divides the screen into 12 columns, we can divide the screen into 1:3 by setting the width of dbc.Col for sidebar and content to 3 and 9, respectively, as shown below.

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(sidebar, width=3, className='bg-light'),
                dbc.Col(content, width=9)
                ],
            style={"height": "100vh"}
            ),
        ],
    fluid=True
    )

The className argument allows setting various attributes such as background color and text font. Here, the className argument is set to ‘bg-light’ to set the background color of Sidebar. If the theme is FLATLY, bg-light means light gray. The other colors are as follows, for example, setting bg-info will make the color blue as shown below. For more information on FLATLY, please see here.

The vh in style={“height”: “100vh”} stands for viewport height, meaning set to 100% of the screen height. Lastly, container has margins set by default, so set fluid=True to avoid unintended margins at the top, bottom, left, and right, and between Sidebar and Content.

Run the script at this point.

if __name__ == "__main__":
    app.run_server(debug=True, port=1234)

The following screen will then appear at http://127.0.0.1:1234/.

The sidebar section and the content section have been divided.

Layout Settings

Sidebar Section

Next, set the sidebar layout. The Sidebar is divided into three parts: the title Settings, drop-down lists to select categorical and continuous variables, and the pie chart of target variables.Row is divided using dbc.Row, specifying vh in style arguments so that the ratio of the heights of each part is 1:10:9.

Rewrite the sidebar variable as follows.

sidebar = html.Div(
    [
        dbc.Row(
            [
                html.P('Settings')
                ],
            style={"height": "5vh"}, className='bg-primary text-white'
            ),
        dbc.Row(
            [
                html.P('Categorical and Continuous Variables')
                ],
            style={"height": "50vh"}, className='bg-secondary text-white'
            ),
        dbc.Row(
            [
                html.P('Target Variables')
                ],
            style={"height": "45vh"}, className='bg-dark text-white'
            )
        ]
    )

Here, the background color is temporarily specified by className to make the division easier to understand.

Content Section

Next, set the Content layout. Since the upper row needs to be divided into two parts, the categorical variable graph and the continuous variable graph, dbc.Col is used in the same way as when the sidebar section and the content section were divided. In this case, width is not specified because the width is divided equally.

Rewrite the content variable as follows.

content = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Distribution of Categorical Variable'),
                        ],
                    className='bg-white'
                    ),
                dbc.Col(
                    [
                        html.P('Distribution of Continuous Variable')
                    ],
                    className='bg-dark text-white'
                    )
            ],
            style={"height": "50vh"}),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Correlation Matrix Heatmap')
                    ],
                    className='bg-light'
                    )
            ],
            style={"height": "50vh"}
            )
        ]
    )

Run the script again.

We can confirm that the screen is divided in the same way as the desired dashboard.

The entire code is as follows. We had set style={“height”: “100vh”} in dbc.Container, but removed it because it is no longer needed after setting the height in each component. The temporary background color setting has also been removed.

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])

sidebar = html.Div(
    [
        dbc.Row(
            [
                html.P('Settings')
                ],
            style={"height": "5vh"}
            ),
        dbc.Row(
            [
                html.P('Categorical and Continuous Variables')
                ],
            style={"height": "50vh"}
            ),
        dbc.Row(
            [
                html.P('Target Variables')
                ],
            style={"height": "45vh"}
            )
        ]
    )

content = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Distribution of Categorical Variable'),
                        ]),
                dbc.Col(
                    [
                        html.P('Distribution of Continuous Variable')
                    ])
            ],
            style={"height": "50vh"}),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Correlation Matrix Heatmap')
                    ])
            ],
            style={"height": "50vh"}
            )
        ]
    )

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(sidebar, width=3, className='bg-light'),
                dbc.Col(content, width=9)
                ]
            ),
        ],
    fluid=True
    )


if __name__ == "__main__":
    app.run_server(debug=True, port=1234)

Finally, run the script again.

Now we can set up the layout of our dashboard.

Going Further

In this part, we have discussed setting up a layout to create a dashboard.

In the next article, we will start from this state to set up components and styles.

コメント

タイトルとURLをコピーしました