A Simple Plotly Dash App

Creating a simple Plotly Dash App

Creating a basic Dash app in Python is a first step to build interactive web applications for data visualization

The code below sets up a basic Dash application with a simple layout containing three headings.

import dash

import dash_html_components as html

app = dash.Dash(__name__) app.layout = html.Div([ html.H1("Main Heading"), html.H2("2nd Heading"),

    html.H3("3rd Heading") # Add other components if needed ])

if __name__ == "__main__":

    app.run_server(debug=True)

Explanation

1. Importing Libraries

import dash

import dash_html_components as html

In the code above dash is the main library for creating Dash applications.

dash_html_components contains HTML components like Div, H1, H2, etc.

2. Initializing the Dash App

app = dash.Dash(__name__)

The above line initializes the Dash app. __name__ is a special variable in Python that represents the name of the current module.

3. Defining the Layout

app.layout = html.Div([ html.H1("Main Heading"), html.H2("2nd Heading"),

    html.H3("3rd Heading") # Add other components if needed ])




app.layout defines the layout of the app.

html.Div is a container that holds other HTML components.




html.H1, html.H2, html.H3 HTML heading tags with the text “Main H1 Heading”, “2nd Heading”, and “3rd Heading” respectively.

You can add more components to the html.Div to expand the functionality of your app.

4. Running the Server

if __name__ == "__main__":

    app.run_server(debug=True)

This block ensures that the server runs only if the script is executed directly (not imported as a module).

app.run_server(debug=True) starts the Dash server with debug mode enabled, which provides useful error messages and auto-reloads the app when you make changes to the code.

Here is output: