Skip to content

Norm Comparison Visualizer

Run the Norm Comparison Visualizer Fullscreen

About This MicroSim

This visualization helps students understand different ways to measure vector "length" or distance. By showing the unit "circles" for L1, L2, and L-infinity norms simultaneously, students can see how each norm defines what it means for a vector to have "length 1."

Learning Objective: Students will compare and contrast L1, L2, and L-infinity norms by observing unit circles and distance measurements for each norm type.

How to Use

  1. Drag the Point: Click and drag the black point to any location on the grid
  2. Observe Norm Values: The info panel shows all three norm values for the current point
  3. Compare Unit Shapes:
  4. Blue Circle: L2 norm (Euclidean) - points at distance 1 from origin
  5. Green Diamond: L1 norm (Manhattan) - points with L1 distance 1 from origin
  6. Orange Square: L∞ norm (Maximum) - points with L∞ distance 1 from origin
  7. Toggle Norms: Use checkboxes to show/hide each norm's unit shape
  8. Adjust Radius: Use the slider to see how the shapes scale
  9. Animate: Watch the point move around the L2 unit circle

Key Concepts Demonstrated

L2 Norm (Euclidean)

\(\(\|\mathbf{v}\|_2 = \sqrt{x^2 + y^2}\)\) - Standard "straight-line" distance - Unit shape is a circle - Used in: Least squares regression, ridge regularization

L1 Norm (Manhattan)

\(\(\|\mathbf{v}\|_1 = |x| + |y|\)\) - Distance measured along axes (like city blocks) - Unit shape is a diamond (rotated square) - Used in: Lasso regularization, sparse solutions

L∞ Norm (Maximum)

\(\(\|\mathbf{v}\|_\infty = \max(|x|, |y|)\)\) - Maximum absolute component value - Unit shape is a square - Used in: Constraining maximum deviation

Why Different Norms Matter

  • For (3, 4): L1 = 7, L2 = 5, L∞ = 4
  • The same point can have very different "distances" depending on which norm you use
  • In machine learning, L1 promotes sparse solutions while L2 distributes weight evenly

Embedding This MicroSim

1
2
3
4
5
<iframe src="https://dmccreary.github.io/linear-algebra/sims/norm-comparison-visualizer/main.html"
        height="502px"
        width="100%"
        scrolling="no">
</iframe>

Lesson Plan

Grade Level

Undergraduate introductory linear algebra or machine learning

Duration

15-20 minutes

Prerequisites

  • Basic understanding of vectors and distance
  • Familiarity with absolute value

Learning Activities

  1. Exploration (5 min):
  2. Drag the point to various locations
  3. Observe how the three norm values change differently

  4. Find points where two norms give the same value

  5. Unit Shape Analysis (5 min):

  6. Turn off two norms and examine one at a time
  7. Drag the point onto each boundary

  8. Notice the indicator when point is "on boundary"

  9. Comparison Activity (5 min):

  10. Find a point where L1 > L2 > L∞
  11. Find a point where all three norms are equal (hint: on an axis)

  12. Predict which norm will be largest for a given point

  13. Application Discussion (5 min):

  14. Why might we use L1 in machine learning?
  15. What does it mean geometrically for L1 to "promote sparsity"?

Discussion Questions

  1. Why is the L1 unit "circle" a diamond shape?
  2. For what points are all three norms equal?
  3. Which norm gives the smallest value for most points? Why?
  4. How does the relationship between norms change as points move farther from the origin?

Assessment Ideas

  • Calculate all three norms for a given vector
  • Predict which shape a point is inside/outside of
  • Explain why L1 regularization promotes sparse solutions

References

  1. Understanding Different Norms - Wolfram MathWorld
  2. L1 vs L2 Regularization - StatQuest
  3. Why L1 promotes sparsity - Cross Validated discussion
  4. Boyd, S. & Vandenberghe, L. (2004). Convex Optimization. Cambridge University Press.