Scatter Plots: Relationships & Correlation

Scatter plots reveal relationships between two variables. Each point represents an observation, with its position showing values on both axes. This lets us spot patterns like "do longer delivery distances lead to lower ratings?"

When to Use Scatter Plots

Scatter plots excel at showing:

• Relationships between two continuous variables
• Correlation patterns (positive, negative, or none)
• Clusters and groupings in data
• Outliers that don't fit the pattern

They're NOT ideal for:

• Categorical data (use bar charts)
• Time series (use line charts)
• Part-to-whole relationships (use pie charts)

Understanding Correlation

Correlation measures how two variables move together:

Try It: Correlation Explorer

Explore relationships in QuickBite's delivery data. Select different variables, add trend lines, and see the correlation coefficient update in real-time:

Interpreting Scatter Plot Patterns

Positive Correlation

Points trend upward left-to-right. Example: Distance vs Delivery Time - longer distances mean longer times.

Negative Correlation

Points trend downward left-to-right. Example: Delivery Time vs Rating - longer waits often lead to lower ratings.

No Correlation

Points are scattered randomly with no pattern. Example: Order Value vs Rating - expensive orders aren't necessarily rated higher.

Non-Linear Relationships

Some relationships curve. For example, driver satisfaction might increase with pay up to a point, then plateau.

Correlation vs Causation

Two variables can be correlated because:

• A causes B: Longer distance causes longer delivery time
• B causes A: Lower ratings cause longer times (drivers avoid the area?)
• C causes both: Rain causes both longer times AND lower ratings
• Coincidence: Purely random chance

Always investigate the why behind correlations before drawing conclusions.

Adding Trend Lines

Trend lines (regression lines) help visualize the overall pattern:

// Calculate linear regression
function linearRegression(x, y) {
  const n = x.length;
  const sumX = x.reduce((a, b) => a + b, 0);
  const sumY = y.reduce((a, b) => a + b, 0);
  const sumXY = x.reduce((t, xi, i) => t + xi * y[i], 0);
  const sumX2 = x.reduce((t, xi) => t + xi * xi, 0);

  const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
  const intercept = (sumY - slope * sumX) / n;

  return { slope, intercept };
}

Best Practices

1. Choose Meaningful Variables

Only plot variables where a relationship makes logical sense.

2. Handle Overplotting

With many points, use:

• Transparency (pointBackgroundColor: 'rgba(45, 212, 191, 0.5)')
• Smaller point sizes
• Binned/hexbin plots for very large datasets

3. Add Context with Color

Use color to encode a third variable (like category) to reveal patterns within groups.

4. Include the Correlation Coefficient

Always show the r-value so viewers can quantify the relationship strength.

Key Takeaways

• Scatter plots reveal relationships between two continuous variables
• Correlation coefficient (r) quantifies relationship strength (-1 to +1)
• Trend lines make patterns more visible
• Correlation does NOT imply causation - always investigate why
• Use color to add a third dimension (category, time period, etc.)

Next, we'll explore heatmaps for visualizing patterns in 2D data grids.