Dash Notes

1️⃣ What is Dash?

Dash is an open-source Python framework for building reactive, web-based analytical applications, with a strong focus on data visualization and interactive dashboards, without writing JavaScript.

Dash is especially suited for:

• Data science dashboards
• Risk & trading analytics
• Internal decision tools
• Rapid prototyping of analytical UIs

It allows developers to describe UI + interactivity declaratively in Python, while Dash manages frontend rendering and backend communication.

---

2️⃣ Core Architecture

Technology Stack

Dash is built on top of three major technologies:

Layer	Technology	Role
Backend	Flask	Web server, request handling
Visualization	Plotly.js	Interactive charts
Frontend	React.js	Component rendering & state

Although React.js is used internally, developers never write JavaScript.

---

Communication Model

• Dash applications run as Python web servers
• The browser and server communicate via JSON over HTTP
• User actions trigger HTTP requests
• Callback outputs are serialized and sent back to the browser

This makes Dash:

• Stateless between requests
• Scalable via standard web-server techniques
• Easy to containerize (Docker, Kubernetes)

---

Key Characteristics

Dash applications are:

• Declarative → You describe what the UI should look like, not how to update it
• Reactive → Outputs update automatically when inputs change
• Cross-platform → Runs in any modern browser
• Mobile-ready → Responsive by default
• Pure Python → No frontend language required

---

3️⃣ The Two Fundamental Parts of a Dash App

Every Dash app consists of two pillars:

Layout (UI)
+ 
Callbacks (Interactivity)

---

4️⃣ Layout (UI Definition)

The layout defines the static structure of the application.

Component Types

A. HTML Components (dash.html)

Python equivalents of HTML tags.

• One Python class per HTML element
• Keyword arguments define attributes (id, style, className, etc.)

Examples:

html.H1("Dashboard Title")
html.Div(children=[...])

Typical usage:

• Page structure
• Text
• Containers
• Layout positioning

---

B. Dash Core Components (dash.dcc)

Higher-level interactive components built with JavaScript under the hood.

Common components:

• dcc.Graph
• dcc.Dropdown
• dcc.Slider
• dcc.DatePickerRange
• dcc.Checklist
• dcc.Input

Examples:

dcc.Graph(figure=fig)
dcc.Dropdown(options=options_list)

Important:
HTML components define structure
DCC components define interaction

---

Layout Rules

• app.layout must return a single root component
• Layout is evaluated once at page load
• Dynamic updates do not happen in the layout itself

---

5️⃣ Interactivity — Callbacks

Dash interactivity is implemented using callback functions.

A callback:

• Is a Python function
• Is triggered automatically
• Connects Inputs → Outputs

---

Callback Decorator

@app.callback(
    Output(component_id, component_property),
    Input(component_id, component_property)
)

This tells Dash:

“Whenever this input changes, recompute this output.”

---

Input vs Output vs State

Concept	Purpose
Input	Triggers callback execution
Output	Gets updated by callback
State	Passed into callback but does not trigger execution

Example:

Input("year-dropdown", "value")
Output("price-graph", "figure")
State("region-dropdown", "value")

---

Callback Execution Model

1. User changes a component
2. Browser sends JSON request
3. Dash executes Python function
4. Return value is serialized
5. UI updates automatically

Callbacks must be:

• Pure functions
• Deterministic
• Free of side effects

---

6️⃣ Typical Dash Implementation Workflow

Based on IBM labs and real-world usage:

1. Import dependencies from dash import Dash, html, dcc from dash.dependencies import Input, Output
2. Load data
   • Load datasets at the top level
   • Share DataFrames across callbacks
3. Create app instance app = Dash(__name__)
4. Define layout
   • Build UI tree using html + dcc
5. Apply styling
   • Inline styles via style={}
   • Or external CSS via assets/
6. Write callbacks
   • Connect UI inputs to outputs
   • Perform filtering, aggregation, plotting
7. Run server app.run_server(debug=True)

---

7️⃣ Minimal Dash Skeleton (Canonical Pattern)

app = Dash(__name__)

app.layout = html.Div([
    html.H3("Data Dashboard"),
    dcc.Dropdown(
        id='my-input',
        options=[{'label': 'A', 'value': 'A'}],
        value='A'
    ),
    dcc.Graph(id='my-graph')
])

@app.callback(
    Output('my-graph', 'figure'),
    Input('my-input', 'value')
)
def update_graph(selected_value):
    # Filter data
    # Create Plotly figure
    return fig

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