Function Graph Plotter

How this plotter turns an expression into a curve

When you type something like x^2 - 2*x + 1, the plotter does not hand your text to JavaScript's eval() — doing so would be a security hole and would also accept things that aren't math. Instead it runs a hand-written recursive descent parser. The expression is read left to right and broken into a hierarchy that respects operator precedence: addition and subtraction sit at the top, multiplication and division below them, exponentiation below that, then unary minus, and finally the atoms — numbers, the variable x, constants, and function calls. Because the grammar only recognizes the operators and named functions it was taught, an expression that tries to call anything else simply fails to parse rather than executing. Everything is computed in your browser; no expression is ever sent to a server.

To draw the line, the tool steps x across the visible range one canvas pixel at a time, evaluates your function at each step, converts the result to a screen coordinate, and connects the points. Where a value is infinite or undefined (a vertical asymptote, a gap in the domain), it lifts the pen and starts a fresh segment instead of drawing a misleading vertical streak across the screen.

What the functions and operators mean

You can use + - * /, exponentiation with either ^ or **, parentheses for grouping, and unary minus. The recognized functions are sin, cos, tan, asin, acos, atan, sinh, cosh, tanh, sqrt, cbrt, abs, log (base 10), ln (natural log), exp, floor, ceil, round, and sign. The constants pi and e are built in. Note the split between the two logarithms: log(100) returns 2, while ln(e) returns 1. Trigonometric functions work in radians, so sin(pi/2) is 1, not sin(90).

A worked example

Enter x^2/4 - 2. At x = 0 the value is -2, so the curve crosses the y-axis at (0, -2). Setting the expression to zero, x^2/4 = 2 gives x = ±2.83 — and those are exactly the x-intercepts the annotation layer will mark. The plotter finds those roots numerically: it scans for two adjacent sample points whose y-values have opposite signs (one above the axis, one below), then runs bisection — repeatedly halving the interval — about 30 times to pin the crossing to high precision. It also flags the vertex near x = 0 by watching for the point where a numerical estimate of the slope changes sign, which marks a local minimum or maximum.

Plotting several functions and reading the view

Each function you add gets its own color and a chip with a visibility toggle and a remove button, so you can overlay, say, sin(x) and its derivative cos(x) to see how peaks of one line up with zeros of the other. The y-range auto-scales to fit whatever is visible, with a little padding, unless you type explicit Y-min and Y-max values. Drag the canvas to pan and scroll (or pinch) to zoom; the zoom is centered on the cursor, and the X/Y range boxes update live so you always know the exact window you are looking at.

Common mistakes

• Implicit multiplication is not supported. Write 2*x, not 2x, and 3*sin(x), not 3sin(x) — the parser expects an explicit *.
• Degrees vs. radians. If a sine wave looks far too tight or too flat, remember the angle is in radians. To plot in degrees, convert: sin(x*pi/180).
• Asymptotes look like vertical lines. For 1/x or tan(x), a near-vertical jump is the function shooting to infinity, not a real line — the plotter breaks the curve there so it reads correctly.
• An invalid expression won't plot. If the input box flashes red, the parser rejected your text. Check for unmatched parentheses or an unknown name before re-adding.

Who this is for

It suits students checking the shape of a function before a test, teachers projecting a quick illustration of where a parabola meets the axis, and anyone who needs to sanity-check a formula without opening heavyweight graphing software. Because the whole thing runs locally, it loads instantly, works offline once the page is open, and keeps whatever equations you are exploring entirely on your own machine.