Graphing Calculator
Type an equation and watch the curve appear, then drag the axes around.
AdvancedWeb appEducation14–30hAI-buildable 3/5no setup
Parse a mathematical expression and plot it, with pan and zoom that resample as you move. The expression parser — tokenise, respect precedence, build a tree, evaluate per x — is a genuinely good compiler-adjacent exercise wrapped in something visual.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Enter an expression in terms of x and see it plotted
- Pan and zoom the graph, resampling as the range changes
- Plot several expressions at once in distinct colours
- Operator precedence and parentheses are handled correctly
- Common functions like sin, log and sqrt are supported
- Invalid expressions report a specific parse error
- Asymptotes and discontinuities don't draw as vertical lines
The interesting part
- Writing a recursive descent parser with correct precedence
- Detecting discontinuities rather than joining across them
- Adaptive sampling so steep regions stay smooth without oversampling flat ones
Once it works
- Add sliders for parameters in the expression
- Add a trace cursor that reads out coordinates
- Add derivative and integral overlays
Suggested stack
reacttypescripttailwindcanvas-api