Dash for Beginners! [dash-plotly-python]

When I started a project in Dash I had very little resources to resolve my doubts. I had to figure it out with the help of dash documentation and only a couple other sites. So this is to help you beginner to start with dash and create you own dashboards.

What is Dash?

If you are looking for a way to represent your analysis and prediction on a simple and pretty dashboard, then Dash is the answer. Dash is a python framework mostly used for building data visualisation apps. It is written on top of Flask, Plotly.js and React. Now, you don’t need to worry if you are not aware how all of these work because Dash is really simple and straightforward to implement, you’ll see!

Dash apps are rendered in the web browser and it is cross-platform . You can deploy your apps to the servers and share them via URLs.

Dash is super easy to learn, comprehend and implement. If you know HTML & CSS, dash is piece of cake for you. Now you just need to know the syntax.

1. First things first, installing the necessary libraries.

pip install dash
pip install dash_core_components
pip install dash_html_components

2. Importing the necessary libraries.

import dash
import dash_core_components as dcc
import dash_html_components as html

The ‘dash’ contains the app which will be run on the browser and involves the layout of the app (dashboard).
The ‘dash_core_components’ contains the higher level components like the graphs, dropdown, tabs, etc. ‘dcc’ makes the dashboard a lot more interactive.
And all the html components such as div, img, h1, h2 and so on are included in ‘dash_html_components’. ‘html’ lets you to customize your dashboard and make it pretty and comprehendible.
We use ‘as’ to give a shorter and easier alias.

3. Next step is to initialize the app by creating an instance. Your dash app is now ready to be designed.

app = dash.Dash()

4. Now we have to create the layout. This is where we align the dashboard. This is quite similar to designing an HTML website. You embed a whole bunch of divs in one parent div and align them as you like. Lets see this with an example

app.layout = html.Div([
            html.H1(children="Hello world!",className="hello",
    style={'color':'#00361c','text-align':'center'
          })
      ])

The app.layout stores the entire layout of your dashboard. This is where you pass the parent div containing different divs that we talked about in the former section.
The html.Div() has many parameters like ‘id’, ‘className’, ‘style’, ‘children’ and others may vary accordingly.
So there are 3 different ways to apply css. This is one method and is called as inline css. You can also use external css file. You need to create a folder named as ‘assets’ and create a .css file inside it which will be applied to your app. You can name the css file by any name you want. The classname helps you customize your dashboard when you use external css.

5. Coming towards running your app.

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

On executing this command your app is now running and you can see you dashboard by the link provided which is your localhost.

The output:

Now that you have created your first Dash app, lets explore other components. The dash documentation [find here] explains every component very succinctly. Here are some things that you may find helpful.

How to display Divs side by side?

So you want to display the divs in the same row? This is how its done.

app.layout = html.Div([
            html.H1(children="Hello world!",className="hello",style={
    'color':'#00361c','text-align':'center'}),
    
           
               html.Div([
           html.Div(children="Block 1",className="box1",
                        style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'100px',
                        'margin-left':'10px',
                        'width':'45%',
                        'text-align':'center',
                        'display':'inline-block'
                        }),
            
            html.Div(children="Block 2",className="box2",
               style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'100px',
                        'margin-left':'10px',
                        'text-align':'center',
                        'width':'40%',
                        'display':'inline-block'
               })
                        ])
            
            
      ])

The ‘display’:’inline-block’ considers the divs inside of a parent div as columns for the same row (parent div). You can change the size by adjusting the ‘width’ parameter such that it adds up to 100%. Or you can use ‘width’: ‘100px’ if you want to specify the width using pixels. Just make sure the margin length and padding that you add are also included in the 100%. The other parameters are pretty self-explanatory and there are many more.

Output

Callbacks

When you pass a value from the dashboard as expect an output to be displayed accordingly, this is when callbacks come into picture. They help to make the dashboard a lot more interactive and representative. Now these values can be passed by dropdowns, input fields, buttons, etc.
The syntax for callback is as follows:

app.layout = html.Div([
html.H6("Enter a value to see the changes."),
html.Div(["Input: ",
               dcc.Input(id='my-input', value='initial value',  type='text')]),
     html.Br(),
     html.Div(id='my-output'),  ])
@app.callback(
    Output(component_id='my-output',component_property='children'),
    Input(component_id='my-input', component_property='value') )
 
def update_output_div(input_value):
    return 'Output: {}'.format(input_value)

app.callback() has 2 parameters Output and Input. For the ‘Output’ you have to specify the id for the div where you want your output to be displayed and type of the output. Whereas ‘Input’ specifies id of the component from which input value is to be received and ‘value’ stores the value that is passed from the dashboard. The div with the id ‘my_output’ is where the output will be displayed on the dashboard.
Every callback has a function that will be executed for the given callback. It should return a children, div or a figure for graphs.

Here’s a trick which might come in handy if you need to add space or a horizontal line.

#dash layout code
html.Div(className='gap'),
html.Div(className='gap'),
html.Div(className='li'),
html.Div(className='gap'),
html.Div(className='li'),

Create a css file in assets folder and use the class name to define its function.

.li{
    border-bottom:thin black solid;
   
}
.gap{
    height:10px;
}

You can also use the traditional html.Hr(className= ‘gap’), this is just what I prefer. Here are some other ways you can modify your horizontal dividers [Horizontal_Ruler].

This was a brief intro to how to get started with Dash. In the further article I will share how to create Graphs with Dropdown menu option.
I hope this was helpful and Thank you! See you in the next one.

Here’s the link for Graphs with Dropdown menu:
https://shraddhashekhar.medium.com/graphs-with-dropdown-menu-in-dash-plotly-bb6cd4295009