Dashboard Design & Storytelling
A dashboard is a product, not a pile of charts. Learn layout, hierarchy, interactivity and narrative techniques that turn raw metrics into decisions, and build a working example with Streamlit.
Start with the Audience
Before drawing anything, answer three questions: Who will use this? What decision will it support? How often will they look at it?
An executive dashboard needs 4–6 headline KPIs at a glance. An analyst dashboard needs filters and drill-downs. Mixing both usually serves neither.
Layout and Visual Hierarchy
Readers scan in an F or Z pattern, so place the most important information top-left:
- Top row — KPI cards with current value and change versus the prior period.
- Middle — The primary trend chart answering the main question.
- Bottom — Breakdowns by segment, region or product for context.
- Side/top bar — Global filters (date range, region) that affect everything.
- Consistency — Same colors mean the same thing on every chart.
Building a Dashboard with Streamlit
Streamlit turns a Python script into an interactive web dashboard. Filters re-run the script and update every chart:
import streamlit as st
import pandas as pd
import plotly.express as px
st.set_page_config(page_title="Sales Dashboard", layout="wide")
@st.cache_data
def load():
return pd.read_csv("sales.csv", parse_dates=["order_date"])
df = load()
# Sidebar filters
regions = st.sidebar.multiselect("Region", df["region"].unique(), default=list(df["region"].unique()))
view = df[df["region"].isin(regions)]
# KPI row
c1, c2, c3 = st.columns(3)
c1.metric("Revenue", f"${view['revenue'].sum():,.0f}")
c2.metric("Orders", f"{len(view):,}")
c3.metric("Avg order value", f"${view['revenue'].mean():,.2f}")
# Trend + breakdown
monthly = view.resample("MS", on="order_date")["revenue"].sum().reset_index()
st.plotly_chart(px.line(monthly, x="order_date", y="revenue", title="Monthly revenue"), use_container_width=True)
by_cat = view.groupby("category", as_index=False)["revenue"].sum()
st.plotly_chart(px.bar(by_cat, x="category", y="revenue", title="Revenue by category"), use_container_width=True)Telling a Story with Data
Numbers persuade when they follow a narrative. A reliable structure is context → insight → action: what was expected, what actually happened, and what to do next.
Use annotations to point at the key moment, highlight one series in a strong color and mute the rest, and always end with a recommendation.
Key Takeaways
- Design for one audience and one decision at a time.
- Put KPIs top-left, trend in the middle, breakdowns below.
- Keep filters global and colors consistent.
- Structure the narrative as context, insight, action.
Contact Us
Have a question or feedback? Fill out the form below or reach us directly at support@nvaitraining.com