Module 4 · Interactive Visualization with Plotly

Section 3: Creating Dashboards and Business Reports

Dashboard Anatomy · make_subplots · KPI Indicators · Layout Design · Export

📋 Dashboard Design Principles
  • Clear hierarchy: KPIs top → supporting detail below
  • Context and comparison: vs. target, vs. prior period
  • Appropriate density: 4–8 charts maximum per view
  • Every chart answers a specific business question
🔲 make_subplots()
  • from plotly.subplots import make_subplots
  • make_subplots(rows=2, cols=2, subplot_titles=[...])
  • Mixed types: specs=[[{"type":"indicator"}, {"type":"bar"}]]
  • fig.add_trace(trace, row=1, col=2)
📟 KPI Indicators
  • go.Indicator(mode="number+delta", value=...)
  • Delta shows change vs. a reference value
  • Gauge mode for progress-toward-target visualization
  • Combine with sparkline traces for trend context
🎨 Layout & Theming
  • fig.update_layout(template="plotly_white")
  • Shared color palette via colorway in layout
  • Consistent font: font=dict(family="Arial", size=12)
  • Hide axes on indicator panels: xaxis_visible=False
📤 Exporting Reports
  • fig.write_html("dashboard.html") — interactive
  • fig.write_image("report.png", width=1920, height=1080)
  • Embed HTML in emails or LMS for stakeholder sharing
  • No software installation needed to view HTML output
🧪 Lab 3 — Business Dashboards
  • Part A: Executive KPI dashboard with indicators + charts
  • Part B: Operational performance multi-panel dashboard
  • Apply consistent theme, fonts, and color palette
  • Export as standalone HTML for stakeholder sharing