Usage Example

Follow these steps to explore how covariance measures the relationship between two variables:

1. Initial State (Basic Mode): When you first load the simulation in Basic Mode, you'll see: (1) Scatter Plot Canvas (main area) - displays 6 data points forming a downward-sloping pattern (negative covariance), dynamic dashed lines showing the mean center (vertical line for mean X, horizontal line for mean Y), semi-transparent rectangles (blue for positive, red for negative) connecting each point to the mean center, and a grid background for reference, (2) Control Panel (below canvas) - contains toggles for showing/hiding rectangles and regression line, a "Reset Data" button, and a statistics display showing mean X, mean Y, covariance, correlation, variances, and regression equation. The default points create a clear negative relationship that makes covariance intuitive.
2. Understand Covariance Rectangles: Observe the colored rectangles connecting each data point to the mean center. Notice that points in the top-right quadrant (both X and Y above their means) and bottom-left quadrant (both X and Y below their means) have blue rectangles (positive covariance). Points in the top-left quadrant (X below mean, Y above mean) and bottom-right quadrant (X above mean, Y below mean) have red rectangles (negative covariance). The area of each rectangle is (x - x̄)(y - ȳ), which is exactly the contribution of that point to the covariance calculation.
3. Observe Mean Center Movement: As you drag points, watch how the dashed mean lines (vertical and horizontal) move. The mean center is the "center of gravity" of your data - it shifts as you move points. This is crucial for understanding that covariance is calculated relative to a dynamic center, not a fixed origin. Notice how moving a point far from the group creates a very large rectangle, demonstrating why outliers have a large impact on covariance.
4. Drag Points to Change Covariance: Click and drag a point to move it around the canvas. Watch how the rectangle color changes as you move the point between quadrants. For example, drag a point from the top-right (blue rectangle) to the top-left (red rectangle) - notice how the overall covariance value decreases. Try dragging a point far away from the group to see how it creates a massive rectangle, dramatically affecting the covariance. This visual feedback makes it clear how each point contributes to the overall covariance.
5. Show Regression Line: Toggle the "Show Regression Line" checkbox to display the linear regression line (green line). Notice how the slope of this line is directly related to the covariance - positive covariance creates an upward-sloping line, negative covariance creates a downward-sloping line. The formula shown in the statistics panel demonstrates this relationship: slope = Cov(X, Y) / Var(X). Try dragging points to see how the regression line rotates as covariance changes.
6. Add and Remove Points: Double-click anywhere on the canvas to add a new data point at that location. Right-click on a point to remove it (you must keep at least 2 points). Experiment with different point configurations: (1) Create a strong positive relationship by placing points in a diagonal line from bottom-left to top-right, (2) Create a strong negative relationship by placing points in a diagonal line from top-left to bottom-right, (3) Create zero covariance by placing points in a horizontal or vertical line, or in a circular pattern around the mean. Watch how the covariance value and correlation coefficient change.
7. Understand Correlation vs. Covariance: Notice that the correlation coefficient (r) is always between -1 and +1, while covariance can be any value. Correlation normalizes covariance by dividing by the standard deviations, making it scale-invariant. Try dragging points to create a very tight linear relationship (high correlation) versus a scattered cloud (low correlation). The correlation value tells you the strength of the linear relationship, while covariance tells you the direction and magnitude (but is affected by the scale of the variables).
8. Switch to Matrix Mode: Click the "Matrix (3D)" button to switch to the 3×3 covariance matrix explorer. This mode shows datasets with three variables (X, Y, Z) and displays all pairwise relationships in a grid. The diagonal cells show histograms (variances), while off-diagonal cells show scatter plots (covariances). Each cell has a colored background indicating the correlation strength (blue for positive, red for negative, intensity based on magnitude).
9. Explore Linked Data in Matrix Mode: Click on any cell in the 3×3 grid to load that relationship into the large editor canvas. Drag a point in the editor to see how it updates all related views - if you change a point's X and Y values in the X vs Y plot, the X vs Z and Y vs Z plots also update because the X and Y values changed. This demonstrates the concept of "linked data" - all views share the same underlying dataset, so changes in one view ripple through to all other views. This is how real multivariate data works - changing one variable affects all its relationships.
10. Understand the Covariance Matrix: In Matrix Mode, observe the symmetry of the covariance matrix - Cov(X, Y) = Cov(Y, X). The diagonal elements are variances (always positive), while off-diagonal elements are covariances (can be positive or negative). The heatmap colors give you a quick visual summary: strong positive relationships are bright blue, strong negative relationships are bright red, and weak relationships are nearly transparent. This matrix view is fundamental to multivariate statistics and is used in Principal Component Analysis (PCA), where the covariance matrix is decomposed to find the directions of maximum variance.

Tip: The key insight to look for is how covariance measures the tendency of two variables to vary together. The rectangle visualization makes this geometric: positive covariance means most rectangles are in Quadrants I and III (blue), indicating that when one variable is above its mean, the other tends to be above its mean too (or both below). Negative covariance means most rectangles are in Quadrants II and IV (red), indicating that when one variable is above its mean, the other tends to be below its mean. The regression line shows this relationship as a slope - positive covariance creates an upward slope, negative creates a downward slope. In Matrix Mode, the linked data concept is crucial: changing one variable affects all its relationships, demonstrating how multivariate data is interconnected. This geometric intuition - rectangles, quadrants, and linked views - makes covariance intuitive and visual.

Parameters

• Data Points: Interactive scatter plot points that can be dragged, added (double-click), or removed (right-click). Each point has X and Y coordinates that determine its position on the canvas. In Basic Mode, points are displayed as cyan circles with white borders. In Matrix Mode, points represent 3D data with X, Y, and Z values (each ranging from 0 to 100). The position of points relative to the mean center determines whether they contribute positive or negative covariance - points in Quadrants I and III (relative to mean) contribute positive covariance (blue rectangles), while points in Quadrants II and IV contribute negative covariance (red rectangles). Minimum 2 points required for calculations.
• Mean X (x̄): The arithmetic mean of all X coordinates. Calculated as x̄ = (1/n) × Σx_i, where n is the number of points. The mean X is displayed as a vertical dashed line on the canvas, showing the "center of gravity" along the X-axis. As you drag points, the mean line moves dynamically. The mean is used to calculate deviations (dx = x - x̄) for each point, which are then used in the covariance calculation. Range: 0 to canvas width (in pixels for Basic Mode, 0-100 for Matrix Mode). Displayed in the statistics panel with 1 decimal place precision.
• Mean Y (ȳ): The arithmetic mean of all Y coordinates. Calculated as ȳ = (1/n) × Σy_i. The mean Y is displayed as a horizontal dashed line on the canvas. Note that canvas coordinates have Y increasing downward, so the displayed value is inverted for mathematical clarity (showing Y as if it increases upward). The mean Y is used to calculate deviations (dy = y - ȳ) for covariance. Range: 0 to canvas height (inverted for display). Displayed in the statistics panel with 1 decimal place precision.
• Covariance (Cov): The covariance between X and Y, calculated as Cov(X, Y) = (1/n) × Σ((x_i - x̄)(y_i - ȳ)). This measures how X and Y vary together. Positive values indicate that when X is above its mean, Y tends to be above its mean (or both below), creating an upward-sloping relationship. Negative values indicate an inverse relationship (downward-sloping). The magnitude indicates the strength of the relationship (larger absolute values = stronger relationship). Covariance is visualized through the colored rectangles - the sum of all rectangle areas (positive and negative) divided by the number of points. Range: Can be any real number (unbounded). Displayed with 2 decimal places. Note: Canvas Y is inverted, so the displayed covariance is also inverted to match standard mathematical convention.
• Correlation (r): The Pearson correlation coefficient, calculated as r = Cov(X, Y) / (σ_X × σ_Y), where σ_X and σ_Y are the standard deviations. Correlation normalizes covariance to a value between -1 and +1, making it scale-invariant and easier to interpret. A value of +1 indicates perfect positive linear relationship, -1 indicates perfect negative linear relationship, and 0 indicates no linear relationship. Correlation is unitless and unaffected by scaling of the variables. Displayed with 4 decimal places. Note: Displayed value is inverted to match standard mathematical convention (Y-axis inversion).
• Variance X (Var(X)): The variance of the X variable, calculated as Var(X) = (1/n) × Σ(x_i - x̄)². Variance measures how spread out the X values are around their mean. Larger variance means the X values are more dispersed. Variance is always non-negative. The variance of X is used in the regression line calculation (slope = Cov / Var(X)). In Matrix Mode, variances appear on the diagonal of the covariance matrix. Displayed with 2 decimal places.
• Variance Y (Var(Y)): The variance of the Y variable, calculated as Var(Y) = (1/n) × Σ(y_i - ȳ)². Measures the spread of Y values around their mean. Used in correlation calculation (denominator). Always non-negative. Displayed with 2 decimal places.
• Regression Line (y = mx + b): The linear regression line (line of best fit) showing the linear relationship between X and Y. The slope (m) is calculated as m = Cov(X, Y) / Var(X), and the y-intercept (b) is calculated as b = ȳ - m × x̄. The regression line minimizes the sum of squared vertical distances from points to the line (least squares method). When "Show Regression Line" is enabled, a green line is drawn across the canvas. The equation is displayed in the statistics panel. The slope directly shows how covariance determines the direction and steepness of the relationship - positive covariance creates upward slope, negative creates downward slope. Note: Displayed equation accounts for Y-axis inversion in canvas coordinates.
• Show Rectangles Toggle: A checkbox that toggles the visibility of covariance rectangles. When ON (checked, default): semi-transparent rectangles are drawn connecting each data point to the mean center. Blue rectangles indicate positive contribution to covariance (points in Quadrants I and III relative to mean), red rectangles indicate negative contribution (points in Quadrants II and IV). The area of each rectangle is (x - x̄)(y - ȳ), which is exactly the contribution of that point to covariance. When OFF: rectangles are hidden, allowing you to focus on the regression line or point positions. Toggle this to compare the visual impact of rectangles versus the regression line.
• Show Regression Line Toggle: A checkbox that toggles the visibility of the linear regression line. When ON (checked): a green line is drawn across the canvas showing the best-fit line through the data points. The line's slope is determined by Cov(X, Y) / Var(X), demonstrating the direct relationship between covariance and regression slope. When OFF (default): the regression line is hidden, allowing you to focus on the covariance rectangles. Toggle this to see how covariance determines the regression line slope.
• Mode Selection (Basic/Matrix): Two buttons for switching between visualization modes. Basic Mode (2D): Interactive scatter plot with 2D data points (X, Y coordinates). Ideal for understanding the fundamental concept of covariance with rectangles and regression. Matrix Mode (3D): 3×3 covariance matrix explorer for datasets with three variables (X, Y, Z). Shows all pairwise relationships in a grid, with linked data updates. Diagonals show histograms (variances), off-diagonals show scatter plots (covariances). Click a cell to edit that relationship in the large editor canvas. Default: Basic Mode.
• Reset Data Button: A button that resets the data points to default values. In Basic Mode: resets to 6 points forming a negative covariance pattern. In Matrix Mode: generates 20 new random 3D data points (each with X, Y, Z values from 0 to 100). Clicking this button clears any custom point positions and restores the initial dataset, allowing you to start fresh with a known configuration.
• Matrix Grid Cell (Matrix Mode): A cell in the 3×3 covariance matrix grid. Each cell represents a relationship between two variables. Diagonal cells (Var(X), Var(Y), Var(Z)) show histograms displaying the distribution of that variable. Off-diagonal cells (Cov(X,Y), Cov(X,Z), Cov(Y,Z), etc.) show scatter plots. Each cell has a colored background (heatmap) indicating correlation strength - blue for positive, red for negative, intensity based on magnitude. Clicking a cell loads that relationship into the large editor canvas for detailed editing. Cells are labeled with the variable names (e.g., "Cov(X, Y)" or "Var(Z)").
• Editor Canvas (Matrix Mode): A large interactive canvas (500×400 pixels) for editing a selected relationship from the matrix grid. When you click a matrix cell, that relationship (e.g., X vs Y) is loaded into the editor. You can drag points in the editor to change their X and Y (or X and Z, or Y and Z) values. Changes immediately update all related views in the matrix grid due to linked data - if you change a point's X value, all X-related plots (X vs Y, X vs Z, Var(X)) update automatically. This demonstrates how multivariate data is interconnected.

Controls and Visualizations

• Main Canvas (Basic Mode): A large interactive canvas (800×500 pixels) displaying the scatter plot with data points, mean center lines, covariance rectangles, and optional regression line. The canvas uses a grid background for reference. Data points are displayed as cyan circles with white borders. You can drag points to move them, double-click to add new points, and right-click to remove points. The canvas coordinate system has X increasing rightward and Y increasing downward (standard canvas convention), but displayed statistics account for Y-axis inversion to match mathematical convention. The canvas updates in real-time as you interact with points.
• Mouse Drag Interaction: Click and hold on a data point, then drag to move it around the canvas. As you drag, the mean center lines move dynamically, covariance rectangles update their colors and sizes, and all statistics recalculate in real-time. This interactive dragging makes it immediately clear how point position affects covariance. In Matrix Mode, dragging a point in the editor canvas updates all related views in the matrix grid due to linked data. The drag interaction is constrained to keep points within canvas bounds.
• Double-Click to Add Point: Double-click anywhere on the main canvas to add a new data point at that location. The new point is immediately included in all calculations (mean, covariance, correlation, regression). This allows you to build custom datasets and observe how adding points in different quadrants affects the overall covariance. In Basic Mode, you can add as many points as desired. The point appears as a cyan circle and can be dragged or removed like any other point.
• Right-Click to Remove Point: Right-click on a data point to remove it from the dataset. The system maintains a minimum of 2 points (required for covariance calculation). When you remove a point, all statistics recalculate, and the mean center shifts if the removed point was far from the mean. This allows you to experiment with the effect of outliers - remove an outlier point and observe how covariance changes dramatically, demonstrating the sensitivity of covariance to extreme values.
• Mean Center Lines: Dynamic dashed lines (gray color) showing the mean center of the data. A vertical line indicates the mean X (x̄), and a horizontal line indicates the mean Y (ȳ). These lines intersect at the "center of gravity" of your data. As you drag points, the lines move in real-time, showing how the mean shifts. The mean center is crucial for understanding covariance - all deviations (dx, dy) and rectangle areas are calculated relative to this moving center, not a fixed origin. This visual feedback makes it clear that covariance is a measure of relationship relative to the data's own center.
• Covariance Rectangles: Semi-transparent rectangles connecting each data point to the mean center. The rectangle's width is (x - x̄) and height is (y - ȳ), so its area is (x - x̄)(y - ȳ), which is exactly the contribution of that point to covariance. Blue rectangles (rgba(52, 152, 219, 0.2)) indicate positive contribution (points in Quadrants I and III relative to mean). Red rectangles (rgba(231, 76, 60, 0.2)) indicate negative contribution (points in Quadrants II and IV). The rectangles are drawn with colored borders matching their fill color. When "Show Rectangles" is toggled OFF, rectangles are hidden to reduce visual clutter.
• Regression Line: A green line (color #27ae60, width 3 pixels) showing the linear regression (line of best fit) through the data points. The line extends across the entire canvas width. The slope is calculated as m = Cov(X, Y) / Var(X), and the y-intercept is b = ȳ - m × x̄. This line demonstrates the direct relationship between covariance and regression - positive covariance creates an upward slope, negative creates a downward slope. The line is only displayed when "Show Regression Line" is toggled ON. The regression line helps visualize how covariance determines the direction and strength of the linear relationship.
• Statistics Panel: A display panel in the control area showing real-time calculated values. Displays: (1) Mean X (x̄) - with 1 decimal place, (2) Mean Y (ȳ) - with 1 decimal place (Y inverted for display), (3) Covariance - with 2 decimal places (inverted for display), (4) Correlation (r) - with 4 decimal places (inverted for display), (5) Variance X - with 2 decimal places, (6) Variance Y - with 2 decimal places, (7) Regression Equation - formatted as "y = mx + b" with slope and intercept (accounting for Y inversion). All values update continuously as you drag points. Uses Courier New font with cyan labels and green values for visibility on black background.
• Matrix Grid (Matrix Mode): A 3×3 grid of small canvas elements (100×100 pixels each) showing all pairwise relationships in a 3-variable dataset. The grid is arranged with variable labels: Row 1 = X relationships, Row 2 = Y relationships, Row 3 = Z relationships. Each cell shows either a histogram (diagonal cells, variances) or a scatter plot (off-diagonal cells, covariances). Cells have colored backgrounds (heatmap) indicating correlation strength - blue for positive, red for negative, intensity based on magnitude. Clicking a cell loads that relationship into the large editor canvas. The grid updates in real-time when you drag points in the editor.
• Editor Canvas (Matrix Mode): A large interactive canvas (500×400 pixels) for editing a selected relationship from the matrix grid. When you click a matrix cell (e.g., X vs Y), that relationship is loaded into the editor. The editor shows the same visualization as Basic Mode (points, mean lines, rectangles, optional regression line) but for the selected variable pair. You can drag points in the editor to change their values for the selected dimensions. Changes immediately propagate to all related views - this is the "linked data" concept, demonstrating how multivariate data is interconnected. The editor title shows which relationship you're editing (e.g., "Editing: X vs Y").
• Matrix Values Display (Matrix Mode): A text panel showing the numerical values of the 3×3 covariance matrix. Displays all 9 elements: 3 variances (diagonal) and 6 covariances (off-diagonal, with symmetry noted). Values are formatted with 2 decimal places. The matrix is displayed in a monospace font (Courier New) with green text on black background. This provides a numerical summary complementing the visual heatmap in the grid. The matrix values update in real-time as you drag points in the editor.

Key Concepts

• Covariance: A statistical measure that quantifies how two variables change together. Covariance measures the direction of the linear relationship - positive covariance indicates that both variables tend to increase together (or both decrease together), while negative covariance indicates that one variable increases as the other decreases. The formula is Cov(X, Y) = (1/n) × Σ((x_i - x̄)(y_i - ȳ)), where each term (x_i - x̄)(y_i - ȳ) represents the area of a rectangle connecting point i to the mean center. Covariance is unbounded (can be any real number) and is sensitive to the scale of the variables. The geometric interpretation (rectangles) makes covariance intuitive - you can literally see how each point contributes to the overall measure.
• Geometric Interpretation (Rectangles): The most intuitive way to understand covariance is through geometry. Each data point forms a rectangle with the mean center: the rectangle's width is (x - x̄) and height is (y - ȳ), so its area is (x - x̄)(y - ȳ), which is exactly the contribution of that point to covariance. Points in Quadrant I (x > x̄, y > ȳ) and Quadrant III (x < x̄, y < ȳ) create positive rectangles (blue), while points in Quadrant II (x < x̄, y > ȳ) and Quadrant IV (x > x̄, y < ȳ) create negative rectangles (red). The covariance is the average area of all rectangles. This visualization makes it immediately clear why outliers have a large impact (they create very large rectangles) and why covariance measures linear relationships (rectangles align along a diagonal for strong linear relationships).
• Mean Center (Center of Gravity): The point (x̄, ȳ) where the vertical mean line (x̄) and horizontal mean line (ȳ) intersect. This is the "center of gravity" of your data - the point around which all deviations are calculated. As you drag points, the mean center moves dynamically, showing that covariance is calculated relative to a moving center, not a fixed origin. This is crucial for understanding that covariance measures relationships within the data itself, not relationships to external reference points. The mean center divides the scatter plot into four quadrants, and the distribution of points across these quadrants determines the sign and magnitude of covariance.
• Pearson Correlation Coefficient (r): A normalized version of covariance that ranges from -1 to +1, making it easier to interpret than raw covariance. Formula: r = Cov(X, Y) / (σ_X × σ_Y), where σ_X and σ_Y are the standard deviations. Correlation is unitless and scale-invariant - it doesn't change if you multiply X or Y by a constant. A value of +1 indicates perfect positive linear relationship (all points lie on an upward-sloping line), -1 indicates perfect negative linear relationship (all points lie on a downward-sloping line), and 0 indicates no linear relationship (points form a circular cloud or horizontal/vertical line). Correlation is more commonly used than covariance in practice because it's easier to interpret and compare across different datasets.
• Linear Regression (Line of Best Fit): A straight line that best fits the data points, minimizing the sum of squared vertical distances. The slope of the regression line is directly determined by covariance: m = Cov(X, Y) / Var(X). This relationship shows that covariance determines the direction and steepness of the linear relationship - positive covariance creates an upward slope, negative creates a downward slope, and larger absolute covariance creates a steeper slope. The y-intercept is b = ȳ - m × x̄. The regression line is the "best" linear approximation of the relationship between X and Y, and covariance is the key ingredient in finding this line. This connection between covariance and regression is fundamental to understanding linear relationships in data.
• Variance: The variance of a variable measures how spread out its values are around the mean. For variable X, Var(X) = (1/n) × Σ(x_i - x̄)². Variance is always non-negative (can't be negative). Larger variance means the values are more dispersed. Variance appears in the covariance formula (as the denominator for regression slope) and in the correlation formula (as part of the normalization). In the covariance matrix (Matrix Mode), variances appear on the diagonal (Var(X), Var(Y), Var(Z)), while covariances appear off the diagonal. Variance is a special case of covariance - Var(X) = Cov(X, X).
• Covariance Matrix: For datasets with multiple variables (e.g., X, Y, Z), the covariance matrix is a square matrix containing all pairwise covariances. For 3 variables, it's a 3×3 matrix where element [i,j] is Cov(variable_i, variable_j). The matrix is symmetric (Cov(X, Y) = Cov(Y, X)) and the diagonal elements are variances (Cov(X, X) = Var(X)). The covariance matrix is fundamental to multivariate statistics - it's used in Principal Component Analysis (PCA) to find directions of maximum variance, in multivariate regression, and in machine learning for feature relationships. Matrix Mode visualizes this matrix as a grid, with heatmap colors indicating correlation strength.
• Quadrants and Sign of Covariance: The scatter plot is divided into four quadrants relative to the mean center. Quadrant I (top-right): x > x̄, y > ȳ → positive contribution (blue rectangle). Quadrant II (top-left): x < x̄, y > ȳ → negative contribution (red rectangle). Quadrant III (bottom-left): x < x̄, y < ȳ → positive contribution (blue rectangle). Quadrant IV (bottom-right): x > x̄, y < ȳ → negative contribution (red rectangle). The overall covariance is positive if most points are in Quadrants I and III (both variables above or both below their means), and negative if most points are in Quadrants II and IV (one above, one below). This quadrant-based visualization makes it immediately clear why certain point configurations create positive or negative covariance.
• Outliers and Sensitivity: Covariance is highly sensitive to outliers because the contribution of each point is (x - x̄)(y - ȳ), which can be very large if a point is far from the mean in both dimensions. When you drag a point far from the group, it creates a massive rectangle, dramatically affecting the overall covariance. This sensitivity is both a strength (covariance captures strong relationships) and a weakness (outliers can dominate the measure). The rectangle visualization makes this sensitivity obvious - a single outlier can create a rectangle larger than all other rectangles combined, pulling the covariance value toward that outlier's contribution. This is why robust alternatives to covariance (like Spearman correlation) are sometimes used when outliers are present.
• Linked Data (Matrix Mode): In Matrix Mode, all views share the same underlying dataset. When you change a point's X value in the X vs Y plot, that change immediately affects the X vs Z plot (because X changed) and the Y vs Z plot (if Y also changed). This "ripple effect" demonstrates how multivariate data is interconnected - you can't change one variable without affecting all its relationships. This is how real-world data works - if you measure a person's height (X), weight (Y), and age (Z), changing the height affects the height-weight relationship, the height-age relationship, and potentially the weight-age relationship (if weight correlates with height). The linked data concept is crucial for understanding multivariate statistics and is visualized through the synchronized updates across all matrix grid cells.
• What to Look For: When exploring the simulation, observe: (1) How dragging points between quadrants changes rectangle colors (blue ↔ red), (2) How the mean center lines move as you drag points, showing that covariance is relative to a dynamic center, (3) How outliers create massive rectangles, demonstrating sensitivity, (4) How the regression line slope changes with covariance (positive covariance → upward slope, negative → downward slope), (5) How correlation normalizes covariance to a -1 to +1 range, (6) In Matrix Mode, how dragging a point in one view updates all related views, demonstrating linked data. The key insight is the geometric interpretation: covariance is the average area of rectangles, where each rectangle's area represents a point's contribution. Positive areas (blue) indicate variables moving together, negative areas (red) indicate variables moving apart. This rectangle-based visualization makes covariance intuitive and visual, transforming an abstract mathematical concept into a concrete geometric picture.