Back to Course CMSC 178DA

Week 6: Data Storytelling & Dashboards

1 / 45
CMSC 178DA | Week 6 · Session 1

The Art of the
Insight Story

Turning data into decisions through narrative

Department of Computer Science

University of the Philippines Cebu

"Data that doesn't tell a story doesn't get remembered."

"The greatest value of a picture is when it forces us to notice what we never expected to see."

— John W. Tukey, Exploratory Data Analysis, 1977

Today's question: how do we make analysts and decision-makers notice what matters?

Agenda

Session 1 Objectives

Story Frameworks

Narrative arc, Pyramid Principle, and the CAR structure for data presentations.

Narrative Techniques

Building tension, annotation strategy, and active slide titles that drive action.

Philippine Context

Applying storytelling to local datasets: GCash, PSA economic indicators, and more.

By the end of this session you will be able to structure any data finding into a compelling, audience-ready narrative.

Builds on: Week 5 Visualization Principles

Part I

Why Stories Work

Cognitive science tells us humans remember narratives 13× better than raw facts. Let's explore why — and how to exploit it.

Part I — Why Stories Work

Stories Outperform Data Alone by 13×

Memory retention: story 65%, facts 10%, data-only 5%

Two weeks after a presentation, audiences retain 65% of information delivered as a story — versus just 5% for raw numbers. The mechanism: narrative activates episodic memory, not just semantic memory.

Implication for Data Analysts

Every chart and table you produce needs a narrative wrapper: context, tension, and resolution. Without it, your insight may be forgotten before the meeting ends.

Part I — Why Stories Work

Every Data Story Has an Arc

Data story arc: Setup, Conflict, Rising Action, Resolution, CTA

Setup & Conflict

Establish the business context and introduce the problem: "Sales were expected to grow 15% — they fell 3%."

Resolution & CTA

Reveal the insight, explain causation, and close with a concrete recommendation the audience can act on.

Part I — Why Stories Work

Lead with the Answer

The Pyramid Principle (Barbara Minto, McKinsey) inverts the traditional academic structure: state your conclusion first, then justify it.

Executive Communication Rule

Decision-makers are time-poor. If they have to read to slide 10 to understand your point, they will check their phones at slide 3.

BLUF: Bottom Line Up Front

The military version of the same principle. Used universally in high-stakes briefings where attention is limited.

McKinsey Pyramid: Headline, Key Points, Evidence
Part I — Why Stories Work

The CAR Framework

A three-part structure that turns any data finding into a complete story.

C — Context

"NCR contributes 37% of GDP despite having only 13% of the population."

A — Anomaly / Action

"However, this share has shrunk 4 points since 2018 as Cebu and Davao grow faster."

R — Recommendation

"Redirect infrastructure spending toward Visayas and Mindanao to sustain national growth."

C · A · R

Context → Anomaly → Recommendation

When to use CAR

Any time your analysis has a clear "so what": executive dashboards, project status reports, research presentations.

Part I — Why Stories Work

The Three-Minute Story

TimeBeatContent
0:00 – 0:30HookSurprising statistic or question that creates immediate curiosity
0:30 – 1:00ContextEstablish the situation — what was expected and why it matters
1:00 – 1:45ConflictReveal the data that breaks the expectation
1:45 – 2:30ResolutionExplain the root cause with supporting charts
2:30 – 3:00CTAOne clear action: a decision, a budget, a next step

If your audience can't follow your story in three minutes, the structure needs work — not more slides. Brevity forces clarity.

Practice Exercise

Take any of your EDA findings from Week 4. Time yourself telling it in 3 minutes using this structure. Record and play back.

Part II

Narrative Techniques

How to build tension, annotate charts strategically, and write slide titles that drive decisions instead of just labeling content.

Part II — Narrative Techniques

Build Tension: "Expected X, Found Y"

State the expectation before revealing the data. The gap between what should have happened and what actually happened is your hook.

The Expectation Gap Formula

"We expected [X] based on [reason]. Instead, we found [Y] — a gap first visible in [context]."

Layer Your Information

Layer 1: main insight. Layer 2: supporting detail. Layer 3: context and caveats. Most audiences won't need Layer 3.

× No tension (flat delivery)

"E-commerce transactions in NCR rose from ₱12B to ₱14B between Q1 and Q3."

✓ With tension (expectation gap)

"NCR e-commerce was on track to hit ₱18B by Q3 based on 2022 momentum. Instead it stalled at ₱14B — a ₱4B gap that first appeared in May and hasn't recovered."

Why this works

It creates a question in the audience's mind: "Why did it stall in May?" — they lean in to find the answer rather than passively receiving data.

Part II — Narrative Techniques

Annotate to Guide the Eye

GCash growth chart with annotations

Three Annotation Types

  • Label — name the data point directly
  • Arrow + callout — highlight an anomaly
  • Reference line — show a target or threshold

Best Practices

Use arrows for anomalies, labels for key data points, and reference lines for targets. Keep annotations to 3–5 per chart maximum.

Part II — Narrative Techniques

Active Titles Drive Decisions

A slide title is not a label. It is the main claim of that slide. Write it as the insight, not the topic.

The Slide-Doc Principle

If someone reads only your slide titles, they should be able to reconstruct your entire argument. Passive titles break this chain.

Quick Rewrite Test

Replace your title with "In this slide, I show that ___." Whatever completes that sentence is your real title.

× Passive (topic label)

"Regional GDP Distribution"

Tells the audience nothing. They have to read the chart and figure out the point themselves.

✓ Active (insight claim)

"NCR's GDP share has fallen 4 points since 2018 as Visayas accelerates"

States the finding. The audience knows what to look for before they even see the chart.

Part II — Narrative Techniques

Three Storytelling Mistakes to Avoid

Data Dumping

Showing every metric you computed. Audiences remember nothing when given everything. Choose one insight per slide.

"Here are all 23 KPIs from this quarter's report..."

Burying the Lede

Putting the key finding on slide 15. By then, decision-makers have formed opinions based on the wrong data.

[Slides 1–14: methodology] "...and on this last slide, churn has doubled."

Analyst Mode Thinking

Presenting how you found the answer instead of what the answer is. Your methodology is context, not the story.

"First I cleaned nulls, then I ran a correlation matrix, then I built 3 models..."

The analyst's job is to translate complexity into clarity, not to expose the complexity to the audience.

The 1-3-1 Rule

1 main message, supported by 3 key points, with 1 clear call to action. Anything beyond this is an appendix.

Part III

Philippine Context

Applying storytelling frameworks to local datasets: GCash growth, PSA economic indicators, and the Hans Rosling approach adapted for Philippine data.

Part III — Philippine Context

The GCash Story: Raw Facts vs Narrative

The same data can land very differently depending on how it's framed.

Why the Narrative Version Works

  • Opens with a specific tension (pandemic disruption)
  • States the unexpected outcome before the numbers
  • Connects data to human behavior
  • Ends with forward implication
× Data dump

GCash had 20M users in 2019. In 2020 it had 36M. By 2023 it reached 81M. This represents a 305% increase over 4 years. The CAGR is approximately 42%.

✓ Narrative

When COVID-19 lockdowns emptied Philippine streets in 2020, millions of Filipinos opened a GCash wallet for the first time. What began as emergency access to cash became a habit: by 2023, 81 million Filipinos — more than the entire population of Germany — used GCash as their daily financial tool.

Part III — Philippine Context

GCash: 4× Growth in 4 Years

GCash users 2019-2023: 20M to 81M with milestone annotations

The Annotation Strategy

Three annotations mark pivotal narrative moments — not just data peaks. Each one answers "why did this happen?" without adding a separate text slide.

Chart Design Choices

Single color, filled area for magnitude, milestone annotations in context. No legend needed — one series, one story.

Part III — Philippine Context

Storyboard Before You Visualize

5-step storyboarding: Audience, Message, Flow, Visuals, Headlines

Why Storyboard First?

Most analysts open Python/Tableau and start making charts before knowing what story they're telling. Storyboarding forces the message decision upfront, saving hours of rework.

Low-Fidelity Tools

A napkin sketch is fine. Post-its on a whiteboard are ideal. The goal is to sequence your beats before investing in polish.

Part III — Philippine Context

The Rosling Method: Animate the Story

Philippine regions scatter: literacy vs poverty

Why This Works

  • Bubble size = population, color = island group
  • Add animation_frame="year" for Rosling-style motion
  • Name outliers (NCR, BARMM) to anchor the story

Rosling Technique

Animate over time with Plotly Express to reveal trends. Name outliers (NCR, BARMM) to anchor the audience's attention on the story.

Session 1 Key Takeaways

  1. Stories are remembered 13× better than raw data — narrative activates episodic memory.
  2. Lead with the answer (Pyramid Principle / BLUF) — never make decision-makers wait for your conclusion.
  3. Use CAR — Context, Anomaly, Recommendation — as a portable structure for any finding.
  4. Active titles state the insight, not the topic. The deck should be readable from titles alone.
  5. Storyboard before coding — decide what story you're telling before opening Python or Tableau.

Next: Session 2 — Dashboard Design & BI Tools

CMSC 178DA | Week 6 · Session 2

Dashboards:
Decision Support
at a Glance

Design principles, BI tools, and Philippine-context examples

Department of Computer Science

University of the Philippines Cebu

"A dashboard answers key questions in under 5 seconds."

A dashboard answers key questions in under 5 seconds.

If a manager has to hunt for the answer, the dashboard has failed. Good dashboards are designed for decisions — not for displaying all available data.

5 sec

To answer the primary question

3–5

Maximum KPIs above the fold

1

Primary question per dashboard

Agenda

Session 2 Objectives

Design Fundamentals

Apply the 5-second rule, Z-pattern layout, and KPI anatomy to dashboard wireframes.

Build with BI Tools

Compare Streamlit, Plotly Dash, Tableau, and Looker Studio — and know when to use each.

Evaluate & Iterate

Apply design-decision frameworks: color strategy, interactivity guidelines, and a review checklist.

Capstone projects in Week 12 will require a working interactive dashboard — this session builds the design vocabulary you'll need.

Builds on: Session 1 Narrative Structure

Part I

Dashboard Fundamentals

What makes a dashboard effective — and how to plan one before writing a single line of code.

Part I — Dashboard Fundamentals

Three Types of Dashboard

Not all dashboards answer the same question. Identify the type before you design.

What most dashboards get wrong

They try to be all three types simultaneously. The result is a cluttered screen that answers no question in 5 seconds.

Strategic

Long-term KPIs for executives. Low frequency (weekly/monthly). Answers: "Are we on track?"

e.g., BancNet Board KPI Dashboard — quarterly transaction volume vs target

Analytical

Drill-down exploration for analysts. Answers: "Why is this happening?"

e.g., PSA Poverty Explorer — filter by region, year, and indicator to find root causes

Operational

Real-time monitoring for operations teams. Answers: "What is happening right now?"

e.g., MMDA Live Traffic Monitor — live vehicle counts and incident alerts per highway

Part I — Dashboard Fundamentals

Dashboard vs Report: Know the Difference

DimensionDashboardReport
Primary purposeMonitor & trigger actionAnalyze & explain
Update frequencyReal-time to dailyWeekly, monthly, ad hoc
Data depthAggregated KPIs & trendsDetailed tables & drilldowns
Primary audienceOperational / executiveAnalytical / technical
Design prioritySpeed to insight (<5 sec)Completeness & accuracy
InteractionFilter, drill, alertRead, scroll, annotate

A dashboard that answers every question is a report. A report that fits on one screen is a dashboard. The distinction is about design intent, not technology.

Capstone Tip

Most capstone dashboards should be analytical — designed to let your audience explore a specific Philippine dataset. Know your type before Week 8.

Part I — Dashboard Fundamentals

Wireframe: Where Information Lives

Dashboard wireframe with header, KPI row, main chart, secondary chart, detail table, filter row

Standard Zone Order

Header → KPI row (3–5 metrics) → Main chart → Secondary breakdown → Detail table → Filter row.

Above the Fold Rule

The primary question must be answerable without scrolling. KPIs and the main chart must both be visible on the initial load.

Part I — Dashboard Fundamentals

Eye-Tracking: Z and F Patterns

Users scan dashboards the same way they scan web pages. Place your most important content where the eye naturally lands first.

Z-Pattern (data-light pages)

Top-left → top-right → diagonal → bottom-left → bottom-right. Use for dashboards with large visual elements.

F-Pattern (data-dense pages)

Top band → left margin → second horizontal scan. Use for tables and text-heavy analytical dashboards.

Practical Rule

Put your single most important KPI in the top-left. Users will see it regardless of reading pattern.

Z-pattern and F-pattern reading layouts for dashboards
Part I — Dashboard Fundamentals

Anatomy of a KPI Card

A well-designed KPI card answers five micro-questions at a glance.

① Metric label

Short, specific. "Monthly Active Users" not "Users".

② Big number

Current value, largest text on the card. Format: 2.4M not 2,400,000.

③ Delta + direction

↑ 12.3% vs last period. Color-coded: define what "bad" means for your metric.

④ Sparkline + ⑤ Context

12-month mini-trend and a reference: target, last year, or industry benchmark.

Annotated KPI card with all 5 elements labeled
Part I — Dashboard Fundamentals

Match the Chart to the Question

Chart selection guide: Comparison, Trend, Distribution, Relationship, Composition, Geospatial

The First Question to Ask

Before choosing a chart type, ask: "What question does the audience need to answer?" The question determines the chart — not the data shape.

Dashboard Chart Mix

A well-designed dashboard typically uses 2–3 chart types maximum. Variety without purpose creates cognitive load.

Part I — Dashboard Fundamentals

Chart Makeover: Design Principles in Action

Before and after chart design: cluttered rainbow vs clean Tufte-style

What Changed

Removed gridlines, rainbow colors, and 3D effects. Added direct labels, a single accent color, and a descriptive title that states the insight.

Tufte's Data-Ink Ratio

Maximize the share of ink used to display data. Every non-data element (borders, backgrounds, decorations) should earn its place or be removed.

Part I — Dashboard Fundamentals

Interactive Charts: Plotly Express Bar

Plotly-style interactive horizontal bar chart with hover tooltip

Why Interactive?

Hover tooltips reveal exact values without cluttering the chart. Users explore at their own pace — ideal for dashboards with many data points.

Plotly Express

One-line chart creation with built-in interactivity: hover, zoom, pan, and export. No JavaScript required — works in Jupyter, Streamlit, and Dash.

Part I — Dashboard Fundamentals

Interactive Scatter: Explore Relationships

Plotly scatter plot with hover crosshair showing GDP vs poverty by region

Multi-Encoding

Position (x, y) shows the relationship. Color encodes island group. Size encodes population. Hover reveals the region name — 4 dimensions in one chart.

Dashboard Use Case

Scatter plots with hover are the backbone of analytical dashboards. Users identify outliers visually, then hover for details — no separate table needed.

Part II

BI Tools

Streamlit, Plotly Dash, Tableau, and Looker Studio — what each does best, and how to choose for your capstone project.

Part II — BI Tools

The BI Tool Landscape

Radar chart comparing Streamlit, Dash, Tableau, Looker Studio

No Single Best Tool

Each tool optimizes for different trade-offs: code control, build speed, scalability, and cost. Your choice depends on audience, data source, and team skills.

For This Course

Streamlit is recommended for the capstone: Python-native, fast prototyping, free hosting on Streamlit Community Cloud.

Part II — BI Tools

Streamlit: Python Dashboards in Minutes

Streamlit dashboard mockup with sidebar, KPIs, and chart

Key Strengths

  • Pure Python — no HTML/CSS/JS
  • Reactive widgets auto-rerun
  • Free hosting on Community Cloud

Core Pattern

Sidebar for filters, columns for KPI metrics, and Plotly charts for interactive visuals — all in pure Python with reactive auto-rerun.

Best For

Rapid prototyping, ML demos, data exploration. Not ideal for pixel-perfect design or high-traffic consumer apps.

Part II — BI Tools

Streamlit Layout Patterns

Streamlit layout patterns: columns, tabs, and sidebar with cache

Caching for Performance

Use @st.cache_data on data loading functions. Without caching, Streamlit reruns the entire script on every interaction — slow for large datasets.

Session State

st.session_state persists values across reruns. Use it for multi-step workflows, pagination, or storing user selections between interactions.

Part II — BI Tools

Plotly Dash: Full Control

Plotly Dash app mockup with dropdown, chart, and stats panel

Choose Dash When

  • Multi-output interactivity needed
  • Custom HTML/CSS layout required
  • Enterprise deployment + auth

Callback Pattern

Dash uses decorator-based callbacks: wire inputs (dropdowns, sliders) to outputs (charts, tables). More boilerplate than Streamlit, but fully predictable data flow.

Architecture

Dash = Flask + React + Plotly.js. Callbacks wire inputs to outputs with decorators. More boilerplate, but predictable.

Part II — BI Tools

Tableau: Industry-Standard BI

Tableau is the dominant enterprise BI tool in Southeast Asian corporations. If you work in industry, you will encounter it.

Dimensions vs Measures

  • Dimensions — categorical fields (Region, Year, Product)
  • Measures — numeric / aggregatable fields (Revenue, Poverty Rate)

Drag-and-Drop Workflow

Rows / Columns shelves → Marks card → Filters → Pages shelf. No code required, but LOD expressions unlock analytical power.

Typical Tableau Workflow

  1. Connect to data source (CSV, SQL, Google Sheets)
  2. Drag dimensions to Rows/Columns shelves
  3. Drag measures to Marks card (size, color, label)
  4. Add filters and interactive parameters
  5. Compose views into a Dashboard
  6. Publish to Tableau Public (free)

Advanced: LOD Expressions

LOD = Level of Detail. Lets you aggregate at a different granularity than the current view.

Example: compare each region's poverty rate against the island group average — even when filters hide other regions. Essential for benchmarking dashboards.

Part II — BI Tools

Looker Studio & Power BI

Two free tools widely used in Philippine government, NGO, and BPO contexts.

Looker Studio (Google)

  • Completely free — used in UP and NEDA
  • Native Google Sheets, BigQuery, GA4 connectors
  • Drag-and-drop; easy Google Drive sharing
  • Custom formulas for grouping (e.g., regions → island groups)

Microsoft Power BI

  • Free desktop; DAX for complex measures
  • Dominant in Philippine BPO and banking
  • Deep Excel / Azure integration
  • DAX enables calculated YoY growth, running totals, and time intelligence
Part III

Design Decisions

Color strategy, interactivity guidelines, and a practical checklist before your dashboard goes live.

Part III — Design Decisions

Use Color to Encode Meaning

Categorical

Distinct hues for category membership. Limit to 7 categories — beyond that, use faceting.

ColorBrewer Set2 / Tableau 10 — colorblind safe

Sequential

Single-hue gradient for magnitude. Use for heatmaps and choropleths (e.g., poverty rate by province).

Blues palette — light = low, dark = high

Diverging

Two-hue gradient from a neutral midpoint. Use when data has a meaningful center (e.g., growth vs decline).

RdBu — red = below target, blue = above target

The Highlight Rule

Reserve your primary accent color for the one thing you want the audience to notice. Grey out everything else. Color draws the eye — use it strategically.

Colorblind-Safe Check

8% of men have red-green color vision deficiency. Verify with Coblis or seaborn colorblind palette. Use shape/pattern as redundant encodings.

Part III — Design Decisions

Interactivity: Less is More

Every interactive control adds cognitive load. Add interactivity only when it enables a question the static version cannot answer.

The Interaction Question Test

For each filter or control, ask: "What question does this let the user answer that they couldn't before?" If you can't articulate it, remove the control.

× Bad interactivity
  • 12 dropdown filters with overlapping scope
  • Tooltips that repeat data already shown in labels
  • Animation that plays on every data update
  • Color picker with 50 palette options
✓ Good interactivity
  • Date range slider for temporal exploration
  • Region multiselect for geographic comparison
  • Hover tooltip with context not shown in chart
  • Click-to-drill from summary → detail
Part III — Design Decisions

Philippine Example: GCash Analytics Dashboard

GCash Growth Dashboard built with Streamlit

Design Decisions Applied

  • 3 KPIs above the fold — primary questions answered instantly
  • One filter (year range) — meaningful exploration
  • One chart + one annotation — clear at a glance

Implementation

Built with Streamlit + Plotly Express: sidebar filter for year range, metric cards for KPIs, and a line chart with milestone annotations.

Extend for Your Capstone

Replace GCash data with your PSA/BSP dataset. Add a second tab for regional breakdown. Deploy free on Streamlit Community Cloud.

Dashboard Design Checklist

Design

  • Primary question answerable in <5 sec
  • KPIs (3–5) visible above the fold
  • Active title states the insight
  • Color encodes one thing consistently
  • Colorblind-safe palette verified

Interactivity & Build

  • Each control answers a specific question
  • Data loading cached (@st.cache_data)
  • Chart type matches the data question
  • Responsive on laptop screen (1280px+)
  • Deployed URL tested and shared

Next Week: Regression Analytics — from narrative to predictive models