Matrix Operations Visualizer
Interactive visualization of matrix operations with composable components
Composable Matrix Components
These components are designed to be fully composable and reusable. You can nest operations, create pipelines, and visualize complex matrix computations interactively.
Basic Matrix Visualization
Standard Matrix
Matrix A
3 × 3
1.00
2.00
3.00
4.00
5.00
6.00
7.00
8.00
9.00
Heatmap with Custom Precision
Random Matrix (3 decimals)
3 × 3
0.500
-0.300
0.800
-0.200
0.700
-0.400
0.600
-0.100
0.300
Identity Matrix
I₃
3 × 3
1.00
0.00
0.00
0.00
1.00
0.00
0.00
0.00
1.00
Editable Matrix
Click cells to edit values
Editable
2 × 2
1.00
2.00
3.00
4.00
Matrix with Row/Column Indices
Shows indices for reference
Indexed Matrix
3 × 3
0
1
2
0
1.00
2.00
3.00
1
4.00
5.00
6.00
2
7.00
8.00
9.00
Large Matrix (Truncated)
Automatically truncates large matrices
15×15 Matrix
15 × 15
0
1
2
3
4
0
0.00
1.00
2.00
3.00
4.00
⋯
1
15.00
16.00
17.00
18.00
19.00
⋯
2
30.00
31.00
32.00
33.00
34.00
⋯
3
45.00
46.00
47.00
48.00
49.00
⋯
4
60.00
61.00
62.00
63.00
64.00
⋯
⋮
⋮
⋮
⋮
⋮
⋱
Unary Operations
Transpose (Default 2 decimals)
Input (3×3)
3 × 3
0.50
-0.30
0.80
-0.20
0.70
-0.40
0.60
-0.10
0.30
Aᵀ
Transpose
Result (3×3)
3 × 3
0.50
-0.20
0.60
-0.30
0.70
-0.10
0.80
-0.40
0.30
Transpose (4 decimals)
Input (3×3)
3 × 3
0.5000
-0.3000
0.8000
-0.2000
0.7000
-0.4000
0.6000
-0.1000
0.3000
Aᵀ
Transpose
Result (3×3)
3 × 3
0.5000
-0.2000
0.6000
-0.3000
0.7000
-0.1000
0.8000
-0.4000
0.3000
Matrix Inverse
Input (2×2)
2 × 2
2.00
-1.00
1.00
3.00
A⁻¹
Inverse
Result (2×2)
2 × 2
0.43
0.14
-0.14
0.29
Determinant (1 decimal)
Input (2×2)
2 × 2
2.0
-1.0
1.0
3.0
det(A)
Determinant
7.0
Trace (No decimals)
Input (3×3)
3 × 3
1
2
3
4
5
6
7
8
9
tr(A)
Trace
15
Frobenius Norm (5 decimals)
Input (3×3)
3 × 3
0.50000
-0.30000
0.80000
-0.20000
0.70000
-0.40000
0.60000
-0.10000
0.30000
||A||_F
Frobenius Norm
1.45945
Binary Operations
Matrix Multiplication
A (2×2)
2 × 2
2.00
-1.00
1.00
3.00
×
B (2×2)
2 × 2
1.00
2.00
3.00
4.00
Matrix Multiply
Result (2×2)
2 × 2
-1.00
0.00
10.00
14.00
Matrix Addition
A (3×3)
3 × 3
1.00
2.00
3.00
4.00
5.00
6.00
7.00
8.00
9.00
+
B (3×3)
3 × 3
9.00
8.00
7.00
6.00
5.00
4.00
3.00
2.00
1.00
Add
Result (3×3)
3 × 3
10.00
10.00
10.00
10.00
10.00
10.00
10.00
10.00
10.00
Matrix Subtraction
A (3×3)
3 × 3
1.00
2.00
3.00
4.00
5.00
6.00
7.00
8.00
9.00
−
B (3×3)
3 × 3
9.00
8.00
7.00
6.00
5.00
4.00
3.00
2.00
1.00
Subtract
Result (3×3)
3 × 3
-8.00
-6.00
-4.00
-2.00
0.00
2.00
4.00
6.00
8.00
Hadamard Product (Element-wise)
A (2×2)
2 × 2
2.00
-1.00
1.00
3.00
⊙
B (2×2)
2 × 2
1.00
2.00
3.00
4.00
Hadamard Product
Result (2×2)
2 × 2
2.00
-2.00
3.00
12.00
Dot Product
A (1×3)
1 × 3
1.00
2.00
3.00
·
B (3×1)
3 × 1
4.00
5.00
6.00
Dot Product
32.00
Composed Operations
Simple Nested: (Aᵀ)⁻¹
A
2 × 2
2.00
-1.00
1.00
3.00
→
Input (2×2)
2 × 2
2.00
-1.00
1.00
3.00
Aᵀ
Transpose
Result (2×2)
2 × 2
2.00
1.00
-1.00
3.00
→
Input (2×2)
2 × 2
2.00
1.00
-1.00
3.00
A⁻¹
Inverse
Result (2×2)
2 × 2
0.43
-0.14
0.14
0.29
Chained Multiplication: A × B × C
2 × 2
2.00
-1.00
1.00
3.00
2 × 2
1.00
2.00
3.00
4.00
2 × 2
2.00
-1.00
1.00
3.00
Step 1: M1 × ... × M2
2 × 2
-1.00
0.00
10.00
14.00
Step 2: M1 × ... × M3
2 × 2
-2.00
1.00
34.00
32.00
Complex Composition: det(Aᵀ × B)
Input A
2 × 2
2.00
-1.00
1.00
3.00
→
Aᵀ
2 × 2
2.00
1.00
-1.00
3.00
×
B
2 × 2
1.00
2.00
3.00
4.00
=
Aᵀ × B
2 × 2
5.00
8.00
8.00
10.00
→
det(Aᵀ × B)
-14.00
True Composition (Working!): det(Aᵀ × B⁻¹)
✨ This now works! Operations can be truly nested and composed.
composable-operations.jsxjsx
<ComposableOperation>
<CDeterminant>
<CMatMul>
<CTranspose>
<Matrix data={A} />
</CTranspose>
<CInverse>
<Matrix data={B} />
</CInverse>
</CMatMul>
</CDeterminant>
</ComposableOperation>Live Example:
Input
2 × 2
-2.50
1.50
6.50
-2.50
→
det(A)
Determinant
→
-3.50
Final Result:
-3.50
Step-by-step visualization:
A
2 × 2
2.00
-1.00
1.00
3.00
→
Aᵀ
2 × 2
2.00
1.00
-1.00
3.00
and
B
2 × 2
1.00
2.00
3.00
4.00
→
B⁻¹
2 × 2
-2.00
1.00
1.50
-0.50
→
Aᵀ × B⁻¹
2 × 2
-2.50
1.50
6.50
-2.50
→
det(Aᵀ × B⁻¹)
-3.50
More Composable Examples
Simple Composition: Transpose of Inverse
Input
2 × 2
0.429
0.143
-0.143
0.286
→
Aᵀ
Transpose
→
2 × 2
0.429
-0.143
0.143
0.286
Complex Nesting: (A + B)ᵀ
Input
2 × 2
3.00
1.00
4.00
7.00
→
Aᵀ
Transpose
→
2 × 2
3.00
4.00
1.00
7.00
Triple Nesting: det((A × B)⁻¹)
Input
2 × 2
-1.00
0.00
0.71
0.07
→
det(A)
Determinant
→
-0.07
Final Result:
-0.07
Vector Dot Product (1×3 · 3×1 = scalar)
1 × 3
1.000
2.000
3.000
and
3 × 1
4.000
5.000
6.000
→
MatMul
→
1 × 1
32.000
Scalar Operations: Trace of Matrix Product
Input
2 × 2
-1.00
0.00
10.00
14.00
→
tr(A)
Trace
→
13.00
Final Result:
13.00
Norm of Transposed Matrix (scalar result)
Input
2 × 2
2.0000
1.0000
-1.0000
3.0000
→
||A||_F
Norm
→
3.8730
Final Result:
3.8730
Scalar Multiplication: 3 × Matrix
3
×
2 × 2
2.00
-1.00
1.00
3.00
→
2 × 2
6.0
-3.0
3.0
9.0
Complex with Scalar: 2 × (A + B)ᵀ
2
×
2 × 2
2.00
-1.00
1.00
3.00
2 × 2
1.00
2.00
3.00
4.00
→
Add
→
u + v
2 × 2
3.00
1.00
4.00
7.00
→
Aᵀ
Transpose
→
2 × 2
3.00
4.00
1.00
7.00
→
2 × 2
6.0
8.0
2.0
14.0
Scalar Result from Vectors: Row × Column = Scalar
Note: 1×3 matrix × 3×1 matrix = 1×1 matrix (displayed as scalar)
1 × 3
2
3
4
and
3 × 1
1
2
3
→
MatMul
→
1 × 1
20
Pipeline Operations
Sequential Processing Pipeline
Click “Animate” to see the operations execute step by step
Input
2 × 2
2.00
-1.00
1.00
3.00
Input (2×2)
2 × 2
2.00
-1.00
1.00
3.00
Aᵀ
Transpose
Result (2×2)
2 × 2
2.00
1.00
-1.00
3.00
A (2×2)
2 × 2
2.00
-1.00
1.00
3.00
×
B (2×2)
2 × 2
1.00
2.00
3.00
4.00
Matrix Multiply
Result (2×2)
2 × 2
-1.00
0.00
10.00
14.00
Input (2×2)
2 × 2
2.00
-1.00
1.00
3.00
det(A)
Determinant
7.00
Mathematical Equations
Equation Visualization
Matrix Product Rule
(AB)ᵀ=BᵀAᵀ
Determinant Property
det(AB)=det(A) × det(B)
Usage Examples
Component Composition Examples
matrix-operations.jsxjsx
1// Basic matrix display
2<Matrix data={[[1,2],[3,4]]} />
3
4// Binary operation with child matrices
5<CMatMul>
6 <Matrix data={A} />
7 <Matrix data={B} />
8</CMatMul>
9
10// Deeply nested operations
11<ComposableOperation>
12 <CDeterminant>
13 <CMatMul>
14 <CTranspose>
15 <Matrix data={A} />
16 </CTranspose>
17 <CInverse>
18 <Matrix data={B} />
19 </CInverse>
20 </CMatMul>
21 </CDeterminant>
22</ComposableOperation>
23
24// Complex composition
25<CTranspose>
26 <CAdd>
27 <CInverse>
28 <Matrix data={A} />
29 </CInverse>
30 <Matrix data={B} />
31 </CAdd>
32</CTranspose>
33
34// Custom precision
35<ComposableOperation precision={4}>
36 <CDeterminant>
37 <Matrix data={matrix} />
38 </CDeterminant>
39</ComposableOperation>Features
Visualization
- Interactive matrix cells with hover effects
- Color schemes (heatmap, diverging, sequential)
- Editable matrices with live updates
- Dimension and index display
- Automatic truncation for large matrices
Operations
- Full set of unary operations
- Complete binary operations
- Composable and nestable components
- Pipeline processing with animation
- Error handling and dimension validation
Interactivity
- Cell editing with validation
- Animation support for operations
- Step-by-step pipeline execution
- Hover information display
- Click handlers for custom behavior
Developer Experience
- Full TypeScript support
- Composable React components
- Flexible props and customization
- Event callbacks for integration
- Server-side rendering compatible