#5 Plotly Dashboards with Dash

📊 Build Interactive Dashboards with Plotly Dash — No HTML Needed!

Dash is a Python framework for creating interactive web dashboards directly in Python — no need for HTML, CSS, or JavaScript. Perfect for Data Scientists who want to share visual insights quickly! 🚀 Here’s a complete beginner-friendly guide with working examples.

---

1️⃣ Install Dash

# Install Dash (includes Plotly)
!pip install dash plotly

2️⃣ Basic Dash App — “Hello Dashboard”

from dash import Dash, html

# Create app
app = Dash(__name__)

# Layout (like HTML but written in Python)
app.layout = html.Div([
    html.H1("📊 My First Dash App"),
    html.P("Hello, Data Scientists! 🚀"),
])

# Run app
if __name__ == "__main__":
    app.run_server(debug=True)

➡️ Visit http://127.0.0.1:8050 in your browser to see your app live!

---

3️⃣ Adding Graphs with Plotly

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

# Sample data
df = px.data.gapminder().query("year == 2007")

# Create figure
fig = px.bar(df, x="continent", y="pop", color="continent", title="Population by Continent (2007)")

# App layout
app = Dash(__name__)
app.layout = html.Div([
    html.H1("🌍 Population Dashboard"),
    dcc.Graph(figure=fig)
])

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

---

4️⃣ Interactive Dashboard with Callbacks

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

df = px.data.gapminder()

app = Dash(__name__)

# Layout
app.layout = html.Div([
    html.H1("🌎 GDP vs Life Expectancy Dashboard"),
    dcc.Dropdown(
        id="year-dropdown",
        options=[{"label": y, "value": y} for y in sorted(df.year.unique())],
        value=2007
    ),
    dcc.Graph(id="scatter-chart")
])

# Callback — update chart based on selected year
@app.callback(
    Output("scatter-chart", "figure"),
    Input("year-dropdown", "value")
)
def update_chart(selected_year):
    filtered_df = df[df.year == selected_year]
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", size="pop",
                     color="continent", hover_name="country", log_x=True,
                     title=f"GDP vs Life Expectancy ({selected_year})")
    return fig

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

---

5️⃣ Multi-Page Dashboard (Advanced)

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

df = px.data.gapminder()
app = Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id="url"),
    html.Div(id="page-content")
])

# Define pages
def home_page():
    return html.Div([
        html.H2("🏠 Home Page"),
        html.A("Go to GDP Dashboard", href="/gdp")
    ])

def gdp_page():
    return html.Div([
        html.H2("📊 GDP Dashboard"),
        dcc.Dropdown(id="continent", options=[{"label": c, "value": c} for c in df.continent.unique()], value="Asia"),
        dcc.Graph(id="gdp-graph"),
        html.A("⬅ Back Home", href="/")
    ])

# Router callback
@app.callback(Output("page-content", "children"), Input("url", "pathname"))
def display_page(pathname):
    if pathname == "/gdp":
        return gdp_page()
    return home_page()

# Graph callback
@app.callback(Output("gdp-graph", "figure"), Input("continent", "value"))
def update_graph(continent):
    filtered_df = df[df.continent == continent]
    return px.line(filtered_df, x="year", y="gdpPercap", color="country", title=f"GDP Growth ({continent})")

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

---

✅ What You Learned

• 🎨 Create dashboards using pure Python (no HTML/CSS needed)
• 📈 Add interactive Plotly charts easily
• 🔄 Use callbacks for real-time interactivity
• 🧭 Build multi-page dashboards for large projects

💡 Pro Tip: Host your Dash app on Render, Railway, or Streamlit Cloud for free — and share your live dashboards with anyone! 🌐

Suggestion : Please use Visual Studio Code Editor 

Response