2a:null 2b:["$","title",null,{"children":"The derivative | Mattias Villani | Observable"}] 31:T443,## The rate of change of a linear function The **rate of change** of a function ${tex`f(x)`} tells us how quickly the value of the function ${tex`y=f(x)`} changes when *x* changes. For a linear function ${tex`f(x)=k+bx`}, this rate of change is exactly the **slope** coefficient *b*.
To see this, let ${tex`\Delta x = x_2 - x_1`} be a change in the input *x* from a point ${tex`x_1`} to another point ${tex`x_2`}. Let ${tex`\Delta y = y_2 - y_1`} be the corresponding change in the function output, where ${tex`y_1=f(x_1)`} and ${tex`y_2=f(x_2)`}. Then, for a linear function, the **average rate of change** is ${tex.block`\frac{\Delta y}{\Delta x} = \frac{y_2-y_1}{x_2-x_1} = \frac{(k + b\cdot x_2) -(k + b\cdot x_1)}{x_2-x_1} = \frac{b( x_2 - x_1)}{x_2-x_1} = b`} Important: for a **linear function** ${tex`f(x)=k+bx`}, the effect of a ${tex`\Delta x`} change is the same value *b* **regardless of which *x* value we start at**. This is illustrated with the linear function ${tex`f(x) = 1 + 2x`} below; when *x* changes from 0 to 1 to 2, the changes on the *y*-axis are always *b=2*.32:T6d4,plt_linear = Plot.plot({ x: { label: "x", axis: true, domain: [-3,3] }, y: { label: "f(x)=1 + 2x", axis: true, domain: [-2,10], }, marks: [ Plot.ruleY([0]), Plot.ruleX([0]), // Plot y-axis stuff Plot.line([{x: 0, y: linearFunc(0)}, {x: 1, y: linearFunc(0)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4"}), Plot.line([{x: 0, y: linearFunc(1)}, {x: 1, y: linearFunc(1)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4"}), Plot.line([{x: 0, y: linearFunc(2)}, {x: 2, y: linearFunc(2)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: linearFunc(0)}, {x: 0, y: linearFunc(1)},{x: 0, y: linearFunc(2)}], {x: "x", y: "y", text: ['f(0) = 1', 'f(1) = 3','f(2) = 5'], dx: -20, fill: "black"}), // x-axis stuff Plot.line([{x: 0, y: 0}, {x: 0, y: linearFunc(0)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 1, y: 0}, {x: 1, y: linearFunc(1)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 2, y: 0}, {x: 2, y: linearFunc(2)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: 0}, {x: 1, y: 0},{x: 2, y: 0}], {x: "x", y: "y", text: ['x=0', 'x=1', 'x=2'], dx: 0, dy: 22, fill: "gray"}), // Plot function Plot.lineY(funcdataLinearIllustration,{x: "x", y: "y", stroke: colors[3]}), ] })33:T668,plt_square = Plot.plot({ x: { label: "x", axis: true, domain: [-3,3] }, y: { label: "f(x)=x^2", axis: true, domain: [-2,10], }, marks: [ Plot.ruleY([0]), Plot.ruleX([0]), // Plot y-axis stuff Plot.line([{x: 0, y: 1**2}, {x: 1, y: 1**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 0, y: 2**2}, {x: 2, y: 2**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: 0**2}, {x: 0, y: 1**2},{x: 0, y: 2**2}], {filter: showDeltas, x: "x", y: "y", text: ['f(0) = 0', 'f(1) = 1','f(2) = 4'], dx: -20, fill: "black"}), // x-axis stuff Plot.line([{x: 0, y: 0},{x: 0, y: 0**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 1, y: 0},{x: 1, y: 1**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 2, y: 0},{x: 2, y: 2**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: 0},{x: 1, y: 0},{x: 2, y: 0}], {filter: showDeltas, x: "x", y: "y", text: ['x=0', 'x=1', 'x=2'], dx: 0, dy: 22, fill: "gray"}), // Plot function and derivative line Plot.lineY(funcdata_square,{x: "x", y: "y", stroke: colors[3]}), //Plot.dot([{x: x, y: f(x)}],{x: "x", y: "y", fill: "steelblue", r: 4}), ] })34:T69d,plt_function_deltas = Plot.plot({ x: { label: "x", axis: false, domain: [-1,3] }, y: { label: "f(x)", axis: false, domain: [-2,10], }, marks: [ Plot.ruleY([0]), Plot.ruleX([0]), // Plot y-axis stuff Plot.line([{x: 0, y: simpleInputs[0]**2}, {x: simpleInputs[0], y: simpleInputs[0]**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: 0, y: (simpleInputs[0]+simpleInputs[1])**2}, {x: simpleInputs[0]+simpleInputs[1], y: (simpleInputs[0]+simpleInputs[1])**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: simpleInputs[0]**2}, {x: 0, y: (simpleInputs[0]+simpleInputs[1])**2}], {x: "x", y: "y", text: ['f(x)','f(x + Δx)'], dx: -20, fill: "black"}), // x-axis stuff Plot.line([{x: simpleInputs[0], y: 0}, {x: simpleInputs[0], y: simpleInputs[0]**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.line([{x: simpleInputs[0]+simpleInputs[1], y: 0}, {x: simpleInputs[0]+simpleInputs[1], y: (simpleInputs[0]+simpleInputs[1])**2}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: simpleInputs[0], y: 0},{x: (simpleInputs[0]+simpleInputs[1]), y: 0}], {x: "x", y: "y", text: ['x', 'x+Δx'], dx: 0, dy: 22, fill: "gray"}), // Plot function and derivative line Plot.lineY(funcdata_square,{x: "x", y: "y", stroke: colors[2]}), ] })35:T9ee,plt_func = Plot.plot({ x: { label: "x", axis: true, domain: xdomain }, y: { label: "f(x)", axis: true, domain: ydomain, }, marks: [ Plot.ruleY([0]), Plot.ruleX([0]), // Plot y-axis stuff Plot.line([{x: 0, y: secantline(x)},{x: x, y: secantline(x)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: 0, y: secantline(x)}, {x: 0, y: f(x+ deltax)}], {x: "x", y: "y", text: ['f(a)', "f(a+Δx)"], dx: -35, fill: "gray"}), Plot.line([{x: 0, y: f(x+deltax)},{x: (x+deltax), y: f(x+deltax)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4", label: "x"}), Plot.text([{x: x+deltax, y: (f(x+deltax) + f(x))/2, text: "Δy"}], {filter: showDeltas, x: "x", y: "y", dx: 20, text: "text", fontSize: 20, fill: "gray"}), // x-axis stuff Plot.line([{x: x, y: 0},{x: x, y: secantline(x)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4"}), Plot.line([{x: x + deltax, y: 0},{x: x + deltax, y: f(x + deltax)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4"}), Plot.line([{x: x + deltax, y: 0},{x: x + deltax, y: f(x + deltax)}], {x: "x", y: "y", stroke: "gray", strokeDasharray: "4,4"}), Plot.text([{x: x, y: 0}], {x: "x", y: "y", text: ['a'], dx: 0, dy: 22, fill: "gray"}), Plot.text([{x: x+deltax, y: 0}], {x: "x", y: "y", text: ['a+Δx'], dx: 0, dy: 22, fill: "gray"}), Plot.text([{x: x + deltax/2, y: 0.9*secantline(x), text: "Δx"}], {filter: showDeltas, x: "x", y: "y", text: "text", fontSize: 20, fill: "gray"}), Plot.areaY(funcdataLinear, {filter: d => showDeltas && d.x >= x && d.x <= (x + deltax), x: "x", y2: "y", y1: secantline(x), fill: colors[2], opacity: 0.1}), // Plot function and tangent line Plot.lineY(funcdata_dense, {x: "x", y: "y", stroke: colors[0], strokeWidth: 2.5}), Plot.line([{x: x - 0.1*xrange, y: secantline(x - 0.1*xrange)}, {x: x + deltax + 0.1*xrange, y: secantline(x + deltax + 0.1*xrange)}], {x: "x", y: "y", stroke: colors[2], strokeWidth: 2.5, label: "x"}), Plot.dot([{x: x, y: f(x)}, {x: x + deltax, y: f(x + deltax)}], {x: "x", y: "y", fill: colors[0], r: 3}), ] })36:T4ed,## Rules of differentiation The definition of the derivative as limit given above is rarely used when computing a derivative. There are instead **rules of differentiation** that can be used quite easily (of course, these rules were once proved using the formal definition of a derivative as a limit). For example, the derivative of the square function is a special case of the *power function rule*: ${tex.block`\text{The function }f(x) = x^r \text{ for some real number } r \text{ has derivative } f'(x) = r x^{r-1}`} Using the power rule we immediately see, for example, that the cubic function ${tex`f(x)=x^3`} has derivative ${tex`f'(x)=3x^2`}. To express these rules, it is convenient to use an alternative notation for the derivative of a function than the ${tex`f'(x)`} used so far. The alternative notation tries to mimic the average rate of change notation ${tex`\frac{\Delta y}{\Delta x}`}, but replaces the ${tex`\Delta`} (which is capital D in the greek alphabet) with smaller ${tex`\mathrm{d}`} symbol. The following three types of notations all denote the same derivative function ${tex.block`f'(x) \qquad \qquad \frac{\mathrm{d}f(x)}{\mathrm{d}x} \qquad \qquad \frac{\mathrm{d}}{\mathrm{d}x}f(x)`} Here are some other commonly used rules:37:T450,diff_rules_combinations = html`

Derivative of a combination of differentiable functions ${tex`f(x)`} and ${tex`g(x)`}

Constant rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x}\big( a f(x) \big) = a f'(x)`} for constant ${tex`a`}

Sum rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x}\big( f(x) + g(x) \big) = f'(x) + g'(x)`}

Product rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x}\big( f(x)g(x) \big) = f'(x)g(x) + f(x)g'(x)`}

Quotient rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x} \frac{f(x)}{g(x)} = \frac{f'(x)g(x)-f(x)g'(x)}{(g(x))^2} `}

Reciprocal rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x} \frac{1}{g(x)} = -\frac{g'(x)}{(g(x))^2} `}

Chain rule
${tex`\frac{\mathrm{d}}{\mathrm{d}x} f(g(x)) = f'(g(x))\cdot g'(x) `}

`38:T57f,These rule can be applied to more than two functions. For example, the sum rule for three differentiable functions ${tex`f(x)`}, ${tex`g(x)`} and ${tex`h(x)`} is ${tex.block`\frac{\mathrm{d}}{\mathrm{d}x}\big( f(x) + g(x) +h(x) \big) = f'(x) + g'(x) + h'(x)`} The reciprocal rule is a special case of the quotient rule (with ${tex`f(x)=1`}). The chain rule can be read as > The derivative of a composite function ${tex`f(g(x))`} is > - the *derivative of the outer function* ${tex`f'(x)`} evaluated at the *inner function* ${tex`g(x)`} > - multiplied by the *derivative of the inner function* ${tex`g'(x)`}. The chain rule is more useful than one might think on first reading. For example, the function ${tex`f(x)=e^{ax}`} can be seen as a composition of the exponential function ${tex`f(x)=e^x`} and the linear function ${tex`g(x)=ax`}. So combining the chain rule with derivatives of these two component functions (${tex`f'(x)= e^x`} and ${tex`g'(x)=a`}), we have ${tex.block`\frac{\mathrm{d}}{\mathrm{d}x}e^{ax} = e^{(ax)}\cdot a = a e^{ax}`} Similarly, the derivative of the logarithm of a differentiable function ${tex`g(x)`} can be computed with the chain rule; here the outer function is ${tex`f(x)=\ln x`} while the inner function is ${tex`g(x)`}. The derivative is ${tex.block`\frac{\mathrm{d}}{\mathrm{d}x}\ln g(x) = \frac{g'(x)}{g(x)}`} since if ${tex`f(x)=\ln x`} then ${tex`f'(x)=1/x`}.39:[] 2e:{"id":"cf2f369bde9ee3ae","slug":"the-derivative","title":"The derivative","thumbnail":"6fb6446e76ae4a9f3b4d4bd6d8d8904492f52b937bb846a227f5ab50138a5531","access_level":"public","create_time":"$D2025-02-02T15:28:40.326Z","update_time":"$D2026-03-26T09:43:11.081Z","view_time":null,"first_public_time":"$D2025-02-02T23:07:29.673Z","fork":{"id":"f4bcee1add8c851c","slug":"the-riemann-integral","title":"The Riemann integral","owner":{"id":"7592a7ab121f74a0","login":"mattiasvillani","name":"Mattias Villani"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7592a7ab121f74a0","login":"mattiasvillani","name":"Mattias Villani","avatar_url":"https://avatars-next.observableusercontent.com/a440aaf39a3abefb86cbcc758fd7a5ab42555ae68d6825b52ec006f385a94d1d","tier":"pro_2024"},"version":3451,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56499be8cf43f0ef","login":"mattiasvillani","name":"Mattias Villani","avatar_url":"https://avatars-next.observableusercontent.com/a440aaf39a3abefb86cbcc758fd7a5ab42555ae68d6825b52ec006f385a94d1d","tier":null}],"members":[{"type":"individual","id":"56499be8cf43f0ef","login":"mattiasvillani","name":"Mattias Villani","avatar_url":"https://avatars-next.observableusercontent.com/a440aaf39a3abefb86cbcc758fd7a5ab42555ae68d6825b52ec006f385a94d1d","tier":null,"role":"editor"},{"type":"team","id":"7592a7ab121f74a0","login":"mattiasvillani","name":"Mattias Villani","avatar_url":"https://avatars-next.observableusercontent.com/a440aaf39a3abefb86cbcc758fd7a5ab42555ae68d6825b52ec006f385a94d1d","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"10fcfcb3f60db359","slug":"basic-maths","title":"Basic Mathematics","owner":{"id":"7592a7ab121f74a0","login":"mattiasvillani","name":"Mattias Villani"}},"type":"notebook","body":{"title":"The derivative","cells":[{"id":38,"value":"# The derivative\n\n> *This notebook explains how a **derivative** measures how much the output of a function ${tex`y=f(x)`} changes as we change its input value ${tex`x`}, and how this can be used to approximate a nonlinear function with a linear one. Buckle up!* 🎢","pinned":false,"hidden":false,"mode":"md"},{"id":2151,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":3068,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2923,"value":"## Rate of change of a nonlinear function\n\nThe rate of change of a nonlinear function is *not* the same for all inputs *x*. A nonlinear function can change a lot for some *x*-values and be nearly constant at other *x*-values. For example, consider the square function ${tex`f(x)=x^2`} (see the figure below) where\n- a change from ${tex`x = 0`} to ${tex`x = 1`} gives a change from ${tex`f(0)= 0`} to ${tex`f(1)= 1`}.
\n- a change from ${tex`x = 1`} to ${tex`x = 2`} gives a change from ${tex`f(1)= 1`} to ${tex`f(2)= 4`}.
\n \nSo, just how much the square function changes when we change its input by ${tex`\\Delta x = 1`} depends on *where* we are on the *x*-axis.","pinned":false,"hidden":false,"mode":"md"},{"id":2671,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2734,"value":"Before explaining how we measure the local rate of change of a nonlinear function, it is useful to express the average rate of change ${tex`\\frac{\\Delta y}{\\Delta x}`} so that we see the function ${tex`f(x)`} explicitly. Let the function input start at some value ${tex`x`} and then move ${tex`\\Delta x`} units to another value ${tex`x+\\Delta x`}. The change along the *y*-axis is then \n${tex.block`\\Delta y = f(x + \\Delta x) - f(x)`}\nWe can therefore write the average rate of change in terms of the function as\n${tex.block`b = \\frac{\\Delta y}{\\Delta x} = \\frac{f(x + \\Delta x) - f(x)}{\\Delta x}`}\n\nThe figure below illustrates.","pinned":false,"hidden":false,"mode":"md"},{"id":2767,"value":"viewof simpleInputs = Inputs.form([\n Inputs.range([0,2], {label: tex`x`, value: 1, step: 0.1}),\n Inputs.range([0.01, 1], {label: tex`\\Delta x`, value: 1, step: 0.01})\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2752,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"paragraph1 = md`## The derivative\nThe **derivative** of a function ${tex`f(x)`} at ${tex`x=a`} measures the **instantaneous rate of change**, or **local slope**, of the function at ${tex`x=a`}. Note that we are saying *local* since the rate of change of a nonlinear function is not the same for all *x*. \n\nThe derivative at *x* uses the same idea of a rate of change as we saw for a linear function:\n${tex.block`\\frac{\\Delta y}{\\Delta x}`}\nbut where the change in *x*, ${tex`\\Delta x`}, is extremely small. In fact, the definition of a derivative lets ${tex`\\Delta x`} approach zero, in the form of a *mathematical limit*^{[[1](#footnote1)]}. It is common to use the letter ${tex`h`} instead of ${tex`\\Delta x`} to denote a change along the *x*-axis, and we will do so in the following defintion.\n`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2994,"value":">

**Definition (derivative)**: The derivative of a function ${tex`f(x)`} at *x=a* is\n ${tex.block`f'(a) = \\lim_{h \\rightarrow 0}\\frac{f(a + h) - f(a)}{h}`}\nprovided the limit exists.
\n\nViewed across all possible *x*-values, the derivative is itself a function of *x*; the symbol ${tex`f'(x)`} denotes that function, and is a function that you can evaluate for any *x*-value to obtain the derivative at that point.","pinned":false,"hidden":false,"mode":"md"},{"id":2837,"value":">

**Example**. Let us try to use the definition to compute the derivative of the square function ${tex`f(x)=x^2`}. From the definition above\n${tex.block`\\footnotesize \\frac{f(x + h) - f(x)}{h} = \\frac{(x + h)^2 - x^2}{h} = \\frac{(x^2 + 2xh + h^2) - x^2}{h} = \\frac{ 2xh + h^2}{h} = 2x + h`}\nwhich clearly approaches ${tex`2x`} when ${tex`h \\rightarrow 0`}. \n
So the derivative of the square function ${tex`f(x)=x^2`} is ${tex`f'(x)=2x`}.
\nWe can compute the derivative at any ${tex`x`}-value, for example at ${tex`x=2`}, where ${tex`f'(2)=2 \\cdot 2 = 4`}.","pinned":false,"hidden":false,"mode":"md"},{"id":3210,"value":"Note that the limit in the definition of the derivative may not exist at some *x* values, for example at points where the function jumps.\n\nThe derivative can be used in a **linear approximation** of the function ${tex`f(x)`} around some **expansion point** ${tex`x = a`}\n${tex.block`f(x) \\approx f(a) + f'(a)(x-a).`} \nThe approximation becomes more accurate the closer *x* is to the expansion point *a*; it is a *local* linear approximation around ${tex`x = a`}. This idea can be generalized to include so called higher order derivative in the famous [Taylor approximation](https://observablehq.com/@mattiasvillani/taylor-approximation), but that is another story.","pinned":false,"hidden":false,"mode":"md"},{"id":2627,"value":"deriv_anchor = md`## Derivative - an interactive visualization\nThe widget below lets you visualize how the average rate of change of the function ${tex`\\frac{\\Delta y}{\\Delta x}`} gets closer and closer to the derivative ${tex`f'(a)`} at some chosen *x=a* when ${tex`\\Delta x`} goes to zero.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"viewof funcname = Inputs.select([\"linear\", \"exp\", \"log\", \"square\", \"cube\", \"sin\"], {value: \"exp\", label: \"Function\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2192,"value":"viewof xlinearInputs = Inputs.form([\n Inputs.range([xdomain[0] + maxdeltax, xdomain[1] - maxdeltax], {label: tex`a`, value: 1.2, step: 0.1}),\n Inputs.range([0.001, maxdeltax], {label: tex`\\Delta x`, value: 0.5, step: 0.001}),\n Inputs.toggle({label: \"Show Δy/Δx\", value: true})\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2037,"value":"Derivative at ${tex`x=a`}: ${tex`f'(a) = `} ${derivative(x).toFixed(4)}
\nAverage rate of change: ${tex`\\frac{\\Delta y}{\\Delta x} = \\frac{f(a+\\Delta x) -f(a)}{\\Delta x} = ${( (f(x+deltax)-f(x))/(deltax) ).toFixed(4)}`}
\n","pinned":false,"hidden":false,"mode":"md"},{"id":1713,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2651,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":3253,"value":"diff_rules = html`

\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n

Derivative of elementary functions

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}a = 0`} for constant ${tex`a`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}(a + bx) = b`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}x^n = n x^{n-1}`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}e^x = e^x`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}\\ln(x) = \\frac{1}{x}`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}\\frac{1}{x} = -\\frac{1}{x^2}`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}\\cos(x) = -\\sin(x)`}

${tex`\\frac{\\mathrm{d}}{\\mathrm{d}x}\\sin(x) = \\cos(x)`}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3360,"value":"Many functions are combinations (e.g. sums, products or compositions) of elementary functions. For example, the damped sine function ${tex`e^{-x}\\sin(x)`} is the product of the exponential function and the sine function. The 2rd degree polynomial ${tex`f(x) = a + bx + cx^2`} is a linear combination (weighted sum) of the constant ${tex`f(x) = a`}, the linear ${tex`g(x) = bx`} and the quadratic function ${tex`h(x)=cx^2`}. The following rules can then be used, combined with the above rules for derivatives of elementary functions.","pinned":false,"hidden":false,"mode":"md"},{"id":3286,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3327,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":2989,"value":"## Footnotes","pinned":false,"hidden":false,"mode":"md"},{"id":2983,"value":"\nfootnote1 = md`1. [^](#paragraph1) \nThe definition of the derivative ${tex`f'(x)`} as a [mathematical limit](https://en.wikipedia.org/wiki/Limit_of_a_function)\n${tex.block`f'(x) = \\lim_{h \\rightarrow 0}\\frac{f(x+h) - f(x)}{h}`}\nmeans that for every ⁠${tex`\\varepsilon>0`} there exists a ${tex`\\delta>0`} such that\n${tex.block`\\Bigg\\vert f'(x) - \\frac{f(x+h) - f(x)}{h} \\Bigg\\vert < \\varepsilon`}\nfor every ${tex`\\vert h \\vert < \\delta`}. \n\nThis so called ${tex`(\\varepsilon,\\delta)`}-construction means that, when the derivative exists:\n- no matter how small our tolerance is for approximation errors (*for every ${tex`\\varepsilon > 0`}*)\n- ... we can always find a small enough ${tex`h`} that makes the approximation acceptable (*there exists a ${tex`\\delta > 0`}*).\n\nWhen we cannot find such a ${tex`\\delta`} for every ${tex`\\varepsilon`} we say that the derivative (limit) does not exist at *x*.\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n---\n## 🙈 Appendix 🙈\n\nHere is some code and data details that you probably do not want to read.","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1375,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2419,"value":"import {colors} from \"@mattiasvillani/statistics-tools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"jstat = require('jstat')","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"mathjs = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":2536,"value":"maxdeltax = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"x = xlinearInputs[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2201,"value":"deltax = xlinearInputs[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2447,"value":"showDeltas = xlinearInputs[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"f = {\n if (funcname == \"linear\"){\n return function(x){return x}\n }else if(funcname == \"exp\"){\n return function(x){return Math.exp(x)}\n }else if(funcname == \"log\"){\n return function(x){return Math.log(x)}\n }else if(funcname == \"square\"){\n return function(x){return x**2}\n }else if(funcname == \"cube\"){\n return function(x){return x**3}\n }else if(funcname == \"gaussian\"){\n return function(x){return (1/Math.sqrt(2*Math.PI))*Math.exp(-0.5*x**2)}\n }else{\n return function(x){return Math.sin(x)}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1975,"value":"latexfunc = {\n if (funcname == \"linear\"){\n return tex`x`\n }else if(funcname == \"exp\"){\n return tex`\\exp(x)`\n }else if(funcname == \"log\"){\n return tex`\\log(x)`\n }else if(funcname == \"square\"){\n return tex`x^2`\n }else if(funcname == \"cube\"){\n return tex`x^3`\n }else if(funcname == \"gaussian\"){\n return tex`\\frac{1}{\\sqrt{2\\pi}}\\exp(-\\frac{1}{2}x^2)`\n }else{\n return tex`\\sin(x)`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"derivative = {\n if (funcname == \"linear\"){\n return x => 1 \n }else if(funcname == \"exp\"){\n return x => Math.exp(x)\n }else if(funcname == \"log\"){\n return x => 1/x\n }else if(funcname == \"square\"){\n return x => 2*x\n }else if(funcname == \"cube\"){\n return x => 3*x**2\n }else{\n return x => Math.cos(x)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2333,"value":"bDeriv = derivative(x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2335,"value":"aDeriv = f(x) - bDeriv*x","pinned":false,"hidden":false,"mode":"ojs"},{"id":3077,"value":"linearFunc = function(x){return 1 + 2*x}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3074,"value":"funcdataLinearIllustration = {\n return d3.range(xdomain[0] , 3 , 0.01).map(x => ({x: x, y: linearFunc(x)}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2588,"value":"funcdataLinear = {\n return d3.range(xdomain[0] , xdomain[1] , 0.01).map(x => ({x: x, y: secantline(x)}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"funcdata_dense = {\n return d3.range(xdomain[0], xdomain[1], 0.01).map(d => ({x: d, y: f(d), \n yDerivMin: f(d) - derivative(d)*(maxdeltax), \n yDerivMax: f(d) + derivative(d)*(maxdeltax)\n }\n )\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"funcdata_square = {\n return d3.range(-3, 3, 0.01).map(d => ({x: d, y: d**2, \n yDerivMin: f(d) - derivative(d)*(maxdeltax), \n yDerivMax: f(d) + derivative(d)*(maxdeltax)\n }\n )\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"xdomain_base = {\n if (funcname == \"log\"){\n return [maxdeltax+0.1, 5]\n }\n if (funcname == \"linear\"){\n return [-2,5]\n }\n if (funcname == \"exp\"){\n return [-1,1]\n }\n if (funcname == \"cube\"){\n return [-2,2]\n }\n if (funcname == \"sin\"){\n return [-3,3]\n }\n else{\n return [-5,5]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2566,"value":"xdomain = [xdomain_base[0] - maxdeltax, xdomain_base[1] + maxdeltax]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3398,"value":"xrange = xdomain[1] -xdomain[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"ydomain = {\n return [\n Math.round(d3.min(funcdata_dense.filter(d => d.x >= xdomain[0]+ maxdeltax && d.x <= xdomain[1] - maxdeltax)\n .map(d => d3.min([d.y, d.yDerivMin])))), \n Math.round(d3.max(funcdata_dense.filter(d => d.x >= xdomain[0]+ maxdeltax && d.x <= xdomain[1] - maxdeltax)\n .map(d => d3.max([d.y, d.yDerivMax]))))\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"limits = [xdomain[0]+0.5,xdomain[1]+0.5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3403,"value":"function secantline(z){\n const slope = ( f(x+deltax) - f(x) )/deltax\n return f(x) + slope*(z-x)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"#### Style","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2f:"$2e:body"