2a:null 2b:["$","title",null,{"children":"A function and its derivatives | Mattias Villani | Observable"}] 31:T523,Plot.plot({ title: latexfunc, color: { legend: true, domain: plotlabels.labels, range: plotlabels.colors }, x: { label: "x", axis: true, domain: xdomain }, y: { label: "f(x)", axis: true, domain: ydomain }, grid: add_derivatives[3], marks: [ Plot.ruleY([0]), //Plot.ruleX([0]), Plot.lineY(funcdata, {filter: add_derivatives[1], x: "x", y: "fbiss", stroke: colors[2], strokeWidth: 3,}), Plot.lineY(funcdata, {filter: add_derivatives[0], x: "x", y: "fprime", stroke: colors[1], strokeWidth: 3}), Plot.lineY(funcdata, {x: "x", y: "f", stroke: colors[0], strokeWidth: 3}), Plot.text([{x: -2.3, y: -0.5}], {filter: funcname == 'abs' && (add_derivatives[0] || add_derivatives[1]), x: "x", y: "y", text: ["derivatives do not exist at x=0"], fill: "black"}), Plot.arrow([{x1: -1, y1: -0.5, x2: -0.1, y2: -0.08}], {filter: funcname == 'abs' && (add_derivatives[0] || add_derivatives[1]), x1: "x1", y1: "y1", x2: "x2", y2: "y2", bend: -22.5, stroke: "black"}), Plot.tip(funcdata, Plot.pointerX({ filter: add_derivatives[2], x: "x", y: "f", title: (d) => tiplabels(d, add_derivatives).join("\n") })) ] })32:Tc1e,latexfunc = { if (funcname == "linear"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = x}` if (add_derivatives[0]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[1]}}{f'(x) = 1}`)} if (add_derivatives[1]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[2]}}{f''(x) = 0}`)} return funcsymbol }else if(funcname == "exp"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = \exp(x)}` if (add_derivatives[0]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[1]}}{f'(x) = \exp(x)}`)} if (add_derivatives[1]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[2]}}{f''(x) = \exp(x)}`)} return funcsymbol }else if(funcname == "log"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = \log(x)}` if (add_derivatives[0]){funcsymbol.append(tex`\textcolor{${colors[1]}}{\qquad\qquad f'(x) = \frac{1}{x}}`)} if (add_derivatives[1]){funcsymbol.append(tex`\textcolor{${colors[2]}}{\qquad\qquad f''(x) = -\frac{1}{x^2}}`)} return funcsymbol }else if(funcname == "square"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = x^2}` if (add_derivatives[0]){funcsymbol.append(tex`\textcolor{${colors[1]}}{\qquad\qquad f'(x) = 2x}`)} if (add_derivatives[1]){funcsymbol.append(tex`\textcolor{${colors[2]}}{\qquad\qquad f''(x) = 2}`)} return funcsymbol }else if(funcname == "cubic"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = x^3}` if (add_derivatives[0]){funcsymbol.append(tex`\textcolor{${colors[1]}}{\qquad\qquad f'(x) = 3x^2}`)} if (add_derivatives[1]){funcsymbol.append(tex`\textcolor{${colors[2]}}{\qquad\qquad f''(x) = 6x}`)} return funcsymbol }else if(funcname == "sqrt"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = \sqrt{x}}` if (add_derivatives[0]){funcsymbol.append(tex`\textcolor{${colors[1]}}{\qquad\qquad f'(x) = -\frac{1}{2x^{1/2}}}`)} if (add_derivatives[1]){funcsymbol.append(tex`\textcolor{${colors[2]}}{\qquad\qquad f''(x) = \frac{1}{4x^{3/2}}}`)} return funcsymbol }else if(funcname == "cos"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = \cos(x)}` if (add_derivatives[0]){funcsymbol.append(tex`\textcolor{${colors[1]}}{\qquad\qquad f'(x) = -\sin(x)}`)} if (add_derivatives[1]){funcsymbol.append(tex`\textcolor{${colors[2]}}{\qquad\qquad f''(x) = -\cos(x)}`)} return funcsymbol }else if(funcname == "abs"){ let funcsymbol = tex`\textcolor{${colors[0]}}{f(x) = \vert x \vert}` if (add_derivatives[0]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[1]}}{ f'(x) = \frac{x}{\vert x \vert}\text{ for }x \neq 0}`)} if (add_derivatives[1]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[2]}}{ f''(x) = 0\text{ for }x \neq 0}`)} return funcsymbol }else{ let funcsymbol = tex`f(x) = \textcolor{${colors[0]}}{\sin(x)}` if (add_derivatives[0]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[1]}}{f'(x) = \cos(x)}`)} if (add_derivatives[1]){funcsymbol.append(tex`\qquad\qquad \textcolor{${colors[2]}}{f''(x) = -\sin(x)}`)} return funcsymbol } }33:[] 2e:{"id":"32fd1a513378ecaa","slug":"some-functions-and-their-derivatives","title":"A function and its derivatives","thumbnail":"af401dc8ec174becd048c93572f12b242755fc9fbcee0dcb331ddcc9ff80e606","access_level":"public","create_time":"$D2025-03-12T16:12:46.955Z","update_time":"$D2025-04-11T13:53:01.173Z","view_time":null,"first_public_time":"$D2025-03-12T16:51:42.967Z","fork":false,"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":521,"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":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"10fcfcb3f60db359","slug":"basic-maths","title":"Basic Mathematics","owner":{"id":"7592a7ab121f74a0","login":"mattiasvillani","name":"Mattias Villani"}},"type":"notebook","body":{"title":"A function and its derivatives","cells":[{"id":0,"value":"# A function and its derivatives","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"> *This notebook plots a function ${tex`\\textcolor{${colors[0]}}{f(x)}`} with its first ${tex`\\textcolor{${colors[1]}}{f'(x)}`} and second derivatives ${tex`\\textcolor{${colors[2]}}{f''(x)}`}*","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"Select a function from the drop-down menu, and select if its first and second derivative functions should be shown. By clicking on *show plot tip* you can see the exact values of the function and its derivative at any point by hovering the mouse over the graph.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"viewof funcname = Inputs.select([\"linear\", \"exp\", \"log\", \"square\", \"cubic\", \"sqrt\", \"abs\", \"sin\", \"cos\"], {value: \"cube\", label: \"Function f(x)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof add_derivatives = Inputs.form([\n Inputs.toggle({label: tex`\\text{plot } f'(x)`, value: false}),\n Inputs.toggle({label: tex`\\text{plot } f''(x)`, value: false}),\n Inputs.toggle({label: tex`\\text{show plot tip }`, value: false}),\n Inputs.toggle({label: tex`\\text{show gridlines }`, value: true})\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n---\n## 🙈 Appendix 🙈\n\nHere is only code and details that you probably don't want to read.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"mathjs = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"import {colors} from \"@mattiasvillani/statistics-tools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"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 == \"cubic\"){\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 if(funcname == \"sqrt\"){\n return function(x){return Math.sqrt(x)}\n }else if(funcname == \"abs\"){\n return function(x){return Math.abs(x)}\n }else if(funcname == \"cos\"){\n return function(x){return Math.cos(x)}\n }else{\n return function(x){return Math.sin(x)}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"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 == \"cubic\"){\n return x => 3*x**2\n }else if(funcname == \"sqrt\"){\n return function(x){return (1/2)*x**(-1/2)}\n }else if(funcname == \"abs\"){\n return function(x){return (x>0)? 1 : ((x<0)? -1 : NaN)}\n }else if(funcname == \"cos\"){\n return function(x){return -Math.sin(x)}\n }else{\n return x => Math.cos(x)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"derivative2 = {\n if (funcname == \"linear\"){\n return x => 0 \n }else if(funcname == \"exp\"){\n return x => Math.exp(x)\n }else if(funcname == \"log\"){\n return x => -1/(x** 2)\n }else if(funcname == \"square\"){\n return x => 2\n }else if(funcname == \"cubic\"){\n return x => 6*x\n }else if(funcname == \"sqrt\"){\n return function(x){return (-1/4)*x**(-3/2)}\n }else if(funcname == \"abs\"){\n return function(x){return x == 0? NaN : 0}\n }else if(funcname == \"cos\"){\n return function(x){return -Math.cos(x)}\n }else{\n return x => -Math.sin(x)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"xdomain = {\n if (funcname == \"log\"){\n return [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 == \"cubic\"){\n return [-2,2]\n }\n if (funcname == \"sqrt\"){\n return [0.01,5]\n }\n if (funcname == \"abs\"){\n return [-5,5]\n }\n if (funcname == \"tan\"){\n return [-5,5]\n }\n if (funcname == \"cos\"){\n return [-2*Math.PI,2*Math.PI]\n }\n if (funcname == \"sin\"){\n return [-2*Math.PI,2*Math.PI]\n }\n else{\n return [-5,5]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"funcdata = {\n const ngrid = 500;\n let funcval = [];\n const xgrid = d3.range(xdomain[0], xdomain[1], (xdomain[1] - xdomain[0])/ngrid)\n for (let i = 0; i < ngrid; ++i) {\n funcval.push({x: xgrid[i], f: f(xgrid[i]), fprime: derivative(xgrid[i]), fbiss: derivative2(xgrid[i])})\n }\n return funcval\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"plotlabels = {\n let labels = [\"f(x)\"];\n let labelColors = [colors[0]]\n if (add_derivatives[0]){\n labels.push(\"f'(x)\")\n labelColors.push(colors[1])\n }\n if (add_derivatives[1]){\n labels.push(\"f''(x)\")\n labelColors.push(colors[2])\n }\n return {labels: labels, colors: labelColors}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"ydomain = {\n if (!add_derivatives[0] && !add_derivatives[1]){\n return d3.extent(funcdata.map(d => d.f))\n }else if (add_derivatives[0] && !add_derivatives[1]){\n return d3.extent(funcdata.map(d => d.f).concat(funcdata.map(d => d.fprime)))\n }else{\n return d3.extent(funcdata.map(d => d.f).concat(funcdata.map(d => d.fprime)).concat(funcdata.map(d => d.fbiss)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"tiplabels = function(d, add_derivatives){\n let labels = [`x=${d.x.toFixed(3)}`, `f(x)=${d.f.toFixed(3)}`]\n if (add_derivatives[0]){labels.push(`f'(x)=${d.fprime.toFixed(3)}`)}\n if (add_derivatives[1]){labels.push(`f''(x)=${d.fbiss.toFixed(3)}`)}\n return labels\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"