"Just as atoms interact through fundamental forces to create the complexity of matter, vectors in n-dimensional space exhibit resonance patterns that reveal the hidden architecture of mathematical relationships."
VectoVerse introduces a revolutionary paradigm for understanding high-dimensional vectors through the lens of atomic physics. This framework transforms abstract mathematical entities into intuitive, interactive "information atoms" that exhibit behaviors analogous to quantum mechanical systems.
| Atomic Property | Vector Analogy | Mathematical Foundation | Implementation Method |
|---|---|---|---|
| Electron Charge | Component Polarity | sign(vᵢ) where vᵢ is the i-th component |
getInformationQuantums() |
| Nuclear Stability | Vector Magnitude | ‖v‖ = √(Σᵢ vᵢ²) |
magnitude() |
| Electromagnetic Force | Cosine Similarity | cos(θ) = (u·v)/(‖u‖‖v‖) |
cosineSimilarity() |
| Resonance Frequency | Harmonic Alignment | R(u,v) = (u·v)²/‖u-v‖² |
harmonicAlignment() |
| Quantum Entanglement | Vector Correlation | ρ(u,v) = cov(u,v)/(σᵤσᵥ) |
quantumEntanglement() |
| Information Entropy | Component Distribution | H(v) = -Σᵢ p(vᵢ)log₂(p(vᵢ)) |
informationEntropy() |
| Nuclear Forces | Electromagnetic/Gravitational | F = k(u·v)/‖u-v‖² |
electromagneticForce(), gravitationalAttraction() |
| Statistical Properties | Vector Statistics | μ, σ, skewness, kurtosis |
getVectorStatistics() |
📂 Project Structure:
├── 🎨 Frontend: 650+ lines (HTML + CSS)
├── ⚙️ Core Logic: 1400+ lines (JavaScript)
├── 🧩 Modules: 11 specialized components
├── 📐 Mathematical Models: 5 force calculation algorithms
└── 🎮 Interactive Features: 15+ user interactions
🚀 Current Features: 12 implemented
🔮 Planned Features: 8 upcoming
⭐ Educational Tools: 5 integrated
- Quantum-inspired Rendering: Vectors appear as glowing atomic structures with electron-like components
- Real-time Animation: Pulsing frequencies that represent vector "energy states"
- Interactive Selection: Click to explore individual vector properties and relationships
- Dynamic Sizing: Vector radius reflects magnitude (nuclear mass analogy)
Advanced mathematical engine implementing multiple force models:
// Resonance Force: Measures harmonic alignment between vectors
R(u,v) = (u·v)² / (‖u-v‖² + ε)
// Cosine Similarity: Measures directional alignment
cos(θ) = (u·v) / (‖u‖‖v‖)
// Euclidean Distance: Spatial separation in n-space
d(u,v) = √(Σᵢ(uᵢ-vᵢ)²)- Real-time Vector Editor: Modify components and see immediate effects
- File Upload Support: Import custom vector datasets (CSV, JSON)
- Dynamic Dimensionality: Adjust from 2D to 20D space exploration
- Component Sliders: Intuitive value adjustment with immediate visual feedback
- Similarity Rankings: Automatic sorting by resonance force strength
- Statistical Properties: Magnitude, entropy, and distribution analysis
- Force Visualization: Toggle electromagnetic-style force lines
- Cluster Identification: Visual grouping of related vectors
// Vector arithmetic operations
add(v1, v2) // ✅ Implemented
subtract(v1, v2) // ✅ Implemented
scale(v, scalar) // ✅ Implemented
normalize(v) // ✅ Implemented- K-means Clustering: Automatic vector grouping
- PCA Visualization: Dimensionality reduction display
- t-SNE Projection: Non-linear embedding for complex datasets
- Anomaly Detection: Identify outlier vectors
- Interactive Tutorials: Step-by-step guided tours
- Formula Explanations: Hover tooltips with mathematical context
- Exercise Mode: Practice problems with instant feedback
- Progress Tracking: Learning milestone system
- Export System: Save configurations as JSON/CSV
- Undo/Redo: Full action history management
- Keyboard Shortcuts: Power-user efficiency features
- Custom Themes: Visual customization options
VectoVerse operates in the mathematical framework of Euclidean n-space (ℝⁿ), where each vector v ∈ ℝⁿ is represented as:
v = (v₁, v₂, ..., vₙ)
F_em(u,v) = k · (u·v) / ‖u-v‖²
Where k is the interaction constant, mimicking Coulomb's law.
F_res(u,v) = A · sin(2π · f(u,v) · t)
f(u,v) = |u·v| / (‖u‖ + ‖v‖)
Frequency-based interaction modeling quantum harmonic oscillators.
F_grav(u,v) = G · (‖u‖ · ‖v‖) / ‖u-v‖²
Mass-proportional attraction based on vector magnitudes.
Each vector component can be interpreted as an "information quantum" with:
- Positive Components (Red): Excitatory information units
- Negative Components (Blue): Inhibitory information units
- Near-Zero Components (Gray): Neutral/background information
The Information Entropy of a vector is calculated as:
H(v) = -Σᵢ p(vᵢ) · log₂(p(vᵢ))
Where p(vᵢ) = |vᵢ|/‖v‖₁ represents the probability distribution of component magnitudes.
- Modern web browser with ES6+ support
- Local web server (recommended for file operations)
git clone https://github.com/yourusername/VectoVerse.git
cd VectoVerse
python -m http.server 8000 # or your preferred local serverOpen http://localhost:8000 in your browser.
- Generate Vectors: Use the "Generate New Vectors" button to create random n-dimensional vectors
- Explore Relationships: Click on any vector to see its similarity relationships with others
- Add Input Vector: Create a test vector and edit its components in real-time
- Toggle Forces: Visualize the resonance forces between vectors
- Upload Data: Import your own vector datasets via the file upload feature
Space - Generate new vectors
F - Toggle force visualization
I - Add input vector
R - Randomize input vector
Esc - Close modals
←/→ - Adjust dimensions
↑/↓ - Adjust vector count
- 🔴 Positive Components: High-energy, excitatory information (red spectrum)
- 🔵 Negative Components: Low-energy, inhibitory information (blue spectrum)
- ⚪ Neutral Components: Balanced, neutral information (gray spectrum)
- 🟡 Input Vectors: User-controlled test subjects (golden)
- 🟢 Uploaded Vectors: External dataset neurons (green spectrum)
- Pulse Frequency: Proportional to vector magnitude (higher energy = faster pulse)
- Float Motion: Input vectors exhibit Brownian-like motion to simulate thermal agitation
- Force Visualization: Dynamic opacity and thickness represent interaction strength
- Selection Highlight: Enhanced glow and stroke for focused vectors
When visualizing high-dimensional vectors in 2D space, VectoVerse employs Principal Component Analysis concepts to maintain relative relationships:
Projection Quality = λ₁ + λ₂ / Σᵢ λᵢ
Where λᵢ are the eigenvalues of the covariance matrix.
The framework will automatically identify vector clusters using:
- K-means clustering for spatial grouping
- Hierarchical clustering for similarity trees
- DBSCAN for density-based pattern recognition
VectoVerse interprets vector spaces through the lens of information geometry, where:
- Distance = Information divergence
- Curvature = Statistical manifold properties
- Geodesics = Optimal information pathways
VectoVerse/
├── 🎯 VectorAtomicFramework.js # Core framework and event coordinator
├── 🧠 StateManager.js # State management for vectors and UI
├── ⚙️ ConfigManager.js # Handles application configuration
├── ⌨️ KeyboardShortcuts.js # Handles keyboard shortcuts
├── 🚌 EventBus.js # Handles communication between modules
├── 🎨 VectorRenderer.js # Visualization and rendering engine
├── ⚡ ForceCalculator.js # Mathematical force computation
├── 🎬 AnimationEngine.js # Real-time animation system
├── 🎛️ UIController.js # User interface and interaction
├── 📁 FileHandler.js # Data import/export functionality
└── 📊 Constants.js # Configuration and styling constants
- Observer Pattern: For state management and reactive updates (via EventBus)
- Strategy Pattern: For interchangeable force calculation algorithms
- Module Pattern: For clean separation of concerns
- Singleton Pattern: For the core Framework, StateManager, EventBus, and ConfigManager
- Factory Pattern: For dynamic vector generation
- Linear Algebra: Visualize dot products, cross products, and orthogonality
- Calculus: Understand gradient vectors and directional derivatives
- Statistics: Explore correlation, covariance, and multivariate analysis
- Machine Learning: Visualize feature vectors, similarity metrics, and clustering
- Data Science: Understand high-dimensional data relationships
- Computer Graphics: Learn vector transformations and projections
- Quantum Mechanics: Analogies to state vectors and Hilbert spaces
- Electromagnetism: Force field visualizations and potential energy
- Statistical Mechanics: Ensemble properties and phase space exploration
- Performance: Slows with >50 vectors due to O(n²) force calculations
- Mobile Support: Touch interactions not fully optimized
- File Size: Large datasets (>1000 vectors) may cause memory issues
- Browser Compatibility: Requires modern ES6+ support
- WebGL Rendering: Hardware acceleration for large datasets
- Progressive Loading: Chunked data processing for large files
- Touch Gestures: Mobile-first interaction redesign
- Fallback Support: ES5 compatibility layer
We welcome contributions that enhance the atomic-inspired visualization paradigm! Areas of particular interest:
- Performance Optimization: WebGL rendering, spatial indexing
- Mobile Experience: Touch gestures, responsive design
- Educational Content: Interactive tutorials, guided tours
- Export Features: Save/load configurations, data export
- New Force Models: Additional physics-inspired interactions
- Clustering Algorithms: K-means, hierarchical, DBSCAN implementation
- Accessibility: Screen reader support, keyboard navigation
- Testing Suite: Unit tests, integration tests, performance benchmarks
- Theme System: Custom color schemes, dark/light modes
- Plugin Architecture: Third-party extension support
- Advanced Analytics: Statistical analysis tools
- Documentation: API documentation, developer guides
To run the test suite, simply open the SpecRunner.html file in your web browser. The tests will run automatically and display the results.
- ✅ Core visualization engine
- ✅ Interactive vector editing
- ✅ Force calculations
- ✅ File upload support
- 🔄 Export functionality
- 🔄 Keyboard shortcuts
- 🔄 Performance optimizations
- 🔄 Mobile improvements
- 🔮 Vector operations suite
- 🔮 Clustering visualization
- 🔮 Educational tutorials
- 🔮 Advanced analytics
This project is licensed under the GNU Affero General Public License v3.0 - see the LICENSE file for details.
- D3.js Community: For the powerful visualization library
- Mathematical Physics Community: For inspiration from atomic models
- Open Source Contributors: For feedback and improvements
- Educational Institutions: For use cases and requirements
VectoVerse represents a fusion of mathematical rigor and intuitive understanding, transforming the abstract realm of n-dimensional vectors into a tangible, interactive universe where mathematics meets physics, and complexity emerges from simplicity.
Created with ❤️ for the mathematical community
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Documentation: Wiki
- Examples: Gallery
A vector is simply a list of numbers that represents a point or direction in multi-dimensional space. Think of it like coordinates:
- 2D: (x, y) - like a point on a map
- 3D: (x, y, z) - like a point in a room
- nD: (x₁, x₂, ..., xₙ) - like a point in abstract mathematical space
Just as atoms have:
- Protons (positive charge) → Positive vector components
- Electrons (negative charge) → Negative vector components
- Neutrons (neutral) → Near-zero components
- Nuclear forces → Mathematical similarities between vectors
Formula: ||v|| = √(v₁² + v₂² + ... + vₙ²)
Example: For vector (3, 4), magnitude = √(3² + 4²) = √25 = 5
Physical Meaning: The "strength" or "energy" of the vector. Like measuring how powerful a force is.
Formula: u·v = u₁v₁ + u₂v₂ + ... + uₙvₙ
Example: (1,2)·(3,4) = 1×3 + 2×4 = 11
Physical Meaning: Measures how much two vectors point in the same direction. Positive = same direction, negative = opposite.
Formula: cos(θ) = (u·v)/(||u|| × ||v||)
Range: -1 to +1
Physical Meaning: The angle between vectors. 1 = identical direction, 0 = perpendicular, -1 = opposite.
Formula: d(u,v) = √((u₁-v₁)² + (u₂-v₂)² + ... + (uₙ-vₙ)²)
Physical Meaning: Straight-line distance between two points in n-dimensional space.
Formula: H(v) = -Σ p(vᵢ) × log₂(p(vᵢ))
Where: p(vᵢ) = |vᵢ|/||v||₁
Physical Meaning: How "random" or "uniform" the vector components are. Higher = more diverse information.
Formula: R(u,v) = (u·v)² / (||u-v||² + ε)
Physical Meaning: Combines how aligned vectors are (numerator) with how close they are (denominator). Like harmonic resonance between tuning forks.
Formula: F_em = k × (u·v) / ||u-v||²
- Positive dot product → Attraction (like opposite charges)
- Negative dot product → Repulsion (like same charges)
- Distance squared → Force weakens with distance (like Coulomb's law)
Formula: F_grav = G × (||u|| × ||v||) / ||u-v||²
- Always attractive (gravity never repels)
- Magnitude product → Larger vectors attract more strongly
- Distance squared → Follows Newton's law of gravitation
The typical value of vector components. Shows if the vector is generally positive, negative, or balanced.
How much components vary from the average. High = diverse values, low = similar values.
- Positive skew: More large positive values than negative
- Negative skew: More large negative values than positive
- Zero skew: Symmetric distribution
- Positive kurtosis: More extreme values (heavy tails)
- Negative kurtosis: Fewer extreme values (light tails)
- Feature vectors: Each dimension represents a measurable property
- Similarity search: Find similar items using cosine similarity
- Clustering: Group similar vectors using distance measures
- Customer profiles: Each dimension is a behavioral metric
- Document analysis: Each dimension represents word frequency
- Recommendation systems: Similar vectors suggest similar preferences
- Force analysis: Vectors represent forces in different directions
- Signal processing: Vectors represent frequency components
- Computer graphics: Vectors represent positions and orientations
-
What does it mean when two vectors have a cosine similarity of 0.9?
- They point in very similar directions (only 25.8° apart)
-
Why might a vector have high entropy?
- Its components are diverse/uniform, containing lots of different information
-
When would electromagnetic force be negative?
- When vectors have negative dot product (pointing in opposite directions)
-
What makes two vectors "quantum entangled" in our analogy?
- High correlation - their components tend to vary together
- Start Simple: Begin with 2-3 dimensions to visualize concepts
- Compare Metrics: See how different similarity measures relate
- Upload Real Data: Try with your own datasets to see patterns
- Adjust Parameters: Change vector count and dimensions to observe effects
- Focus on Patterns: Look for clusters and relationships in the visualization