Dash Basics: My Personal Exploration

In this notebook, I document my first steps with Dash for building interactive web applications in Python. My goal is to understand the basics and see how I can use Dash to make my data visualizations more dynamic.

Why Dash?

I'm interested in creating interactive dashboards that go beyond static charts. Dash offers a way to build web apps with Python, and this notebook is my hands-on introduction to its features.

What You'll Learn

• How to create a Dash app layout from scratch
• Adding HTML and core graph components
• Building and displaying interactive charts
• My personal tips for working with Dash in Jupyter

My Approach

I experiment with different Dash components and layouts, documenting what I learn and the challenges I face along the way.

---

Getting Started

Let's import the required libraries and load the dataset. I always like to preview the data before diving into visualization.

Reflections

This section is for my thoughts on building with Dash, including what I found useful and what I want to explore further.

# Author: Mohammad Sayem Chowdhury
import pandas as pd
import plotly.express as px

# Load the airline data into a DataFrame
airline_data = pd.read_csv('https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/Data%20Files/airline_data.csv',
                          encoding="ISO-8859-1",
                          dtype={'Div1Airport': str, 'Div1TailNum': str,
                                 'Div2Airport': str, 'Div2TailNum': str})
print('Data loaded!')

# Preview the first few rows
airline_data.head()

# Check the shape of the data
print('Shape:', airline_data.shape)

# For performance, sample 500 rows (reproducible)
data = airline_data.sample(n=500, random_state=42)
print('Sampled data shape:', data.shape)

Summary

This notebook captures my personal journey with Dash, highlighting my experiments, discoveries, and areas for future exploration.

# Create a pie chart
fig = px.pie(data, values='Month', names='DistanceGroup', title='Distance group proportion by month')
fig.show()

Final Thoughts

All the apps and notes here are part of my own learning process with Dash.

# Author: Mohammad Sayem Chowdhury
from jupyter_dash import JupyterDash
from dash import html, dcc

app = JupyterDash(__name__)

app.layout = html.Div(children=[
    html.H1('Airline Performance Dashboard', style={'textAlign': 'center', 'color': '#503D36', 'font-size': 40}),
    html.P('Proportion of distance group (250 mile distance interval group) by month (month indicated by numbers).', style={'textAlign': 'center', 'color': '#F57241'}),
    dcc.Graph(figure=fig)
])

# Uncomment the following line to run the app in Jupyter:
# app.run_server(mode="inline", host="localhost")