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>
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.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"
.