Integral of a Staircase function

Integral of a staircase function:

Let $\varphi : [a, b] \to \mathbb{R}$ be a staircase function with respect to the partition
$Z : a = x_0 < \dots < x_n = b$ of $[a, b]$ , and let $c_1, \dots, c_n \in \mathbb{R}$ be such that
$\varphi(x) = c_i$ for $x \in (x_{i-1}, x_i)$ and $i = 1, \dots, n$ .
Then the integral of $\varphi$ is defined by

I(\varphi) := I_Z(\varphi) := \sum_{i=1}^n c_i \cdot (x_i - x_{i-1}).

Integral of a staircase function is independent of the choice of partition:

Let $\varphi : [a, b] \to \mathbb{R}$ be a staircase function with respect to the partitions
$Z_1 : a = x_0 < \dots < x_n = b$ and $Z_2 : a = y_0 < \dots < y_n = b$ of $[a, b]$ .
Then we have

I_{Z_1}(\varphi) = I_{Z_2}(\varphi),

How to use

Visualize the integral of a staircase function
$I_Z(\varphi)=\sum_i c_i\,(x_i-x_{i-1})$
as a sum of signed rectangle areas.
Check that the value of the integral does not depend on whether you compute it using partition $Z_1$ , partition $Z_2$ , or their common refinement.
Drag the blue points $a$ and $b$ on the $x$ -axis to choose the integration interval.
- The applet always uses $[\min(a,b),\max(a,b)]$ .
Use the buttons:
- Z1 [ON/OFF] to show/hide partition $Z_1$ ,
- Z2 [ON/OFF] to show/hide partition $Z_2$ .
- Turning both on shows their union, i.e. a refinement.
The blue staircase is the function $\varphi$ (piecewise constant, with jumps).
Vertical partition marks indicate the active partition points:
- orange marks: cuts coming from $Z_1$ ,
- purple marks: cuts coming from $Z_2$ ,
- purple dashed marks: cuts that belong to both partitions (overlap).
The shaded rectangles represent the terms $c_i\,(x_i-x_{i-1})$ :
- rectangles above the $x$ -axis contribute positively,
- rectangles below the $x$ -axis contribute negatively.
The text at the bottom shows the current total:
- Partition Z1: I = ..., or
- Partition Z2: I = ..., or
- Refinement Z: I = ... (when both are active).
Inside each rectangle, a small label shows the numerical value of that sub-interval contribution (after you release the mouse).
Turn Z1 ON (and Z2 OFF): observe the rectangles and the displayed total $I_{Z_1}(\varphi)$ .
Turn Z2 ON (and Z1 OFF): observe the new rectangles and the displayed total $I_{Z_2}(\varphi)$ .
Turn both ON: the applet uses the refinement (union of all cuts), producing more (thinner) rectangles.
Compare the totals: even though the individual rectangles change when you change partition, the final total stays the same (up to rounding), illustrating
$I_{Z_1}(\varphi)=I_{Z_2}(\varphi).$
Drag $a$ and $b$ so that the interval crosses a jump of the staircase: notice how the sum changes exactly when the interval includes more (or less) constant pieces.
If you turn both partitions OFF, the applet cannot form a sum and shows “Select a partition”.

Loading graph…

Hold Shift + scroll to zoom
Hold Shift + drag to move
Points shaped like <> act as sliders

Description

Link to code.

Reference: Lecture Notes Calculus 1 ( May22,2022 )Definition 7.1 page 121 and Theorem7.1 page 123

This applet illustrates the definition of partitions, refinement and integral of a staircase functions.

I selected a staircase function (to be integrated) by prescribed jump points and corresponding constant values on each interval.

const stepJumps = [-4, -1, 2, 5, 8];
const stepValues = [1.5, -2, 2.5, -1];
const phi = makeStepFunction(stepJumps, stepValues);

Two different partitions of the interval are considered: the partition $Z_1$ , consisting of all points in $[a,b]$ that are multiples of $2$ , and the partition $Z_2$ , consisting of all points in $[a,b]$ that are multiples of $3$ . Since these partitions partially overlap, their combination naturally produces a refinement, which is displayed when both partitions are active.

Toggle buttons allow each partition to be shown independently or simultaneously. When both are active, the applet highlights the refinement obtained by taking the union of their cuts. Vertical lines indicate partition points, while shaded rectangles represent the contribution of each subinterval to the integral.

By dragging the endpoints $𝑎$ and $𝑏$ , the interval of integration can be modified dynamically. The applet always integrates on $[min⁡(a,b),max⁡(a,b)][min(a,b),max(a,b)]$ , so the order of the two gliders does not matter.

During dragging, the partition cuts and areas are updated continuously; once the drag ends, the sum of each subinterval and their total sum are displayed.

For each subinterval $(t_i,t_{i+1})$ the code picks the midpoint $\xi_i=\frac{t_i+t_{i+1}}{2}$ and computes the rectangle contribution $\varphi(\xi_i)(t_{i+1}-t_i)$ , i could reuse the stored values, but i need a mid point to place the sum text.

   const mid = (x1 + x2) / 2;
   const h = phi(mid);
   const subArea = h * (x2 - x1);
   total += subArea;

This visual behavior mirrors the proof that the integral of a staircase function is independent of the chosen partition.