Skip to main content
Logo image

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.
Figure 3.7.1. The graphs of two functions.
<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>
Listing 3.7.2. The PreFigure source for Figure 3.7.1.
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.
Figure 3.7.3. A graph with tangent lines.
<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>
Listing 3.7.4. The PreFigure source for Figure 3.7.3.

Subsection 3.7.2 Parametric curves

The <parametric-curve> tag includes the plot of a function defined parametrically.
Figure 3.7.5. Two parametric curves.
<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>
Listing 3.7.6. The PreFigure source for Figure 3.7.5.
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.
Figure 3.7.7. Two implicit curves defined by \(f(x,y)=y^2-x^3+x=k.\)
<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>
Listing 3.7.8. The PreFigure source for Figure 3.7.7.
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>.
Figure 3.7.9. The area under a curve and between two 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>
Listing 3.7.10. The PreFigure source for the diagrams inFigure 3.7.9.
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.
Figure 3.7.11. A Riemann sum
<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>
Listing 3.7.12. The PreFigure source for the diagrams inFigure 3.7.11.
The possible values for @rule are @rule="left", "right", "mid".