b2KIT

Derivative Visualizer

See the derivative as a tangent line slope. Animate the tangent point and plot f(x) alongside f\

Tested tool guide Tested browser tools Checked August 16, 2026

What Derivative Visualizer does, with a checked example

Derivative Visualizer plots an entered function together with its derivative, then draws a tangent line at a movable point on the original curve. Animating that point shows how the tangent's slope changes and how each slope becomes a value on the derivative graph. The key distinction is that the vertical coordinate on f'(x) represents slope, not the height of f(x). A high function value can therefore have a zero, negative, or positive derivative.

Worked example

A concrete input and expected output from the current implementation.

Input

Function: x^2; tangent point: x = 2

Expected output

The function point is (2, 4), the derivative graph is f'(x) = 2x, its value at x = 2 is 4, and the tangent line is y = 4x - 4.

Differentiating x^2 gives 2x, so the slope at x = 2 is 4. A line with slope 4 through (2, 4) satisfies y - 4 = 4(x - 2), which simplifies to y = 4x - 4.

How the result is produced

1

Reading the two curves

After a function is entered, the display plots y = f(x) and y = f'(x) over the viewing interval. At any horizontal position x = a, the height of the derivative curve represents the slope of the original curve there. Positive derivative values correspond to rising portions of f, negative values to falling portions, and zeros to horizontal tangents when the derivative exists.

2

Moving the tangent point

The movable point has coordinates (a, f(a)). Its tangent uses slope f'(a), so its line is y = f(a) + f'(a)(x - a). During animation, a changes and the point, line, and corresponding derivative value change together. This connects local steepness on f(x) with a point on the separate derivative curve.

Good uses

  • Check a hand-computed derivative by comparing its expected shape and values with the displayed derivative curve.
  • Demonstrate why local maxima and minima commonly coincide with horizontal tangents and zeros of f'(x).
  • Follow an animated tangent to see where a function changes from increasing to decreasing or changes steepness.

Limits and checks

  • The graph is visual evidence, not a proof. A narrow viewing window or coarse visual scale can conceal roots, rapid changes, or nearby turning points.
  • At corners, cusps, discontinuities, and vertical tangents, an ordinary finite derivative may not exist. Do not interpret every drawn or connected feature as a valid slope.
  • A tangent describes first-order behavior near its selected point. It need not remain close to the function farther away, and it may cross the curve elsewhere.

Common questions

Does a tangent line touch the function at only one point?

No. The tangent is determined by sharing the function's point and derivative at the selected x-value. It can cross the curve at that point or meet it again elsewhere. Tangency describes local agreement in value and slope, not a requirement that the line stay on one side of the curve or have only one intersection.

Can the visualizer give a derivative at a corner?

No finite derivative exists at a corner when the left-hand and right-hand slopes are different. The picture can help reveal that mismatch, but a line drawn near the corner does not create a derivative there. Similar care is needed at discontinuities, cusps, and vertical tangents, where the usual finite-slope interpretation fails.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools