Graphing Calculator Guide: Plot Functions, Sliders & SVG Export

How Function Plotting Works

A graphing calculator doesn't evaluate a function symbolically — it samples it numerically. For every horizontal pixel on the canvas, the calculator converts that pixel's x-coordinate to a graph value using the current zoom and pan, evaluates f(x) using the mathjs expression compiler, converts the result to a screen y-coordinate, and connects adjacent valid points with line segments.

This pixel-by-pixel sampling has important implications:

Vertical asymptotes appear as near-vertical lines or sharp breaks rather than clean gaps. When adjacent y-values differ by more than the canvas height, the renderer lifts the pen — but steep slopes near an asymptote can still render as a near-vertical stroke. tan(x) near ±π/2 is the most common example.

Discontinuous functions like floor(x) (staircase) or sign(x) (returns ±1) show a rendered jump at each discontinuity — which is mathematically correct, not a rendering bug.

Sampling resolution is one point per CSS pixel. At high zoom levels the curve becomes a series of visible line segments between sample points. This is the resolution limit of pixel-based sampling, not an expression error.

Expression Syntax Reference

The calculator uses mathjs to evaluate expressions. x is the horizontal axis variable. a and b are controlled by the sliders panel.

Arithmetic and powers

Trigonometric functions

Switch to DEG mode in Graph Settings for degree inputs. sin(90) = 1 in DEG, but sin(90) ≈ 0.894 in RAD.

Exponential and logarithmic

Rounding and special functions

Common composite patterns with slider variables

a * sin(b * x)              # amplitude a, frequency b
x^2 + a*x + b               # quadratic — explore roots via discriminant
exp(-a * x^2)               # Gaussian bell curve — a controls width
1 / (1 + exp(-a * x))       # sigmoid / logistic curve
a * x / (1 + abs(x))        # bounded linear with asymptotes at ±a

Multiplication must be explicit. Write 2*x, not 2x. Write a*(x+1), not a(x+1). mathjs requires the * operator — implicit multiplication is not supported.

Variable Sliders: Seeing Parameters Live

The Variables panel exposes live sliders for a and b (range −10 to +10, step 0.1). As you drag, every function referencing that variable re-evaluates and the canvas redraws in real time.

Exploring the quadratic discriminant

x^2 + a*x + b

The discriminant is a² − 4b. Drag b from a large positive value downward. The parabola drops until it touches the x-axis at exactly b = a²/4 (one repeated root), then crosses it (two real roots). The roots emerging from a tangent point is the quadratic formula made visual.

Gaussian width — probability and signal processing

exp(-a * x^2)

Large a = narrow, tall peak. Small a = wide, flat curve. This bell shape appears in normal distributions, Gaussian image filters, optical beam profiles, and quantum wave packets. Dragging a from 0.1 to 5 shows the concentration effect intuitively.

Logistic / sigmoid curve

1 / (1 + exp(-a * x))

a controls steepness. At a = 1 you get the standard sigmoid used in logistic regression. At a = 10 the curve approximates a step function — a threshold decision boundary. This is the activation function of the output layer in binary classification neural networks.

Multi-Function Overlay

Click + in the Functions panel to add additional functions. Each renders in a distinct color on the same coordinate system.

Function and its numerical derivative

sin(x)
(sin(x + 0.001) - sin(x)) / 0.001    # ≈ cos(x)

The peaks of the derivative align with the zero crossings of the original — the slope of sin(x) is zero at its maxima and minima, which is where cos(x) is also zero. This is the fundamental theorem of calculus made visible without any symbolic computation.

Taylor series convergence

sin(x)
x - x^3/6 + x^5/120                  # 5th-order expansion
x - x^3/6 + x^5/120 - x^7/5040       # 7th-order expansion

Near x = 0 all three curves overlap — the approximations are accurate at the expansion point. Zoom out to x = ±8 to watch the polynomial approximations diverge while sin(x) stays bounded. This is radius of convergence made tangible.

Linear vs. Logarithmic Scale

Switch axis scale in Graph Settings → Scale Mode.

Linear scale (default) places values at equal distances. Use it for polynomials, trig functions, and any function where x and y span a small uniform range.

Log scale compresses large value ranges — equal multiplicative ratios map to equal screen distances. A decade (×10 change) occupies the same width whether it's 1→10 or 1,000→10,000.

Important: Log scale is undefined for values ≤ 0. The renderer silently skips those regions — the curve simply doesn't appear where the axis would be undefined.

Key Points: Roots and Intercepts

The calculator automatically finds and marks:

• Y-intercept: the value of f(0), shown as a labeled circle on the y-axis.
• Roots (x-intercepts): where f(x) = 0, found by sampling 100 x-values across the visible viewport, detecting sign changes, and refining each crossing with 8 iterations of bisection (approximately 0.1% accuracy).

Key points update as you pan and zoom — only roots in the current viewport are shown. Plotting x^2 - 2 will mark roots at approximately ±1.414, confirming √2 without solving analytically.

Limitation: bisection only finds roots where the function changes sign. Tangent roots where the curve touches zero without crossing — like (x-1)^2 at x=1 — have no sign change and won't be detected.

SVG Export for Publications and LaTeX

Click Download to export the current canvas view as a scalable vector graphic. SVG preserves mathematical curve quality at any print size — from a journal figure at 3×3 cm to a poster at A1.

Before exporting:

1. Frame the viewport to exactly the region you want — the export captures the current view.
2. Set meaningful axis labels in Graph Settings (e.g., t for time, v for velocity).
3. Enable minor gridlines if readers need to estimate precise coordinate values.
4. Use Reverse Contrast if the figure will be printed on white paper — dark backgrounds consume a lot of ink.

Where SVG is used:

• LaTeX: import with the svg package or convert to PDF via inkscape --export-pdf
• Google Slides / PowerPoint / Keynote: insert as image — scales without pixelation
• Academic journals: most accept SVG or PDF vector figures; convert with Inkscape or a browser print-to-PDF

Accessibility Settings

Reverse Contrast: inverts the color scheme — useful when a projector washes out the default rendering or when printing on white paper to minimize ink usage.

Minor Gridlines: adds subdivision lines between major grid intervals, helpful for reading precise coordinate values from a published figure.

Lock Viewport: prevents accidental pan or zoom while dragging parameter sliders — useful when you want the view held steady during a live demonstration.

Axis Labels: rename x and y to meaningful variable names in Graph Settings. Labels appear on the canvas and are embedded in the SVG export.

Privacy: Fully Local Computation

Every expression is evaluated inside your browser using the mathjs library. No expression, graph data, or variable value is ever transmitted to a server. The tool has no backend — it is a fully static client-side application.

This matters when graphing proprietary engineering transfer functions, pre-publication research data, financial projections, or any expression that shouldn't be logged or cached by a third-party service.

Compare this to Desmos, GeoGebra, or Wolfram Alpha — all of which send your input to their servers for evaluation. Here, disconnecting from the internet after page load has zero effect on functionality.

Comparison with Other Graphing Tools

The primary differentiators are complete expression privacy, SVG export without a paid plan, and the accessibility settings (reverse contrast, braille input mode) that most browser-based alternatives omit.