Chapter 12: Key Takeaways - Fundamentals of Sports Data Visualization

Quick Reference Guide

The Core Principle

Visualization is communication, not decoration. Every visual element should serve the goal of helping your audience understand the data and make better decisions.

1. Visual Perception Hierarchy

Pre-Attentive Attributes (Ranked by Accuracy)

1. Position along a common scale - Most accurate
2. Length of aligned elements
3. Angle/Slope of lines
4. Area of shapes
5. Color saturation - Least accurate

Rule of Thumb

Use position for your most important comparisons. Reserve color for categorical distinctions or highlighting.

2. Chart Type Selection Guide

One-Page Decision Framework

Charts to Avoid

• Pie charts: Human perception of angles is poor
• 3D effects: Distort data, add no information
• Dual y-axes: Confuse relationships
• Decorative elements: Reduce data-ink ratio

3. Color Guidelines

Semantic Color Scheme

PERFORMANCE_COLORS = {
    'positive': '#2a9d8f',   # Teal/Green - good performance
    'negative': '#e76f51',   # Coral/Red - poor performance
    'neutral': '#e9c46a',    # Yellow - average
    'reference': '#adb5bd',  # Gray - benchmarks/context
}

Colorblind-Safe Palette

ACCESSIBLE_COLORS = [
    '#0077BB',  # Blue
    '#EE7733',  # Orange
    '#009988',  # Teal
    '#CC3311',  # Red
    '#33BBEE',  # Cyan
    '#EE3377',  # Magenta
]

Color Rules

1. Never rely on color alone - add shape, pattern, or labels
2. Use diverging schemes for data with meaningful midpoint (EPA at 0)
3. Use sequential schemes for magnitude (more → darker)
4. Test with colorblindness simulators before publishing
5. Ensure sufficient contrast (4.5:1 minimum for text)

4. Typography Standards

Hierarchy

Font Recommendations

• Screen: Open Sans, Roboto, Inter
• Print: Helvetica, Arial, Source Sans Pro
• Data-heavy: IBM Plex Sans, Fira Sans

5. Audience-Specific Design

Quick Reference Matrix

Design Adaptations by Audience

Coaches (In-Game) - Maximum 3-5 metrics per view - Large text (readable at 10 feet) - Color-coded alerts - One-tap drill-down

Executives - Lead with conclusions - Context through benchmarks - ROI emphasis - Simple visualizations

Fans - Emotional hooks - Team branding prominent - Call to action - Mobile-first

6. Dashboard Layout Patterns

The F-Pattern

Users scan left-to-right, then down. Place: - Top-left: Most important KPIs - Top-right: Secondary metrics - Below fold: Supporting detail

Information Hierarchy

1. Executive Summary: 4-6 KPI cards
2. Key Trends: 2-3 primary visualizations
3. Supporting Detail: Expandable sections
4. Raw Data: Available on demand

Layout Grid

┌─────────────┬─────────────┬─────────────┐
│   KPI 1     │    KPI 2    │    KPI 3    │  ← Quick read
├─────────────┴─────────────┼─────────────┤
│     Primary Chart         │   Context   │  ← Main story
├───────────────────────────┼─────────────┤
│     Secondary Chart       │   Filters   │  ← Detail
└───────────────────────────┴─────────────┘

7. Data-Ink Ratio Checklist

Remove Unless Essential

• [ ] Background colors
• [ ] Heavy gridlines
• [ ] Redundant labels
• [ ] Decorative borders
• [ ] 3D effects
• [ ] Legend boxes (use direct labeling)

Keep These

• [ ] Axis labels with units
• [ ] Data point labels (when space permits)
• [ ] Reference lines (averages, thresholds)
• [ ] Source attribution
• [ ] Clear titles

8. Common Mistakes to Avoid

The "More is Better" Trap

Problem: Including every available metric Solution: Ask "What decision does this help make?" If none, remove it.

The "Pretty First" Trap

Problem: Choosing charts for aesthetics over function Solution: Start with the question, then find the simplest chart that answers it.

The "One Size Fits All" Trap

Problem: Same visualization for all audiences Solution: Create audience-specific views of the same underlying data.

The "Default Settings" Trap

Problem: Accepting software defaults for colors, fonts, etc. Solution: Build a custom style guide and apply it consistently.

9. Quick Code Templates

Standard Plot Setup

import matplotlib.pyplot as plt

def setup_plot(title, figsize=(10, 6)):
    """Standard plot configuration."""
    fig, ax = plt.subplots(figsize=figsize)

    # Clean style
    ax.spines['top'].set_visible(False)
    ax.spines['right'].set_visible(False)

    # Typography
    ax.set_title(title, fontsize=14, fontweight='bold', pad=10)

    return fig, ax

Color Application

def performance_color(value, threshold=0):
    """Return appropriate color based on value."""
    if value > threshold:
        return '#2a9d8f'  # Positive
    elif value < threshold:
        return '#e76f51'  # Negative
    else:
        return '#adb5bd'  # Neutral

Save for Different Outputs

def save_visualization(fig, name):
    """Save visualization for different outputs."""
    # Screen (web/presentation)
    fig.savefig(f'{name}_screen.png', dpi=150, bbox_inches='tight')

    # Print (reports)
    fig.savefig(f'{name}_print.png', dpi=300, bbox_inches='tight')

    # Vector (publication)
    fig.savefig(f'{name}.svg', bbox_inches='tight')

10. Pre-Publication Checklist

Before Sharing Any Visualization

Content - [ ] Title clearly states what the visualization shows - [ ] All axes are labeled with units - [ ] Data source is attributed - [ ] Time period is specified - [ ] Sample size noted where relevant

Accessibility - [ ] Passes colorblind simulation test - [ ] Text meets contrast requirements - [ ] Can be understood in grayscale - [ ] Screen reader friendly (alt text)

Accuracy - [ ] Y-axis starts at appropriate value - [ ] No misleading truncation - [ ] Scale is consistent - [ ] Numbers verified against source

Polish - [ ] Consistent typography - [ ] Aligned elements - [ ] No typos - [ ] Proper resolution for output medium

Formulas and Benchmarks Reference

Cognitive Load Guidelines

• Working Memory Limit: 7 ± 2 items
• Maximum Categories: 5-7 distinct colors
• Recommended Metrics per View: 4-6 for executives, 10-15 for analysts

Typography Contrast

• Minimum Ratio: 4.5:1 for normal text
• Large Text (18pt+): 3:1 acceptable
• Test Tool: WebAIM Contrast Checker

File Specifications

Essential Resources

Tools

• Color: ColorBrewer, Coolors, Viz Palette
• Testing: Coblis (colorblind simulator)
• Contrast: WebAIM Contrast Checker
• Fonts: Google Fonts

Libraries

# Core visualization
import matplotlib.pyplot as plt
import seaborn as sns

# Configuration
plt.style.use('seaborn-v0_8-whitegrid')
sns.set_palette('colorblind')

Recommended Reading

1. The Visual Display of Quantitative Information - Tufte
2. Storytelling with Data - Knaflic
3. Information Dashboard Design - Few

Chapter Summary in One Sentence

Design visualizations by understanding your audience's constraints and questions first, then select the simplest chart that accurately answers those questions using accessible colors and clear typography.