mathgraph All Features

1 Sliders are created automatically

An undefined variable a becomes a slider.

시도해 보기 — Move a or press ▶.

<div class="mathgraph" data-height="300"
     data-exprs='["a*x^2"]'></div>

2 Multiple expressions · Slider range · Visible range

Use data-sliders to set the slider range, step, and initial value, and data-view to set the visible range.

시도해 보기 — Lower k to 0 and it becomes a line.

<div class="mathgraph" data-height="300"
     data-view='-6.3,6.3,-2,2'
     data-sliders='{"k":{"min":0,"max":5,"step":0.1,"value":1}}'
     data-exprs='["y=sin(k*x)","y=cos(k*x)"]'></div>

3 Implicit Curves · Inequalities · Polar · Parametric

Plots x²+y²=1, y>x², r=sin(5θ), and (sin 2t, cos 3t) on one graph.

시도해 보기 — Drag with the mouse to pan, Ctrl/⌘+wheel to zoom, double-click to reset.

<div class="mathgraph" data-height="538"
     data-view='-4,4,-2.4,2.4'
     data-controls='none'
     data-exprs='["x^2+y^2=1","y>x^2","r=sin(5theta)","(sin(2t),cos(3t)){0<=t<=2pi}"]'></div>

4 Piecewise Function · Domain · Absolute Value

y={x<0:-x,x} is a piecewise function defined by conditions, and y=x^2{-2<x<2} restricts the domain.

<div class="mathgraph" data-height="320"
     data-view='-5,5,-5,5'
     data-controls='none'
     data-aspect='free'
     data-exprs='["y={x<0:-x,x}+2","y=x^2{-2<x<2}","y=abs(x)"]'></div>

5 Step function: closed points (●) and open points (○)

Points are drawn automatically where a piecewise function breaks. At such a point, the side that has a function value is a closed point (●), and the side with no value (the limit from the other side of the break) is an open point (○). x<1 does not include 1, so the end of the left piece at 1 is an open point; with x<=1 it becomes a closed point. floor(x) has the form [n, n+1), so the left end is a closed point; ceil(x) is the opposite.

시도해 보기 — Compare where the point is drawn when the inequality signs of the two expressions are < and <=.

<div class="mathgraph" data-height="340"
     data-view='-5,5,-6,4'
     data-controls='none'
     data-aspect='free'
     data-exprs='["y={x<1:0,x<2:1,2}","y=floor(x)-4","y={x<=-2:3,x<=-1:2,1}+0*x"]'></div>

6 Function Definition and Composition

Define f(x)=…, g(x)=… and write f(g(x)).

시도해 보기 — Definition rows also show a color bar.

<div class="mathgraph" data-height="320"
     data-view='-4,4,-3,3'
     data-controls='none'
     data-aspect='free'
     data-exprs='["f(x)=x^2-2","g(x)=sin(x)","y=f(g(x))","y=g(f(x))"]'></div>

7 Write in LaTeX

\frac, \sqrt, \operatorname and similar LaTeX notation is also accepted. You can also write one per line in the body.

<div class="mathgraph" data-height="300"
     data-view='-5,5,-3,3'
     data-controls='none'
     data-aspect='free'
     data-exprs='["y=\\frac{1}{x}","y=\\sqrt{x}","y=\\operatorname{floor}\\left(x\\right)"]'></div>

8 Degrees

Use degrees like 30°. To put degrees on the horizontal axis, set the width-to-height ratio separately (data-aspect="free").

<div class="mathgraph" data-height="280"
     data-view='-360,360,-1.5,1.5'
     data-aspect='free'
     data-controls='none'
     data-exprs='["y=sin(x°)","y=cos(x°)"]'></div>

9 Fourier Approximation — Fourier(expression, number of terms)

Automatically computes the Fourier coefficients a₀, aₖ, bₖ of f on [−π, π] and plots the sum up to n terms, S(x)=a₀/2+Σ(aₖcos kx + bₖ sin kx), extended with period 2π. The coefficients appear in the value box. For the square wave sign(sin x), only the odd sine terms remain (b₁=4/π=1.2732, b₃=0.4244 …). As n increases it gets closer to the square wave, while the overshoot near the discontinuities (Gibbs phenomenon) remains. To change the interval, add L as in Fourier(expression, n, L).

시도해 보기 — Raise n from 0 to 30. See how the coefficients appear in the value box.

<div class="mathgraph" data-height="340"
     data-aspect='free'
     data-controls='full'
     data-view='-7,7,-2,2'
     data-sliders='{"n":{"min":0,"max":30,"step":1,"value":3}}'
     data-exprs='["y=sign(sin(x))","n=3","Fourier(sign(sin(x)),n)"]'></div>

10 Fourier Approximation — Sawtooth and Triangle Waves

For f(x)=x (sawtooth), b_k=2(−1)^(k+1)/k, so all sin terms remain (b₁=2, b₂=−1, b₃=0.6667 …). For f(x)=|x| (triangle wave), only a₀/2=π/2 and the odd cos terms (a₁=−4/π …) remain. A smooth triangle wave is nearly matched with just a few terms.

시도해 보기 — See how quickly the triangle wave matches even with n=2 to 6, and compare why the sawtooth wave is slower.

<div class="mathgraph" data-height="340"
     data-aspect='free'
     data-controls='full'
     data-view='-7,7,-4,4'
     data-sliders='{"n":{"min":0,"max":30,"step":1,"value":3}}'
     data-exprs='["y=x","y=abs(x)","n=3","Fourier(x,n)","Fourier(abs(x),n)"]'></div>

11 Taylor Approximation — Taylor(expression, center, degree)

Approximates a function f(x) with a polynomial P(x)=Σ f⁽ᵏ⁾(a)/k!·(x−a)ᵏ around the center a. The coefficients f⁽ᵏ⁾(a)/k! are computed exactly by expanding the expression as a power series about the center, and the polynomial appears in the value box. Raise the degree n slider and the approximation overlaps f more and more. The center a is the point A on the x-axis (shown as "center …" in the value box); drag A and the polynomial is rebuilt around that point. At the center P(a)=f(a) and the slopes match, so it hugs f there. To fix the center numerically, write a number instead of A, as in Taylor(sin(x),2,n). If you add a point X at the end (Taylor(expr,A,n,X)), the value box shows the values of f and P at X, the error |f−P|, and the Lagrange remainder bound (M·|X−a|ⁿ⁺¹/(n+1)!), and the gap between the two curves is marked with thin dotted lines. The error is always within the bound.

시도해 보기 — Drag point A (the center) and point X. The farther X is from the center, the larger the error; raising n reduces it. The length of the dashed segment is the size of the error.

<div class="mathgraph" data-height="420"
     data-controls='full'
     data-touch-drag='true'
     data-view='-7,7,-3,3'
     data-sliders='{"n":{"min":0,"max":15,"step":1,"value":3}}'
     data-exprs='["y=sin(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0)","X=Point(xa,2)","n=3","Taylor(sin(x),A,n,X)"]'></div>

12 Taylor approximation and radius of convergence: ln(1+x)

The Taylor series of ln(1+x) about 0, x − x²/2 + x³/3 − …, converges to f only for |x|<1. Raising the degree fits f within −1<x<1 but deviates more and more for x>1 (diverges). Dragging center A (a point on the x-axis) moves the interval of convergence with it: the radius of convergence is the distance from the center to the singularity x=−1. Dragging A to −1 or below causes an error because ln is undefined. In the same way, sin, cos, and eˣ converge for all x.

시도해 보기 — Drag A from 0 to 1 to 2 while raising n. Watch the interval of convergence widen along with the center.

<div class="mathgraph" data-height="380"
     data-aspect='free'
     data-controls='full'
     data-touch-drag='true'
     data-view='-1.2,3,-4,3'
     data-sliders='{"n":{"min":0,"max":20,"step":1,"value":3}}'
     data-exprs='["y=ln(1+x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0)","n=3","Taylor(ln(1+x),A,n)"]'></div>

13 Taylor Approximation — Several Degrees at Once

sin x is automatically approximated about center 0 by Taylor polynomials of degree 1, 3, 5, and 7, drawn on top of each other. As the degree increases, the interval that hugs f(x)=sin x gets wider. You do not have to write the expressions yourself: one line, Taylor(expression, center, degree), is enough. The value box shows each polynomial.

시도해 보기 — See where the curve departs from sin x at each degree.

<div class="mathgraph" data-height="380"
     data-controls='full'
     data-view='-7,7,-3.5,3.5'
     data-exprs='["y=sin(x)","Taylor(sin(x),0,1)","Taylor(sin(x),0,3)","Taylor(sin(x),0,5)","Taylor(sin(x),0,7)"]'></div>

14 Taylor Approximation — eˣ (Center and Error)

Automatically builds the Taylor polynomial of eˣ. Drag the center A and the point X where you want to see the error, and raise the degree n. You can see in |f−P| and the Lagrange bound in the value row that the error grows farther from the center and shrinks as n increases.

시도해 보기 — Drag X far from the center and increase n.

<div class="mathgraph" data-height="360"
     data-aspect='free'
     data-controls='full'
     data-touch-drag='true'
     data-view='-4,4,-1,9'
     data-sliders='{"n":{"min":0,"max":12,"step":1,"value":2}}'
     data-exprs='["y=e^x","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0)","X=Point(xa,2)","n=2","Taylor(exp(x),A,n,X)"]'></div>

15 Derivative and Integral

deriv(expr, variable) is the derivative and int(expr, variable, lower, upper) is the definite integral.

<div class="mathgraph" data-height="320"
     data-view='-3,3,-4,4'
     data-controls='none'
     data-aspect='free'
     data-exprs='["f(x)=x^3-3x","y=deriv(f(x),x)","y=int(f(t),t,0,x)"]'></div>

16 Lists and Statistics

L=[2,4,4,5,7,9]Create a list like that and use mean, median, stdev, and so on. Values appear below the expression row. Click an empty spot on the graph to add that value to the list (data-point-edit="L"), or click a point on the dot plot to select it (red ring) and press Delete to remove that value. The mean, median, and box plot update right away.

시도해 보기 — Click an empty spot on the graph to add a value, or click a point and press Delete to remove it.

<div class="mathgraph" data-height="320"
     data-controls='full'
     data-view='-1,17,-2.5,4'
     data-aspect='free'
     data-point-edit='L'
     data-exprs='["L=[2,4,4,5,7,9]","mean(L)","median(L)","stdev(L)","Q1(L)","Q3(L)","DotPlot(L)","BoxPlot(-1,0.8,L)"]'></div>

17 Table and Regression Line

Enter a table (columns x, y) and fit a least-squares line with y_1~m*x_1+b. This gives m, b, and R². Clicking an empty spot on the graph adds that coordinate as a new row in the table (data-point-edit="table"), and clicking a point to select it (red ring) and pressing Delete removes that row from the table.

시도해 보기 — Click the graph to add points, or click a point and press Delete to remove it. The line and R² update immediately.

<div class="mathgraph" data-height="340"
     data-controls='full'
     data-view='-1,6,-1,10'
     data-aspect='free'
     data-point-edit='table'
     data-exprs='[{"table":"1 2\n2 4.1\n3 5.9\n4 8.2"},"y_1~m*x_1+b"]'></div>

18 Editing expressions directly (formula display)

With data-controls="full" you can edit expressions and tables and add more with + Expression / + Table. When a box loses focus it is shown as a formula (KaTeX), and clicking it switches to text input. Sliders are below the expression, and the + buttons are at the bottom. The × at the right of each row deletes that row (if another row uses its name, click once more to confirm). To turn off formula display and use plain text, use data-math="off".

시도해 보기 — Click the f(x)=a*x^2 box and change it to a*x^3.

<div class="mathgraph" data-height="380"
     data-controls='full'
     data-view='-6,6,-3.6,3.6'
     data-exprs='["f(x)=a*x^2","y=f(x)-1",{"table":"1 2\n2 4.1\n3 5.9\n4 8.2"},"y_1~m*x_1+b"]'></div>

19 Triangle · Circumcircle · Angle · Perpendicular bisector

Points are defined with capital-letter names. Polygon, Circle(A,B,C), Midpoint, Angle, PerpendicularBisector.

시도해 보기 — Points can be dragged with the mouse (the expression line changes too).

<div class="mathgraph" data-height="364"
     data-view='-3,7,-1,5'
     data-controls='full'
     data-exprs='["A=(0,0)","B=(5,0)","C=(1.5,3.5)","t=Polygon(A,B,C)","c=Circle(A,B,C)","M=Midpoint(A,B)","Angle(B,A,C)","Guide(PerpendicularBisector(A,B))"]'></div>

20 Incircle · Excircle · Circumcircle

Incircle(A,B,C) is the circle tangent to all three sides, and Excircle(A,B,C,k) is the excircle tangent to one side and the extensions of the other two (k=1 is opposite A, 2 is opposite B, 3 is opposite C). Incenter and Excenter are their centers. Drag a vertex and the three circles follow. The inradius r, the circumradius R, and the distance d between the two centers satisfy Euler's formula d² = R² − 2Rr.

시도해 보기 — Drag vertices A, B, C to change the triangle. Check in the value box that d² and R²−2Rr are equal.

<div class="mathgraph" data-height="460"
     data-view='-14,14,-10,10'
     data-controls='full'
     data-touch-drag='true'
     data-exprs='["A=(-3,-1)","B=(4,-1)","C=(0,4)","t=Polygon(A,B,C)","o=Circle(A,B,C)","k=Incircle(A,B,C)","Excircle(A,B,C,1)","Excircle(A,B,C,2)","Excircle(A,B,C,3)","Rc=Radius(o)","rc=Radius(k)","dd=Distance(Center(o),Center(k))","dd^2","Rc^2-2*Rc*rc"]'></div>

21 Ellipse · Hyperbola · Parabola · Tangent Line

Ellipse(F1,F2,a) Hyperbola(F1,F2,a) Parabola(focus,directrix) Tangent(point,conic). The focus spacing k is a slider.

시도해 보기 — As k approaches 0, the ellipse becomes a circle.

<div class="mathgraph" data-height="597"
     data-view='-9,9,-6,6'
     data-sliders='{"k":{"value":3,"min":0,"max":4.9,"step":0.1}}'
     data-exprs='["F1=(-k,0)","F2=(k,0)","Ellipse(F1,F2,5)","Hyperbola(F1,F2,2.5)","Parabola((0,-3),y=-4)","P=Tangent((0,4),Ellipse(F1,F2,5))"]'></div>

22 Conic Through Five Points

Conic(five points) draws the conic through five points (it turns out to be one of an ellipse, hyperbola, or parabola).

시도해 보기 — Drag the five points and the type of curve changes.

<div class="mathgraph" data-height="348"
     data-view='-7,7,-4,4'
     data-controls='full'
     data-exprs='["A=(-4,0)","B=(4,0)","C=(0,2)","D=(0,-2)","E=(3,1.2)","Conic(A,B,C,D,E)"]'></div>

23 Intersections · Tangent lines

Intersect(a,b,n) is the nth intersection, and Tangent(point,circle,n) is the nth tangent.

<div class="mathgraph" data-height="576"
     data-view='-6,8,-4.5,4.5'
     data-controls='none'
     data-exprs='["c=Circle((0,0),3)","l=Line((-4,1),(4,2))","P=Intersect(c,l,1)","Q=Intersect(c,l,2)","T1=Tangent((5,0),c,1)","T2=Tangent((5,0),c,2)"]'></div>

24 Length · Area · Angle · Slope Values

Distance, Area, Angle, Slope, and Radius show their values below the expression row.

시도해 보기 — Drag a vertex and the values update in real time.

<div class="mathgraph" data-height="404"
     data-view='-2,7,-1.5,4.5'
     data-controls='full'
     data-exprs='["A=(0,0)","B=(4,0)","C=(1,3)","t=Polygon(A,B,C)","Area(t)","Distance(B,C)","Angle(B,A,C)","l=Line(A,C)","Slope(l)"]'></div>

25 Transformation ① Translation — Translate(shape, vector)

The vector is an arrow from vertex A to handle Q. Since handle Q is the endpoint of the vector, the image t2 moves in the same direction you drag Q, and Q is where A has moved to (A'). The dotted line is a guide drawn by the single line `Link(t,t2)`, showing the path the vertices moved along. The vertices A, B, C of the original can be dragged too. You can also drag the image (gray shape), and Q follows by the same amount.

시도해 보기 — Drag Q to change the direction and distance of the translation. Q always coincides with the corresponding vertex of the image.

<div class="mathgraph" data-height="379"
     data-view='-8,8,-5,5'
     data-controls='full'
     data-touch-drag='true'
     data-exprs='["A=(-4,-1)","B=(-1,-1)","C=(-3,1.5)","t=Polygon(A,B,C)","Q=(1,2)","v=Vector(A,Q)","t2=Translate(t,v)","Link(t,t2)"]'></div>

26 Transformation 2: Rotation, Rotate(shape, angle, center)

Point O is the center of rotation, and handle H is where A ends up (A'). H moves only along the circle (dotted) centered at O with radius OA, so it always stays on the vertex of the image. Dragging H around the circle rotates the shape about O by angle AOH (counterclockwise is +). Center O can also be dragged.

시도해 보기 — Rotate H once around the circle. The angle value appears below the expression box.

<div class="mathgraph" data-height="416"
     data-view='-8,8,-5.5,5.5'
     data-controls='full'
     data-touch-drag='true'
     data-exprs='["A=(-4,-1)","B=(-1,-1)","C=(-3,1.5)","t=Polygon(A,B,C)","O=(1,0)","c=Guide(Circle(O,A))","H=Point(c,-1.898)","Guide(Segment(O,A))","Guide(Segment(O,H))","Angle(A,O,H)","t2=Rotate(t,Angle(A,O,H),O)"]'></div>

27 Transformation 3: Point Reflection — Reflect(shape, point)

This is a reflection about point O. Drag O to move the center of reflection, and the image t2 goes to the opposite side along a line through O. The dotted lines are guide lines drawn by the single line `Link(t,t2)`: they join corresponding points (A and A', etc.) and all pass through O (O is their midpoint). The points at the line ends are the vertices of the image.

시도해 보기 — If you put O on the triangle, the image overlaps the original.

<div class="mathgraph" data-height="379"
     data-view='-8,8,-5,5'
     data-controls='full'
     data-touch-drag='true'
     data-exprs='["A=(-4,-1)","B=(-1,-1)","C=(-3,1.5)","t=Polygon(A,B,C)","O=(1,0)","t2=Reflect(t,O)","Link(t,t2)"]'></div>

28 Transformation ④ Line Reflection — Reflect(shape, line)

The line l through points P and Q is the mirror. Drag P or Q to rotate the mirror and change its slope, or drag the line l itself (data-shape-drag="true") to move P and Q together and shift the whole mirror. The image t2 appears on the opposite side of the mirror. The dashed lines are guides drawn by the single row `Link(t,t2)`; they join corresponding points and are perpendicular to the mirror. The points at the ends of the lines are the vertices of the image.

시도해 보기 — Click line l and drag it toward the triangle. The image moves along with it.

<div class="mathgraph" data-height="379"
     data-view='-8,8,-5,5'
     data-controls='full'
     data-touch-drag='true'
     data-shape-drag='true'
     data-exprs='["A=(-4,-1)","B=(-1,-1)","C=(-3,1.5)","t=Polygon(A,B,C)","P=(1,-4)","Q=(1,4)","l=Line(P,Q)","t2=Reflect(t,l)","Link(t,t2)"]'></div>

29 Transformation ⑤ Dilation — Dilate(shape, scale factor, center)

Point O is the center, and handle H is where A has been dilated (A'). H moves only along line OA (dotted), and the scale factor k is the ratio from O to H (Ratio(O,A,H)). Drag H toward O to shrink, away to enlarge, and past O to the other side for a negative factor (an inverted dilation). The center O can also be dragged.

시도해 보기 — Drag H toward O to make the ratio less than 1, or to the other side to make it negative.

<div class="mathgraph" data-height="394"
     data-view='-10,10,-6.5,6.5'
     data-controls='full'
     data-touch-drag='true'
     data-exprs='["A=(-4,-1)","B=(-1,-1)","C=(-3,1.5)","t=Polygon(A,B,C)","O=(1,0)","l=Guide(Line(O,A))","H=Point(l,9.217)","Ratio(O,A,H)","t2=Dilate(t,Ratio(O,A,H),O)"]'></div>

30 Drag Points

A point defined as A=(number,number) is dragged with the mouse. For touch screens, set data-touch-drag="true". Each drag fires a mathgraph:point event.

시도해 보기 — Drag A, B, and C. The midpoints, angles, and circumcircle follow.

<div class="mathgraph" data-height="404"
     data-controls='full'
     data-touch-drag='true'
     data-view='-3,9,-2,6'
     data-exprs='["A=(0,0)","B=(6,0)","C=(2,4)","t=Polygon(A,B,C)","c=Circle(A,B,C)","M=Midpoint(A,B)","Angle(B,A,C)"]'></div>

31 Point on a shape: Point(shape)

R=Point(c,0.8) moves only on circle c, and S=Point(l,1) moves only on line l. To make a point free, change the expression to coordinates like R=(3,1); to attach it again, write R=Point(c). You do not have to edit the expression: double-click the point and the attach menu appears again (Release as free point / Move only on nearby shape). For a circle that depends on the point, such as c=Circle(O,P), choose "Fix at current size and move only on it" and the circle freezes at its current size while the point moves along it. Or, if you place a free point near a shape, an "Attach?" menu appears (Move only on shape / Line moves with point); right-click a point to choose "Detach" or "Attach", and you can also "Fix" shapes that depend on that point: when circle c and line l both follow point P, fixing c leaves only the line following, and fixing l leaves only the circle following P (right-click the shape and choose "Unfix"). When two shapes share one point, that point is called an attractor: right-click a line and choose "Hang on circle as attractor" and a point (the attractor) appears on the circle and the line passes through it. Drag the attractor along the circle and the line follows; right-click the attractor and choose "Release Attractor" and the point becomes a free point while the line stays fixed where it is now.

시도해 보기 — Drag R and S. Drag P to change the radius.

<div class="mathgraph" data-height="453"
     data-controls='full'
     data-touch-drag='true'
     data-view='-6,6,-4.5,4.5'
     data-exprs='["O=(0,0)","P=(3,0)","c=Circle(O,P)","R=Point(c,0.8)","l=Line((-5,-4),(5,-3))","S=Point(l,1)","Radius(c)"]'></div>

32 Resize Circle

Drag point P to make the circle larger or smaller. You can also change the radius with slider w below.

<div class="mathgraph" data-height="380"
     data-controls='full'
     data-touch-drag='true'
     data-view='-8,8,-5,5'
     data-sliders='{"w":{"min":0.2,"max":4,"step":0.1,"value":1.5}}'
     data-exprs='["O=(-2,0)","P=(1,0)","c=Circle(O,P)","Radius(c)","Area(c)","Q=(4,0)","w=1.5","d=Circle(Q,w)","R=Point(d,0.8)"]'></div>

33 Click and drag shapes to move them — Translation · Rotation · Point Reflection · Line Reflection · Dilation

data-tools="true". Click and drag a line, segment, circle, or polygon. Choose the mode with the buttons at the top. Translation, rotation, and dilation work by dragging; point reflection and line reflection flip the shape once when you click it (click again to undo). The center (×) and the line of reflection (dotted, rotated with the ◯ handle) are moved by dragging. Lines cannot be dilated, so that is blocked. Turn on view options with the buttons below: "Before/After" leaves the shape before moving as a faint dotted outline, "Trace" leaves the path the vertices travel (dotted) and the intermediate shapes while moving (rotation draws an arc, reflection leaves lines joining corresponding points), and "Clear" removes what was left. When you choose rotation, dragging a shape shows an angle arc and number (counterclockwise is +) between the starting direction and the current one, and the "Rotation angle" box below shows the value live. You can also type an angle in that box and press Enter (or Apply) to rotate the same shape by that angle (negative is clockwise, and values over 360° work).

시도해 보기 — Choose Rotate and drag a line to see the angle arc. Then type 90 in the rotation angle box and press Enter. Turn on the before/after view and trace, then rotate. Choose Reflect, drag the dashed line to move it, then click a line.

<div class="mathgraph" data-height="404"
     data-controls='full'
     data-tools='true'
     data-touch-drag='true'
     data-view='-6,6,-4,4'
     data-exprs='["A=(-2,-1)","B=(3,2)","l=Line(A,B)","Slope(l)","M=Midpoint(A,B)","Distance(A,B)"]'></div>

34 Moving a triangle and a quadrilateral

With the same data-tools, move and rotate a whole polygon. Turn on "Before/After View" and "Trace" to keep the shape before moving and the path it traveled.

시도해 보기 — Turn on Before/After and reflect the quadrilateral through a point.

<div class="mathgraph" data-height="560"
     data-controls='none'
     data-tools='true'
     data-touch-drag='true'
     data-view='-8,8,-5,5'
     data-exprs='["A=(-5,-1)","B=(-1,-1)","C=(-3,2)","t=Polygon(A,B,C)","D=(1,-2)","E=(5,-2)","F=(6,1)","G=(2,1)","q=Polygon(D,E,F,G)"]'></div>

35 Rotation Center and Angle Slider

Point C is the center of rotation and slider a is the rotation angle (in degrees, counterclockwise is +). R is triangle T (its vertices are fixed points made with Fixed(x,y), so they cannot be dragged) rotated by a degrees about C. Only the center C can be dragged, so the original is never distorted. You can also rotate with the mouse instead of the slider: click the rotated shape R and drag it around C, and slider a follows (past 360° it wraps around to 0). The dotted circle is the path of vertex A, the two dotted lines are the radii from C to A and to the rotated position of A (A'), and the arc is the angle of rotation. Dragging C to move the center changes the position of the image even with the same angle. Rotating with a handle is covered in Transformation 2 above.

시도해 보기 — Click the gray triangle R and rotate it around C. Slider a or ▶ moves it too. Then move C inside and outside the triangle.

<div class="mathgraph" data-height="423"
     data-controls='full'
     data-touch-drag='true'
     data-view='-10,10,-7,7'
     data-sliders='{"a":{"min":0,"max":360,"step":1,"value":45}}'
     data-exprs='["C=(0,0)","A=Fixed(2,1)","B=Fixed(5,1)","D=Fixed(3.5,4)","T=Polygon(A,B,D)","a=45","R=Rotate(T,a°,C)","Guide(Circle(C,A))","Guide(Segment(C,A))","Guide(Segment(C,Rotate(A,a°,C)))","Angle(A,C,Rotate(A,a°,C))"]'></div>

36 Draw on a Blank Canvas

data-draw="true". Point · Circle ▾ (center and radius / diameter / three points) · Line ▾ (segment / ray / line) · Polygon ▾ (place vertices / regular n-gon). For a regular n-gon, enter the number of sides (3 to 20), then click the center and a vertex. For a polygon, edit each side's length in the "Side Lengths" box at the lower left (the vertex at the end of the side moves). Esc cancels. "Undo" and "Redo" at the top (Ctrl/⌘+Z, Ctrl/⌘+Shift+Z) undo and redo drawing, dragging, transformations, and expression edits one step at a time. "Reset" returns to the initial state (initial expressions and visible range), and can be undone. The "View" menu turns the grid and the axes (including tick numbers) on and off separately (both off gives a blank background). Clicking "Tools ▾" at the upper left collapses all tools to give the canvas more room. Type an expression such as y=x or x^2+y^2=1, or a circle defined without points (c=Circle((0,0),3)), in an expression box, then click or drag it with a transformation tool at the top: the original shape stays as it is and the transformed image is created as a new expression line (for shapes made from points, the shape itself is moved).

시도해 보기 — Draw a regular n-gon with n=6 and change AB to 3. Type y=x in the expression box, choose Line Reflection, then click that line.

<div class="mathgraph" data-height="560"
     data-controls='full'
     data-draw='true'
     data-tools='true'
     data-touch-drag='true'
     data-view='-8,8,-5.5,5.5'
     data-exprs='[]'></div>

37 Continue drawing from an existing point

Clicking near a point uses that point instead of creating a new one. Try drawing a circle (three points) or a polygon (plot vertices) with the three points below.

시도해 보기 — Choose Circle ▾ → Three Points, then click A, B, and C in turn.

<div class="mathgraph" data-height="460"
     data-controls='full'
     data-draw='true'
     data-touch-drag='true'
     data-view='-8,8,-5,5'
     data-exprs='["A=(-4,-2)","B=(0,-2)","C=(-2,2)"]'></div>

38 Definite Integral Region — Integral(expr, start, end)

Shades the region under the curve and shows its value (∫). Start A and end B are points on the x-axis, so dragging them changes the shaded interval and the value immediately. If the end is less than the start, the sign flips. You can use numbers or sliders instead of points: Integral(x^2,0,k).

시도해 보기 — Drag A and B left and right. Notice that the value decreases when the curve is below the x-axis.

<div class="mathgraph" data-height="453"
     data-controls='full'
     data-touch-drag='true'
     data-view='-4,4,-2,4'
     data-exprs='["f(x)=x^2/2-1","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,-2.5)","B=Point(xa,2.5)","Integral(f(x),A,B)"]'></div>

39 Left Sum (LRAM) — LeftSum(expression, start, end, n)

The sum of rectangles whose heights come from the left endpoint of each interval. As you increase the number of intervals n, it approaches the definite integral. The value box shows the sum, the exact value (∫), and the error together. Click a bar (piece) to see that interval's description and expression, and turn on "Tools ▸" → "View ▾" → "Max/min area pieces" at the top to mark the piece with the largest area (orange) and the smallest (blue).

시도해 보기 — Raise n from 1 to 60. Drag A and B too.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","LeftSum(f(x),A,B,n)"]'></div>

40 Right sum (RRAM): RightSum(expression, start, end, n)

Uses the height at the right end of each interval. It is larger than the left sum where the function is increasing and smaller where it is decreasing.

시도해 보기 — Compare the left sum with the sign of the error.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","RightSum(f(x),A,B,n)"]'></div>

41 Midpoint Sum (MRAM) — MidSum(expression, start, end, n)

Uses the height at the middle of each interval. For the same n, the error is usually much smaller than with the left or right sum.

시도해 보기 — Compare the errors of the three sums when n=6.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","MidSum(f(x),A,B,n)"]'></div>

42 Trapezoid Sum (TRAP) — TrapSum(expr, start, end, n)

Each interval is covered by a trapezoid with a slanted top. It equals the average of the left sum and the right sum.

시도해 보기 — See how the sign of the error changes where the curve is concave up or concave down.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","TrapSum(f(x),A,B,n)"]'></div>

43 Simpson Sum — SimpsonSum(expression, start, end, n)

Covers each interval with a parabola piece fitted to the curve. Click a piece and that parabola is drawn as a thin dotted line across the whole screen width (nearly solid within the piece), along with the parabola's equation (y = ax² + bx + c) and the area. It is exact for polynomials of degree 2 or less and the error is very small even for general curves (not on the AP exam, but commonly used in college textbooks).

시도해 보기 — See how small the error is even with n set to 2 to 6.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","SimpsonSum(f(x),A,B,n)"]'></div>

44 Upper and lower sums: UpperSum / LowerSum(expression, start, end, n)

Uses the maximum (upper sum, top) and minimum (lower sum, bottom) of the function on each interval as heights. The definite integral always lies between the lower sum and the upper sum, and as n increases the two converge to one value (Darboux sums).

시도해 보기 — Increase n and watch the difference between the two sums.

<div class="mathgraph" data-height="394"
     data-controls='full'
     data-touch-drag='true'
     data-canvas-tools='true'
     data-tools-open='false'
     data-view='-1,7,-1,4.2'
     data-sliders='{"n":{"min":1,"max":60,"step":1,"value":6}}'
     data-exprs='["f(x)=2+sin(x)","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0.5)","B=Point(xa,6)","n=6","UpperSum(f(x),A,B,n)","LowerSum(f(x),A,B,n)"]'></div>

45 Fundamental Theorem of Calculus — Accumulation Function F(x)=∫ₐˣ f

Plots the curve y=f(x) together with its accumulation function F(x)=∫ₐˣ f(t)dt (the curve Fa). Dragging the starting point A changes a, which translates the graph of F up or down (f determines the shape, and since F(a)=0 the curve always crosses the x-axis at A). Dragging point X on the x-axis, the shaded area (∫) from A to X is exactly the height of F(X) (point P on F), and the slope of the tangent line T to F equals the height f(X) of point Q on f. That is, F′(x)=f(x), and A has no effect on this slope.

시도해 보기 — Drag A and notice that F moves as a whole but the slope of the tangent does not change. Then drag X.

<div class="mathgraph" data-height="420"
     data-controls='full'
     data-touch-drag='true'
     data-view='-1,7,-1.6,3'
     data-exprs='["f(x)=sin(x)+0.3","y=f(x)","xa=Guide(Line((0,0),(1,0)))","A=Point(xa,0)","X=Point(xa,2)","Fa=Antiderivative(f(x),A)","Integral(f(x),A,X)","Q=CurvePoint(f(x),X)","P=CurvePoint(Fa,X)","Guide(Segment(X,P))","T=CurveTangent(Fa,X)","Slope(T)"]'></div>

46 Normal Distribution Density and Cumulative

Normal(μ,σ,x,false) is the density; leave out the last argument for the cumulative distribution. For the aspect ratio use data-aspect="free".

시도해 보기 — Try changing m and s.

<div class="mathgraph" data-height="340"
     data-aspect='free'
     data-view='-6,6,-0.3,1.2'
     data-sliders='{"m":{"value":0,"min":-3,"max":3,"step":0.1},"s":{"value":1,"min":0.3,"max":3,"step":0.1}}'
     data-exprs='["Normal(m,s,x,false)","Normal(m,s,x)"]'></div>

47 Binomial Distribution Bars and Normal Approximation

BinomialDist(n,p) draws bars; overlay the normal curve to see the approximation.

시도해 보기 — As n grows, the curve and the bars coincide.

<div class="mathgraph" data-height="340"
     data-aspect='free'
     data-view='-1,26,-0.05,0.4'
     data-sliders='{"n":{"value":20,"min":1,"max":50,"step":1},"p":{"value":0.4,"min":0.05,"max":0.95,"step":0.05}}'
     data-exprs='["BinomialDist(n,p)","Normal(n*p,sqrt(n*p*(1-p)),x,false)"]'></div>

48 Binomial distribution calculator: X input · Z input · cumulative · inverse

Once you set n and p, the binomial distribution B(n,p) is computed directly (exact values, not approximations). 1) Enter an X value: enter k to get P_eq=P(X=k), P_le=P(X≤k) (cumulative), P_ge=P(X≥k), and the standardized z_k=(k−np)/σ. The point on a bar is (k, P(X=k)). 2) Enter a Z value: enter z to get x_z=np+zσ (the X value for that z), Phi_z=Φ(z) (normal approximation cumulative), and P_z=P(X≤⌊x_z⌋) (exact binomial cumulative). Comparing the two shows how good the normal approximation is. 3) Inverse: enter a cumulative probability q to get k_q, the smallest integer k with P(X≤k)≥q (InverseBinomial), and z_q=Φ⁻¹(q) (InverseNormal). Values appear below each row. σ=√(np(1−p)).

시도해 보기 — You can also type numbers directly into the k, z, q boxes (the box to the right of each slider). With n=20, p=0.4, k=8 gives P(X≤8)=0.5956, and q=0.5 gives k_q=8.

<div class="mathgraph" data-height="560"
     data-aspect='free'
     data-controls='full'
     data-view='-1,26,-0.05,0.4'
     data-sliders='{"n":{"value":20,"min":1,"max":50,"step":1},"p":{"value":0.4,"min":0.05,"max":0.95,"step":0.05},"k":{"value":8,"min":0,"max":50,"step":1},"z":{"value":0.5,"min":-3.5,"max":3.5,"step":0.01},"q":{"value":0.7,"min":0,"max":1,"step":0.01}}'
     data-exprs='["BinomialDist(n,p)","Normal(n*p,sqrt(n*p*(1-p)),x,false)","k=8","P_eq=Binomial(n,p,k,false)","P_le=Binomial(n,p,k)","P_ge=1-Binomial(n,p,k-1)","z_k=(k-n*p)/sqrt(n*p*(1-p))","(k,P_eq)","z=0.5","x_z=n*p+z*sqrt(n*p*(1-p))","Phi_z=Normal(0,1,z)","P_z=Binomial(n,p,floor(x_z))","q=0.7","k_q=InverseBinomial(n,p,q)","z_q=InverseNormal(0,1,q)"]'></div>

49 Histogram · Box Plot · Dot Plot

Histogram(boundaries, data), BoxPlot(y position, y scale, data), DotPlot(data).

<div class="mathgraph" data-height="360"
     data-aspect='free'
     data-view='-1,13,-1.5,5'
     data-controls='none'
     data-exprs='["Histogram([0,2,4,6,8,10],[0.5,1,1,2,2,3,4,5,5.9,6,6.5,7,9])","BoxPlot(-0.8,0.4,[0.5,1,1,2,2,3,4,5,5.9,6,6.5,7,9])","DotPlot([1,2,2,3,3,3,5,5,8])"]'></div>

50 Bar Chart

BarChart(values, heights[, width]).

<div class="mathgraph" data-height="300"
     data-aspect='free'
     data-view='0,6,-1,8'
     data-controls='none'
     data-exprs='["BarChart([1,2,3,4,5],[3,5,2,6,4],0.8)"]'></div>

51 Cumulative Comparison of the t and Normal Distributions

TDistribution(ν,x) is the cumulative distribution. As the degrees of freedom v increase, it approaches the normal distribution.

시도해 보기 — Try raising v from 1 to 30.

<div class="mathgraph" data-height="320"
     data-aspect='free'
     data-view='-5,5,-0.1,1.1'
     data-sliders='{"v":{"value":2,"min":1,"max":30,"step":1}}'
     data-exprs='["Normal(0,1,x)","TDistribution(v,x)"]'></div>

52 Chi-Square · F · Exponential · Poisson · Gamma

ChiSquared(ν,x), FDistribution(d1,d2,x), Exponential(λ,x), Poisson(λ,k), Gamma(α,β,x) (β is the scale). All are cumulative distributions.

<div class="mathgraph" data-height="320"
     data-aspect='free'
     data-view='-1,15,-0.1,1.1'
     data-sliders='{"v":{"value":3,"min":1,"max":10,"step":1}}'
     data-exprs='["ChiSquared(v,x)","FDistribution(v,6,x)","Exponential(0.5,x)","Gamma(2,2,x)"]'></div>

53 Dark Theme · Wheel Zoom Always Allowed

data-theme="dark", data-wheel="always".

시도해 보기 — You can also zoom just by scrolling the wheel over the graph.

<div class="mathgraph" data-height="260"
     data-theme='dark'
     data-wheel='always'
     data-controls='none'
     data-exprs='["y=\\int_0^x t^2 dt","y=\\frac{d}{dx}x^3"]'></div>

54 Static Graph (data-interactive="false")

Turns off panning and zooming. For use as an illustration inside text.

<div class="mathgraph" data-height="262"
     data-interactive='false'
     data-controls='none'
     data-view='-7,7,-2,2'
     data-label='Sine and Cosine Graphs'
     data-exprs='["y=sin(x)","y=cos(x)"]'></div>

55 Set colors (data-colors)

Give the color list as JSON. The default is a 7-color colorblind-friendly palette.

<div class="mathgraph" data-height="260"
     data-colors='["#7b2cbf","#e07a00","#007f5f"]'
     data-controls='none'
     data-view='-2,2,-3,3'
     data-aspect='free'
     data-exprs='["y=x","y=x^2","y=x^3"]'></div>

56 Aspect ratio (data-aspect="free")

The default is 1:1. With free, the horizontal and vertical ranges are independent.

<div class="mathgraph" data-height="240"
     data-aspect='free'
     data-controls='none'
     data-view='-3,3,0,10'
     data-exprs='["y=x^2"]'></div>

57 MathGraph.mount · setSlider · setView · setExprs · events

An empty <div>gets a graph attached by script, and buttons change the slider, range, and expressions. Dragging a point fires a mathgraph:point event, which is logged in the box below.

Try it - press the buttons and drag point A.

(Point-drag events are logged here)

const g = MathGraph.mount(document.getElementById("api-host"), {
  exprs: ["A=(1,1)", "y=sin(k*x)"],
  height: 300, view: "-7,7,-3,3", touchDrag: true, controls: "sliders" });
g.setSlider("k", 4);                       // 슬라이더 값
g.setView({ xmin: -2, xmax: 2 });          // 보이는 범위
g.setExprs(["cos(x)", "A=(0,1)"]);         // 식 바꾸기
host.addEventListener("mathgraph:point", (e) => console.log(e.detail)); // {name,x,y}
g.destroy();                               // 정리