A collection of interactive web-based math visualization tools organized by subject.
maths/
├── index.html # Main hub page
├── algebra/
│ ├── index.html # Algebra hub
│ └── quadratics/ # Quadratics topic (8 tools)
├── geometry/ # Coming soon
└── calculus/ # Coming soon
Algebra — Equations, expressions, and algebraic structures
Interactive graphing of quadratic equations (y = ax² + bx + c) with real-time visualization, animation, and analysis.
- Adjust coefficients via sliders or text input (supports fractions)
- Real-time parabola rendering on HTML5 Canvas
- Vertex, discriminant, and root calculations
- Auto-zoom, hover crosshair, and axis of symmetry
- Export to PNG, SVG, or copy equation to clipboard
- Quick presets for common equations
Stack: Vanilla JavaScript, HTML5 Canvas, CSS3
Solve and graph quadratic inequalities (ax² + bx + c ⋚ 0) with a guided visual walkthrough.
- Enter coefficients and choose inequality type, or pick from five presets
- 7-step walkthrough: discriminant, roots, parabola, sign analysis, solution
- SVG parabola graph with progressive reveal and region sign labels
- Number line with interval signs and highlighted solution segments
- Solution in interval notation, set-builder notation, and plain English
- Magnify graph in a popup window, export as SVG or PNG
Stack: React 18, Babel standalone, SVG
Graph two-variable quadratic inequalities (y ⋚ ax² + bx + c) and visualize the solution region.
- Enter coefficients and choose inequality type (y <, y ≤, y >, y ≥)
- Interactive graph with shaded solution region (above or below parabola)
- Boundary line: dashed for strict inequalities, solid for non-strict
- Vertex and x-intercept markers with coordinates
- Pick from five example presets
- Export graph as SVG or PNG, magnify in popup window
- URL parameters for sharing specific examples
Stack: React 18, Babel standalone, SVG
Interactive exploration of how vertex form parameters transform the parent parabola y = x².
- Adjust a, h, k parameters with smooth sliders
- Real-time visualization: parent function (dashed gray) vs. transformed (solid orange)
- Shows both vertex form
y = a(x − h)² + kand standard form - Detailed transformation effects (stretch, compression, reflection, shifts)
- Six preset transformations for common examples
- Reset button to return to parent function
- Export as SVG or PNG, magnify in popup window
- URL parameters for sharing transformations
Stack: React 18, Babel standalone, SVG
Explore how the discriminant (b² − 4ac) determines root count and type for quadratic equations.
- Interactive sliders for coefficients a, b, c
- Large discriminant display with real-time calculation
- Visual interpretation: number of x-intercepts on graph
- Detailed explanations for three cases (> 0, = 0, < 0)
- Root values displayed when they exist
- Five presets demonstrating different discriminant scenarios
- Vertex marker and auto-scaled graph
- Export as SVG or PNG, magnify in popup window
- URL parameters for sharing examples
Stack: React 18, Babel standalone, SVG
Analyze key characteristics of quadratic functions with progressive hints and visual feedback.
- Enter coefficients or pick from five presets
- Seven properties: direction, axis of symmetry, vertex, min/max, domain, range, y-intercept
- Progressive reveal: show hints or reveal answers for each property
- Detailed hints explaining the calculation for each characteristic
- Visual parabola graph with marked features (vertex, y-intercept, axis)
- Progress tracker and "Reveal All" option
- Exact fraction display throughout
Stack: React 18, Babel standalone, SVG
Convert quadratics to vertex form through a geometric area model and algebraic walkthrough.
- Enter coefficients or pick from five presets
- 7-step walkthrough: factor, split, rearrange, complete, simplify, verify
- Geometric area model showing the "completing" process
- Exact fraction display with horizontal-bar notation (HTML and SVG)
- Mini parabola graph with vertex at the final step
- Copy vertex form, export diagram as SVG or PNG
Stack: React 18, Babel standalone, SVG
Step-by-step visualization of binomial multiplication using the FOIL method and an area model diagram.
- Enter any two linear binomials or pick from five presets
- 6-step educational walkthrough with plain-language explanations
- Color-coded quadrants matching FOIL order (First/Outer/Inner/Last)
- Diagram labels showing factor terms and numeric products
- Combine like terms into the final polynomial
- Copy equation to clipboard, export diagram as SVG or PNG
Stack: React 18, Babel standalone, SVG
Convert between standard form, vertex form, and factored form with comprehensive step-by-step algebraic work.
- Three input modes: standard (ax² + bx + c), vertex (a(x−h)² + k), factored (a(x−r₁)(x−r₂))
- Six conversion pathways with detailed step-by-step explanations
- Visual parabola graph showing equivalence between forms
- Auto-detects when no real roots exist (discriminant < 0)
- Five presets demonstrating different forms and conversions
- Copy result equation, export graph as SVG or PNG
- URL parameters for sharing specific conversions
Stack: React 18, Babel standalone, SVG
Each app includes:
- Breadcrumb navigation at the top showing: Home → Subject → Topic → App
- Hamburger menu (fixed top-left) with full site navigation tree
- Related tools footer linking to sibling apps in the same topic
Each project is a self-contained web app. Serve the repo with any local HTTP server:
npx serve .
# or
python3 -m http.serverThen open http://localhost:3000/ in your browser and navigate via the hub pages.
These projects are free to use for educational purposes.