Section 3.7 Calculus components
There is a collection of graphical components to facilitate diagrams that could appear in a calculus or precalculus course.
Subsection 3.7.1 Graphs and tangent lines
To include the graph of a function, the function first needs to be defined inside a
<definition>. By default, the domain of the function is assumed to be the horizontal extend of the current bounding box. The @domain attribute can modify this, however.
<diagram dimensions="(300,300)" margins="5">
<definition>f(x)=x^3/8 - 1.5*x</definition>
<definition>g(s)=-sqrt(s+2)-1</definition>
<coordinates bbox="(-5,-5,5,5)">
<grid-axes decorations="no"/>
<graph function="f"/>
<graph function="g" domain="(-2,5)" stroke="green"/>
</coordinates>
</diagram>
By default, a graph is drawn by connecting
@N="100" short line segments. You may sometimes need to increase @N if the graph varies a lot.Tangent lines are similar except a
@point attribute should be included to define the point at which the tangent line will appear. As with functions, the tangent line will be drawn across the length of the bounding box unless modified using the @domain attribute.
<diagram dimensions="(300,300)" margins="5">
<definition>f(x)=x^3/8 - 1.5*x</definition>
<coordinates bbox="(-5,-5,5,5)">
<grid-axes decorations="no"/>
<graph function="f"/>
<tangent-line function="f" point="-1.5"/>
<tangent-line function="f" point="1.5"
domain="(0,3)" stroke="green"/>
</coordinates>
</diagram>
A
<tangent-line> element can be given a @name attribute so that one might refer later to the linear function that defines the tangent line. For instance, if @name="L", then L defines the function
\begin{equation*}
L(x) = f(a)+f'(a)(x-a)\text{.}
\end{equation*}
Figure 3.7.5 demonstrates this feature by illustrating one step of Newton’s method.
<tangent-line>.Note the use of the
intersect function in the PreFigure source. In this case, intersect(L, -1) finds the solution of the equation \(L(x)=0\) using \(x_0=-1\) as a starting point.<diagram dimensions="(300,300)" margins="5">
<definition>f(x)=7-(x+1)^2/2</definition>
<definition>x0 = 1</definition>
<coordinates bbox="(-8,-8,8,8)">
<grid-axes xlabel="x" ylabel="y"/>
<graph function="f"/>
<tangent-line function="f" point="x0" name="L"/>
<point p="(x0,f(x0))" alignment="se"/>
<definition>x1 = intersect(L,-1)</definition>
<repeat parameter="x in (x0, x1)">
<line endpoints="((x,0),(x,0))"
endpoint-offsets="((0,-3),(0,3))"
tactile-endpoint-offsets="((0,-18),(0,0))"
stroke="black"/>
</repeat>
<label anchor="(x0,0)" alignment="north">
<m>x_0</m>
</label>
<label anchor="(x1,0)" alignment="ne">
<m>x_1</m>
</label>
</coordinates>
</diagram>
It is possible to include arrows on the right and/or left ends of a
<graph> using either @arrows="1" or "2" though this practice is discouraged due to the visual clutter it can create.Subsection 3.7.2 Parametric curves
The
<parametric-curve> tag includes the plot of a function defined parametrically.
<diagram dimensions="(300,300)" margins="5">
<definition>f(t)=3*(cos(t), sin(t)) + (cos(10*t),sin(10*t))</definition>
<definition>g(t)=(t^2,t^3)</definition>
<coordinates bbox="(-5,-5,5,5)">
<grid-axes decorations="no"/>
<parametric-curve function="f" domain="(0,2*pi)"
N="200" closed="yes"/>
<parametric-curve function="g" domain="(-2,2)"
stroke="red"/>
</coordinates>
</diagram>
Notice that a parametric curves needs a
@domain attribute and may be closed with @closed="yes". Some curves may require a larger value of @N for a smoother appearence.Subsection 3.7.3 Implicit curves
The solutions to an equation \(f(x,y)=k\) can be plotted with the
<implicit-curve> tag.
<diagram dimensions="(300, 300)" margins="5">
<definition>f(x,y) = y^2 - x^3 + x</definition>
<coordinates bbox="[-2,-2,2,2]">
<grid-axes />
<implicit-curve function="f" k="-1" stroke="orange" />
<implicit-curve function="f" k="1" stroke="orange" />
</coordinates>
</diagram>
Two required attributes are
@function and @k. The algorithm relies on breaking the current bounding box into smaller rectangles and looking for solutions to \(f(x,y)=k\) recursively. For some complicated functions, the algorithm may miss a component of the curve. In this case, set the attribute @initial-depth to a value higher than its default of 4. If two components are incorrectly joined, increase the depth to which the algorithm may recurse by raising @depth beyond its default of 8.Subsection 3.7.4 Areas
The area under a curve and between curves are drawn with
<area-under-curve> and <area-between-curves>.
<diagram dimensions="(300, 300)" margins="5">
<definition>f(x)=2*sqrt(x)</definition>
<coordinates bbox="[-1,-1,5,5]">
<grid-axes />
<area-under-curve function="f" domain="(1,4)"
fill="lightgray" stroke="black"/>
<graph function="f" domain="(0,5)"/>
</coordinates>
</diagram>
<diagram dimensions="(300, 300)" margins="5">
<definition>f(x)=sqrt(x)</definition>
<definition>g(x)=-2*atan(x)</definition>
<coordinates bbox="[-1,-3,5,3]">
<grid-axes />
<area-between-curves function1="f" function2="g" domain="(1,3)"
fill="lightgray" stroke="black"/>
<graph function="f" domain="(0,5)"/>
<graph function="g" domain="(0,5)"/>
</coordinates>
</diagram>
As with the other graphs we have seen in this section, the value of
@N can be increased to produce smoother graphs, in some cases.As demonstrated in Figure 3.7.13, there is another version of the
intersect function that can be helpful.
intersect function finds the intersection of two graphs.In this case, we use
intersect( (f,g), 1) to find the intersection point starting with \(x_0=1\text{.}\) Notice that the two functions are included inside parentheses.<diagram dimensions="(300,300)" margins="5">
<definition>f(x)=sin(x)</definition>
<definition>g(x)=cos(x)</definition>
<definition>a=intersect((f,g),1)</definition>
<definition>b=intersect((f,g),4)</definition>
<coordinates bbox="(-1,-1.5,5,1.5)">
<grid-axes decorations="no"/>
<area-between-curves functions="(f,g)" domain="(a,b)" fill="lightgray"/>
<graph function="f"/>
<graph function="g"/>
<line endpoints="((a,0),(a,0))" endpoint-offsets="((0,-3),(0,3))"/>
<label anchor="(a,0)" alignment="south" offset="(0,-7)">
<m>a</m>
</label>
<line endpoints="((b,0),(b,0))" endpoint-offsets="((0,-3),(0,3))"/>
<label anchor="(b,0)" alignment="south" offset="(0,-4)">
<m>b</m>
</label>
</coordinates>
</diagram>
Subsection 3.7.5 Riemann sums
Finally, there is a
<riemann-sum> element.
<diagram dimensions="(300,300)" margins="5">
<definition>f(x) = 2*log(x+2)</definition>
<coordinates bbox="[-1,-1,5,5]">
<grid-axes/>
<riemann-sum function="f" domain="(1,4)" rule="right"
N="6" fill="lawngreen" stroke="black" width="1"/>
<graph function="f"/>
</coordinates>
</diagram>
The possible values for
@rule are @rule="left", "right", "mid".
