# Presenting Integration and Differentiation on the Web

## Presentation Mathematical Markup Language – Part 5

Foreword: In this part of the series, I give you a notion of integration and differentiation and how to code their expressions.

By: Chrysanthus Date Published: 20 Feb 2016

### Introduction

This is part 5 of my series, Presentation Mathematical Markup Language. Mathematics has a feature called integration. It has another feature called differentiation. In this part of the series, I give you a notion of integration and differentiation and how to code their expressions, for the web. You do not need to fully understand integration and differentiation in order to code their expressions. Just learn how to identify the expressions and you will be able to code them. You should have read the precious parts of the series before coming here, as this is a continuation.

Integration

N-Ary Summation
There is a grade (classroom) of 30 students. Each of the students has siblings (brothers and sisters). The following table shows the number of students with 4 siblings each, number of students with 5 sibling each, number of students with 3 siblings each, number of students with 2 siblings each, number of students with 0 sibling each, and number of students with 1 sibling each:

 No. of Students Siblings 1 2 3 6 7 11 4 5 3 2 0 1

From the table, we see that: 1 student has 4 siblings, 2 students have 5 siblings each, 3 students have 3 siblings each, 6 students have 2 siblings each, 7 students have no (zero) sibling each, and 11 students have 1 sibling each.

So,
1 student has 4 siblings, giving 1 x 4 = 4 siblings from 1 student;
2 students have 5 siblings each, giving 2 x 5 = 10 siblings from 2 students;
3 students have 3 siblings each, giving 3 x 3 = 9 siblings from 3 students;
6 students have 2 siblings each, giving 6 x 2 = 12 siblings from 2 students;
7 students have 0 sibling each, giving 7 x 0 = 0 sibling from 7 students;
11 students have 1 sibling each, giving 11 x 1 = 11 siblings from 11 students;

The total number of siblings for the grade is 4 + 10 + 9 + 12 + 0 + 11 = 46, which is (1 x 4) + (2 x 5) + (3 x 3) + (6 x 2) + (7 x 0) + (11 x 1) = 46 (same thing).

So the number of siblings provided by a group of students is gotten by multiplying the student group number, e.g. 2 by the corresponding sibling group number, 5. In mathematics the student group number is called the frequency and the corresponding sibling group number is called the class.

Now, if we denote the number of students in a student group with f and the number of the siblings in a sibling group with C, the table is relabeled as,

 f C 1 2 3 6 7 11 4 5 3 2 0 1

And the number of siblings for a student group is given by,

$fC$

meaning, f times C; that is, number of students times number of siblings in corresponding group. This is coded as:

[itex]
<mi>f</mi>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<mi>C</mi>
[/itex]

Note the use of INVISIBLE TIMES. Try the code.

In the expression, and in mathematics, f is called a variable; C is also called a variable. In Mathematical Markup Language, f or C is called an identifier.

In mathematics, the most common letter to use in place of f and similarly positioned variable is x, and the most common letter to use in place of C and similarly positioned variable is y. So you can have

$xy$

with an implicit (invisible) times between y and x.

The total number of siblings for the grade is gotten from,

(1 x 4) + (2 x 5) + (3 x 3) + (6 x 2) + (7 x 0) + (11 x 1)

Again, C stands for sibling group and f stands for frequency (number of students) group. This long addition can be rewritten as:

${\mathrm{\left(f}}_{1}×{C}_{1}\right)+{\mathrm{\left(f}}_{2}×{C}_{2}\right)+{\mathrm{\left(f}}_{3}×{C}_{3}\right)+{\mathrm{\left(f}}_{6}×{C}_{6}\right)+{\mathrm{\left(f}}_{7}×{C}_{7}\right)+{\mathrm{\left(f}}_{11}×{C}_{11}\right)$

where a number of student’s group is identified by a subscript whose value is the group’s frequency and the corresponding siblings group is identified by a subscript whose value is still the frequency. In mathematics, it is conventional to write C before f, so the long addition is written as,

${\mathrm{\left(C}}_{1}×{f}_{1}\right)+{\mathrm{\left(C}}_{2}×{f}_{2}\right)+{\mathrm{\left(C}}_{3}×{f}_{3}\right)+{\mathrm{\left(C}}_{6}×{f}_{6}\right)+{\mathrm{\left(C}}_{7}×{f}_{7}\right)+{\mathrm{\left(C}}_{11}×{f}_{11}\right)$

So

${\mathrm{\left(C}}_{1}×{f}_{1}\right)+{\mathrm{\left(C}}_{2}×{f}_{2}\right)+{\mathrm{\left(C}}_{3}×{f}_{3}\right)+{\mathrm{\left(C}}_{6}×{f}_{6}\right)+{\mathrm{\left(C}}_{7}×{f}_{7}\right)+{\mathrm{\left(C}}_{11}×{f}_{11}\right)$ = 46, the total number of siblings for the grade.

If we replace all the multiplication signs (times), with invisible times, we have:

${\mathrm{\left(C}}_{1}{f}_{1}\right)+{\mathrm{\left(C}}_{2}{f}_{2}\right)+{\mathrm{\left(C}}_{3}{f}_{3}\right)+{\mathrm{\left(C}}_{6}{f}_{6}\right)+{\mathrm{\left(C}}_{7}{f}_{7}\right)+{\mathrm{\left(C}}_{11}{f}_{11}\right)$

Now, this long addition can be replaced with the N-Ary Summation symbol, omitting the plus signs, and the minimum frequency becomes the symbol underscript, the maximum frequency becomes the symbol overscript and just Cf typed next to the symbol, without the subscripts. That is, the long addition can be rewritten as:

$\sum _{f=1}^{f=11}Cf$

making,

$\sum _{f=1}^{f=11}Cf={\mathrm{\left(C}}_{1}{f}_{1}\right)+{\mathrm{\left(C}}_{2}{f}_{2}\right)+{\mathrm{\left(C}}_{3}{f}_{3}\right)+{\mathrm{\left(C}}_{6}{f}_{6}\right)+{\mathrm{\left(C}}_{7}{f}_{7}\right)+{\mathrm{\left(C}}_{11}{f}_{11}\right)=46$

, which is saying precisely that:

$\sum _{f=1}^{f=11}Cf=46$

The code for this statement is:

[itex]
<mrow>
<munderover>
<mi>&#x2211;</mi>
<mrow><mi>f</mi><mo>=</mo><mn>1</mn></mrow>
<mrow><mi>f</mi><mo>=</mo><mn>11</mn></mrow>
</munderover>
<mrow><mi>C</mi><mo>&#x2062;</mo><mi>f</mi></mrow>
</mrow>
<mo>=</mo>
<mn>46</mn>
[/itex]

Read and try it. Mathematics is taught in general (universal) terms, with f denoted by x and C by y. Read and try the following code, which shows the above statement in general terms.

[itex]
<mrow>
<munderover>
<mi>&#x2211;</mi>
<mrow><mi>x</mi><mo>=</mo><mn>1</mn></mrow>
<mrow><mi>x</mi><mo>=</mo><mn>11</mn></mrow>
</munderover>
<mrow><mi>y</mi><mo>&#x2062;</mo><mi>x</mi></mrow>
</mrow>
<mo>=</mo>
<mn>46</mn>
[/itex]

This is the end of the section, N-Ary Summation. I suggest you read the section again.

If you have read this section and understood, then maybe mathematics is not difficult after-all. In a middle (secondary) school, each step above is taught in a lesson, after which an exercise is given, with questions that test the rule (step) under different conditions, for you to master the rule. In the high school, the steps are coordinated into the n-ary summation expression, in general terms, in a lesson.
Discrete and Continuous Integration
The above table data, which relates groups of students, f and their corresponding groups of siblings, C is written conventionally as follows, with the quantity for siblings group up, and the quantity for students group down:

 C f 4 5 3 2 0 1 1 2 3 6 7 11

Notice that the values for the f variable begins from 1 to 2 to 3 and then there is a skip to 6; then to 7 and a skip again to 11. Any pairs of same data with such skips, lead to discrete integration. Discrete integration, here, is the addition of all the values of C for each value in a group of f, as done above. In general terms, discrete integration is series summation, for all values of y for each value of x, and the values of x has skips in its range.

Continuous integration, simply called, integration is addition of all values of y for each value of x, and there is no skip in the range of the values of x.

Integration
Assuming that you are driving a car, in a journey, and you are varying the speed of the car. You are with a friend. After 3 seconds of the journey, your friend starts recording the distance traveled for each second. At the end of the journey, after 5 seconds, your friend produces the following table:

 Distance Second 2 3 1 2 4 4 5 6 7 8

So, in the 4th second (1 second gap), the car traveled 2 meters; in the 5th second (1 second gap), the car traveled 3m; in the 6th second (1s gap), the car traveled 1m; in the 7th second (1s gap), the car traveled 2m; in the 8th and last second (1s gap), the car traveled 4m.

Note that the values for the second variable is continuous (no skip).

So, the timing started at the end of 3s and ended at the end of 8s. Since the consecutive difference in the second variable is 1s, let us rewrite the above table as:

 D s 2 3 1 2 4 1 1 1 1 1

where D represents distance and s represents time, the 1 second intervals.

Now, the total distance (large interval) just after the 3rd second to the end of the 8th second is,

2 + 3 + 1 + 2 + 4 = 12m

And we say the integral from the end of the 3rd to the end of the 8th second, is 12. There is no skip in the time (t) variable, and so, this is integration.

Now, this second table is actually the speed table. So, in the 4th second the car traveled 2m in 1s, meaning the speed at the fourth second is 2 meters per second; in the 5th second the car traveled 3m in 1s, meaning the speed at the fifth second is 3m/s; in the 6th second the car traveled 1m in 1 second, meaning the speed at the sixth second is 1m/s; in the 7th second, the car traveled 2m in 1s, meaning the speed at the seventh second is 2m/s; in the 8th and last second the car traveled 4m in 1s, meaning the speed at the eighth second is 4m/s.

Let speed be denoted by v and time by t; this is the kind of table you will find in math books, of v with respect to t:

 v t 2 3 1 2 4 4 5 6 7 8

This is still the speed table. The integral of speed with respect to time is written as:

$\int vdt$

This is read as integral of v-dee-t. Note the presence of the d. The code for this is:

[itex]
<mrow>
<mi>&#x222b;</mi> <!--INTEGRAL-->
<mi>v</mi>
<mi>d</mi>
<mi>t</mi>
</mrow>
[/itex]

Read and try the code. Note that everything is of an expression, within the mrow element. You do not really need to know how to evaluate an integral, but you need to know how to identify the expression, in order to code (present) it for the web.

In general mathematical terms, where x is for t and y for v, you would have:

$\int ydx$

You can still have,

f ( x ) d x

where

$f\left(x\right)=y$

and y or f(x) is something like,

$f\left(x\right)=2x-6$
Now, f(x) is read as f-of-x, meaning that f is a function (expression) of x. The code for this statement is:

[itex]
<mrow>
<mi> f </mi>
<mo> &#x2061;<!--APPLY APPLICATION--> </mo>
<mrow>
<mo> ( </mo>
<mi> x </mi>
<mo> ) </mo>
</mrow>
</mrow>
<mo>=</mo>
<mrow>
<mn>2</mn>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<mi>x</mi>
<mo>-</mo>
<mn>6</mn>
</mrow>
[/itex]

Note that f(x) is an expression within the mrow element. Read and try the code.

In mathematics, you can have an integration statement like:

$\int ydx=3{x}^{2}+K$

The code for this statement is:

[itex]
<mrow>
<mi>&#x222b;</mi> <!--INTEGRAL-->
<mi>y</mi>
<mi>d</mi>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mrow>
<mn>3</mn>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>K</mi>
</mrow>
[/itex]

Back to the speed case! The distance traveled by the car, from the end of the 3rd second to the end of the 8th second, which we know is 12, can be written in integral form as:

${\int }_{3}^{8}vdt=12$

Note the sub and super scripts for the integral symbol. The code is:

[itex]
<mrow>
<msubsup>
<mi>&#x222b;</mi> <!--INTEGRAL-->
<mn>3</mn>
<mn>8</mn>
</msubsup>
<mi>v</mi>
<mi>d</mi>
<mi>t</mi>
</mrow>
<mo>=</mo>
<mn>12</mn>
[/itex]

Make sure you can identify all the expressions in the code.  Try the code. A similar statement can be written in general terms with x and y.

### Differentiation

Rate of Change
Speed, as explain above, is an example of what is called, rate-of-change in mathematics. Speed is the rate of change of distance with respect to time; i.e. speed is the number of meters covered in 1 second. There are all sorts of rates-of-change in life. You have the speed of an athlete running; you have the flow (rate of movement) of water; you have the rate of change of sound from the TV; you have the rate of change of color at the TV screen; you have the rate of change of the pressure of the wind; you have current (rate of flow of electrons in a cable); etc.

You do not need to know how to evaluate these rates of change in order to code (present) them for the web. The mathematical statement will always be written, YOU just identify all the sub-expressions, as they build up to bigger expression, and code the expression.

Delta Change
Speed is number of meters covered per second. What about number of meters covered in 2 seconds? 2s interval is small compared to 30 seconds or even 1 minute (60 seconds). If distance is denoted by d and time by t, then the small distance covered in 2s is said to be delta-d, while 2s itself, which is small, is delta-t. The above table for distance with respect to time, is

 D t 2 3 1 2 4 4 5 6 7 8

This table of distance with respect to time in 2-second intervals, is:

 D t 5 3 4 5 7 9

The distance traveled in the 9th second is 0, since the journey stopped abruptly at the end of the 8th second. The distance for 2 seconds is gotten by adding the consecutive distances for 1 second each. So, at the end of the 5th second, delta-d is 5 and delta-t is 2; at the end of the 7th second, delta-d is 3 and delta-t is 2; at the end of the 9th second, delta-d is 4 and delta-t is 2. All delta-t’s are 2. So, for any two consecutive seconds the approximate speed is the distance covered in 2 seconds divided by 2s. This is written as:

$\frac{\delta D}{\delta t}$

read as delta-d over delta-t. The code is:

[itex]
<mfrac>
<mrow>
<mi>&#x3B4;</mi> <!--GREEK SMALL LETTER DELTA-->
<mi>d</mi>
</mrow>
<mrow>
<mi>&#x3B4;</mi> <!--GREEK SMALL LETTER DELTA-->
<mi>t</mi>
</mrow>
</mfrac>
[/itex]

So, for the 2 seconds just before the end of the 7th second, the approximate speed is:

$\frac{\delta D}{\delta t}=\frac{3}{2}$

The code is:

[itex]
<mfrac>
<mrow>
<mi>&#x3B4;</mi> <!--GREEK SMALL LETTER DELTA-->
<mi>d</mi>
</mrow>
<mrow>
<mi>&#x3B4;</mi> <!--GREEK SMALL LETTER DELTA-->
<mi>t</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mn>3</mn>
<mn>2</mn>
</mfrac>
[/itex]

Speed as Rate of Change
For the above table, and for the 2 seconds just before the end of the 5th second, the approximate speed is:

$\frac{\delta D}{\delta t}=\frac{5}{2}$

For any $\delta D$ and corresponding $\delta t$, as $\delta t$ decreases from 2s to 1s, $\delta D$ also decreases. For example, when $\delta t$ is 1.5s, $\delta D$ may be 3.7 meters, decreased from 5 meters. As the decrease continuous until $\delta t$ is 1s (the measuring interval for speed), $\delta D$ will be 2 meters, giving the speed we know for the first second, which is 2m/s.

Well, know that speed (i.e. v) is not denoted by $\frac{\delta D}{\delta t}$ . It is denoted by,

$\frac{dD}{dt}$

So you would have,

$v=\frac{dD}{dt}$

where v and $\frac{dD}{dt}$ mean the same thing and are equal.

The code is,

[itex]
<mi>v</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mi>d</mi>
<mi>D</mi>
</mrow>
<mrow>
<mi>d</mi>
<mi>t</mi>
</mrow>
</mfrac>
[/itex]

In general terms (x and y) you would have something like,

$\frac{dy}{dx}=10x+25$

The code is:

[itex]
<mfrac>
<mrow>
<mo>d</mo>
<mi>y</mi>
</mrow>
<mrow>
<mo>d</mo>
<mi>x</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mrow>
<mn>10</mn>
<mi>x</mi>
<mo>+</mo>
<mn>25</mn>
</mrow>
[/itex]

Speed at an Instant of Time
As a car (object) is moving, the speed varies. So each instant of time (second) has its own speed. Occasionally there will be need for you to quote the speed at an instant. The speed at the time equal to 4 seconds in the previous table, is written as:

$\frac{dD}{dt}{|}_{t=4}=2\mathrm{m/s}$

Not the use of the bar and its subscript. The subscript is the instant (t=4). Read and try the code, which is:

[itex]
<mfrac>
<mrow>
<mo>d</mo>
<mi>D</mi>
</mrow>
<mrow>
<mo>d</mo>
<mi>t</mi>
</mrow>
</mfrac>
<msub>
<mo>|</mo>
<mrow>
<mi>t</mi>
<mo>=</mo>
<mn>4</mn>
</mrow>
</msub>
<mo>=</mo>
<mn>2</mn>
<mi>m/s</mi>
[/itex]

Second Derivative
First derivative is the general name for rate-of-change. An example of first derivative is speed. In the previous table, from the fourth second to the fifth second, the speed increases from 2m/s to 3m/s. This change of speed is called acceleration.

As a car moves it changes its speed. That is acceleration. Acceleration is an example of second derivative. Second derivative is rate of change of rate of change. You would see second derivative as in the following example:

$\frac{{d}^{2}y}{d{x}^{2}}=10{\mathrm{m/s}}^{2}$

Note the positions of the superscripts (2). The code is:

[itex]
<mfrac>
<mrow>
<msup><mo>d</mo><mn>2</mn></msup>
<mi>y</mi>
</mrow>
<mrow>
<mo>d</mo>
<msup><mi>x</mi><mn>2</mn></msup>
</mrow>
</mfrac>
<mo>=</mo>
<mn>10</mn>
<msup><mi>m/s</mi><mn>2</mn></msup>
[/itex]

Read and try it. You can have third, fourth, fifth derivatives with superscripts 3, 4, 5 etc.

Partial Differentiation
All the derivatives I have talked about above, is derivation of a variable with respect to a single variable. Consider the following statement:

$w=5{x}^{4}+4{y}^{3}+3{z}^{2}$

In this statement, w is a function (expression) of x, y and z. The function has three variables, and not just 1 on the right of the equal sign. You can differentiate w (the function) with respect to x alone, or with respect to x and y or with respect to x and y and z. That is partial derivative, where differentiation is not done with respect to one variable alone. Do not worry how the evaluation is done. Just learn how to identify the expressions, and code them with their appropriate MathML tags.

Derivative with respect to x and y can be written as follows:

$\frac{{\partial }^{2}w}{\partial x\partial y}=20{x}^{3}+12{y}^{2}+3{z}^{2}$

Note the partial deferential symbol. Also note the use of mrow elements to separate the partial derivatives for x and y at the denominator. The code is:

[itex]
<mfrac>
<mrow>
<msup><mo>&#x2202;<!--PARTIAL DIFFERENTIAL--></mo><mn>2</mn></msup>
<mi>w</mi>
</mrow>
<mrow>
<mrow><mo>&#x2202;<!--PARTIAL DIFFERENTIAL--></mo><mi>x</mi></mrow>
<mrow><mo>&#x2202;<!--PARTIAL DIFFERENTIAL--></mo><mi>y</mi></mrow>
</mrow>
</mfrac>
<mo>=</mo>
<mrow>
<mn>20</mn>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<msup>
<mi>x</mi>
<mn>3</mi>
</msup>
<mo>+</mo>
<mn>12</mn>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<msup>
<mi>y</mi>
<mn>2</mi>
</msup>
<mo>+</mo>
<mn>3</mn>
<mo>&#x2062;</mo> <!--INVISIBLE TIMES-->
<msup>
<mi>z</mi>
<mn>2</mi>
</msup>
</mrow>
[/itex]

Sinusoidal Functions
The integral of sin(x) is -cos(x), written as:

$\int \mathrm{sin}\left(x\right)=-\mathrm{cos}\left(x\right)$

Try to identify the expressions. The code is:

[itex]
<mrow><mo>&#x222b;<!--INTEGRAL--></mo>
<mi>sin</mi>
<mo>&#x2061;</mo> <!--APPLY FUNCTION-->
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
<mo>=</mo>
<mrow>
<mo>-</mo>
<mi>cos</mi>
<mo>&#x2061;</mo> <!--APPLY FUNCTION-->
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
[/itex]

The integral of cos(x) is sin(x), written as:

$\int \mathrm{cos}\left(x\right)=\mathrm{sin}\left(x\right)$

Try to identify the expressions. The code is:

[itex]
<mrow><mo>&#x222b;<!--INTEGRAL--></mo>
<mi>cos</mi>
<mo>&#x2061;</mo> <!--APPLY FUNCTION-->
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
<mo>=</mo>
<mrow>
<mi>sin</mi>
<mo>&#x2061;</mo> <!--APPLY FUNCTION-->
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
[/itex]

The derivative of sin(x) is cos(x), written as:

$\frac{d\mathrm{sin}\left(x\right)}{dx}=\mathrm{cos}\left(x\right)$

Try to identify the expressions. The code is,

[itex]
<mfrac>
<mrow>
<mo>d</mo>
<mi>sin</mi>
<mo>&#x2061;<!--FUNCTION APPLICATION--></mo>
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
<mrow>
<mo>d</mo>
<mn>x</mn>
</mrow>
</mfrac>
<mo>=</mo>
<mrow>
<mi>cos</mi>
<mo>&#x2061;<!--FUNCTION APPLICATION--></mo>
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
[/itex]

The derivative of cos(x) is –sin(x), written as,

$\frac{d\mathrm{cos}\left(x\right)}{dx}=-\mathrm{sin}\left(x\right)$

Try to identify the expressions. The code is,

[itex]
<mfrac>
<mrow>
<mo>d</mo>
<mi>cos</mi>
<mo>&#x2061;<!--FUNCTION APPLICATION--></mo>
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
<mrow>
<mo>d</mo>
<mn>x</mn>
</mrow>
</mfrac>
<mo>=</mo>
<mrow>
<mo>-</mo>
<mi>sin</mi>
<mo>&#x2061;<!--FUNCTION APPLICATION--></mo>
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
[/itex]

As you can see from all the above, coding mathematics is not difficult. You need to identify the expressions, and then use the appropriate MathML elements for the expressions.

Legal Issues
In a mathematical expression, the slightest change in number or script, or the using of a wrong identifier, or the omission of an operator, or parentheses, gives wrong result. In fact the slightest error gives wrong result. Before you publish any mathematics production, make sure the math author (scientist) proofreads it first. Otherwise charges may be levied against you by the users (readers).

That is it for this part of the series. We continue in the next part. We move on to code one of the most complex equations, called Schrodinger’s equation.

Chrys

Basics of HTML 5
Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language