Introduction to Dash in Python

Dash, a successful Python framework, has become a well-liked option for creating interfaces for data visualisation. It's ideal for building analytical web applications in pure Python with highly interactive user interfaces. This article provides a thorough introduction to Dash along with useful examples to get you going.

What is Dash?

Dash is a Python framework created by Plotly that allows you to create analytical online applications without having to understand JavaScript, CSS, or HTML. Dash apps have two main components: the layout, which specifies how the app will appear, and the interaction, which specifies how the app will function.

Getting Started with Dash

Pip, the package installer for Python, can be used to install Dash −

pip install dash

You can import the Dash package in your Python script after it has been installed −

import dash
import dash_core_components as dcc
import dash_html_components as html

Building a Dash Application

Let's now look at how to create a Dash application.

Example 1: A Basic Dash Application

The code for a very simple Dash application is provided here −

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello, Dash!'),

   html.Div(children='''
      Dash: A web application framework for Python.
   '''),

   dcc.Graph(
      id='example-graph',
      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montreal'},
         ],
         'layout': {
            'title': 'Dash Data Visualization'
         }
      }
   )
])

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

A headline, a text, and a straightforward bar chart are displayed in the programme.

Example 2: Using Dash Callbacks for Interactivity

Dash makes apps interactive by using callbacks. Callbacks link the various parts so that as the input changes, the output also does. Here's an illustration −

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='my-input', value='initial value', type='text'),
   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 'You've entered "{}"'.format(input_value)

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

In this illustration, if the'my-input' component changes, the callback updates the'my-output' component.

Example 3: Multiple Inputs and Outputs

Callbacks with multiple inputs and outputs are supported by Dash −

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='input-1', type='text'),
   dcc.Input(id='input-2', type='text'),
   html.Div(id='output')
])

@app.callback(
   Output(component_id='output', component_property='children'),
   [Input(component_id='input-1', component_property='value'),
   Input(component_id='input-2', component_property='value')]
)
def update_output_div(input1, input2):
   return 'You've entered "{}" and "{}"'.format(input1, input2)

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

In this illustration, two input components are connected to the callback function update_output_div. The output component is updated to reflect any changes to either input's value.

Example 4: Using Dash Core Components

Higher-level components like dropdowns, graphs, markdown blocks, and more are available through the component libraries Dash offers, including dash_core_components and dash_html_components. Here is an illustration of how to use a dropdown component −

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Dropdown(
      id='dropdown',
      options=[
         {'label': 'Option 1', 'value': '1'},
         {'label': 'Option 2', 'value': '2'},
         {'label': 'Option 3', 'value': '3'}
      ],
      value='1'
   ),
   html.Div(id='display-selected-values')
])

@app.callback(
   dash.dependencies.Output('display-selected-values', 'children'),
   [dash.dependencies.Input('dropdown', 'value')])
def set_display_children(selected_value):
   return 'You've selected "{}"'.format(selected_value)

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

In this illustration, the output is updated via a callback function to show the selected item from the drop-down menu.

Conclusion

An effective toolkit for building web-based data visualisation apps is provided by the Python framework Dash. Its versatility, which allows users to build complex and interactive dashboards using only Python code, makes it a highly sought-after tool in the data science field.

This article served as an introduction to Dash and its features, including how to install it and use it with Python programming. Additionally, we looked at four examples that each showed how to develop a Dash application in a different way, including how to design a simple programme, add interaction with callbacks, use multiple inputs and outputs, and make use of Dash's essential components.

The samples provided here, however, just hint at Dash's full potential. To further comprehend Dash's potential, we encourage you to investigate more and experiment with various components and callback structures. For sophisticated applications, its official documentation is a great resource that offers a plethora of information.