31:T5ec,chart1 = { const f = sumOf(func.lambda, degree, func.n0) let x = xSampleValue const y = Math.max(func.range.interval[0], Math.min(func.range.interval[1], f(x))) const xPastMiddle = Math.round(x * 1e5)/1e5 > d3.mean(func.domain.interval) return Plot.plot({ marks: [ Plot.ruleY([0], { stroke: '#ddd' }), taylorPlot, Plot.circle( [{x, y, type: 'func'}, {x, y: func.benchmark(x), type: 'benchmark'}], { x: 'x', y: 'y', r: ({type}) => type === 'func', fill: ({type}) => colors[type], stroke: ({type}) => type === 'func' ? 'white' : 'none', strokeWidth: 1.5, opacity: ({type}) => type === 'func' ? 1/2 : 1, }), benchmarkPlot, Plot.text( [`ƒ(${xSampleFormat(x, true)}) = ${f(x).toFixed(3)}\nSee slider and chart below`], { x, y, fill: colors.func, stroke: 'white', strokeWidth: 4, fontSize: 8 + (width > 500 ? 3 : 0), fontWeight: '600', textAnchor: xPastMiddle ? 'end' : 'start', dx: 6 * (xPastMiddle ? '-1' : '1'), dy: 20 * (f(x) > f(x*.999) ? 1 : -1) * (x === 0 ? -1 : Math.abs(x) / x) * (xPastMiddle ? -1 : 1) } ), ], width, height: Math.max(200, width / 3), marginTop: 32, marginBottom: 32, x: { ...axisFor(func.domain), grid: true, label: 'x' }, y: { ...axisFor(func.range), label: 'f(x)' }, r: { range: [3, 8] }, }) }32:T4f4,{ const { sign, numeratorExp, denominatorVal, factorialize } = func.terms const n0 = func.n0 || 0 let x = xSampleValue let series = d3.range(func.n0 || 0, width / 10).map(n => func.lambda(x, n)) const sum = d3.sum(series.map(Math.abs)) const threshold = 1e-3 while(series.length > (/*degree+1 ||*/ 2)) { if (Math.abs(series[series.length - 1] / sum) > threshold) { break } series.pop() } let isBlank = false if (series.every(v => Math.abs(v) < 1e-4)) { isBlank = true series = series.map(v => void(0)) } const barWidth = width / series.length return Plot.plot({ marks: [ isBlank ? Plot.barY(series) : Plot.barY( series.map((λ, i) => ({ λ, n: i + n0, included: i < degree })), { x: 'n', y: 'λ', fill: d => d.included ? colors.series : '#ccc' } ) ], width, height: Math.max(200, width / 3), y: { grid: true, label: `λ(${xSampleFormat(x, true)})` }, x: { tickFormat: n => ( n === n0 || n === n0 + series.length - 1 ? 'n='+n : n % (barWidth < 15 ? 3 : 2) !== 0 && barWidth < 25 ? '' : n ), label: `n (truncated where λ(n) is < ${threshold * 100}% of then sum of magnitudes of all λ's)` }, }) }33:Tb84,{ const lnXPlus1 = functions.find(({benchmark}) => benchmark.toString() === 'x => Math.log(1 + x)'), cosX = functions.find(({benchmark}) => benchmark === Math.cos), oneOverOnePlusX = functions.find(({benchmark}) => benchmark.toString() === 'x => 1 / (1 - x)') const linkCss = { 'font-size': '.8em' } return md` Using this visualization, here are some observations: - The increasing influence of the long tail of terms in the Taylor Series of ${tex`\color{${colors.benchmark}} f(x)=${lnXPlus1.label()}`} as it approaches the asymptote at ***x = *** **-1**. ${ htl.html` setupView({ func: lnXPlus1, degree: 20, xSampleValue: -0.99})}>Show Me…` } - The large contribution of higher-order terms (***n = *** **3, 4, 5**) to the approximated value of ${tex`\color{${colors.benchmark}} f(x)=${cosX.label()}`} as ***x*** moves away from **0**, and the lack of accuracy caused by ignoring even the small terms at the end (***n = *** **7, 8**). ${ htl.html` setupView({ func: cosX, degree: 7, xSampleValue: 2.3 * Math.PI})}>Show Me…` } - The approach of all the Taylor terms to **1** as ***x*** approaches the asymptote at ***x = *** **1** in the function ${tex`\color{${colors.benchmark}} f(x)=${oneOverOnePlusX.label()}`}. This is why its Taylor polynomial cannot approximate the value at ***x = *** **1**. ${ htl.html` setupView({ func: oneOverOnePlusX, degree: 55, xSampleValue: 0.99})}>Show Me…` }. ---` } // return htl.html`

${ // md`The increasing influence of the long tail of terms in the Taylor Series of ${tex`\color{${colors.benchmark}} f(x)=${lnXPlus1.label()}`} as it approaches the asymptote at ***x = *** **-1**. ${ // htl.html` setupView({ func: lnXPlus1, degree: 20, xSampleValue: -0.99})}>Show Me…` // }`}
${ // md`The large contribution of higher-order terms (***n = *** **3, 4, 5**) to the approximated value of ${tex`\color{${colors.benchmark}} f(x)=${cosX.label()}`} as ***x*** moves away from **0**, and the lack of accuracy caused by ignoring the smaller, even higher terms (***n = *** **7, 8**). ${ // htl.html` setupView({ func: cosX, degree: 7, xSampleValue: 2.3 * Math.PI})}>Show Me…` // }.`}
${ // md`The approach of all the Taylor terms to **1** as ***x*** approaches the asymptote at ***x = *** **1** in the function ${tex`\color{${colors.benchmark}} f(x)=${oneOverOnePlusX.label()}`}, which is why its Taylor approximation can never approximate the value of ***x = *** **1**. ${ // htl.html` setupView({ func: oneOverOnePlusX, degree: 55, xSampleValue: 0.99})}>Show Me…` // }.`}

` // } 34:Td1a,functions = [ { label: (x='x') => `e^{${x}}`, benchmark: x => Math.pow(Math.E, x), lambda: (x, n) => Math.pow(x, n) / factorial(n), domain: { interval: [-4, 4], }, range: { interval: [-Math.E, Math.pow(Math.E, 4)], unit: 'e', unitSize: Math.E }, terms: { formula: (x='x', n='n') => `\\frac {${x}^${n}} {${n}!}`, sign: () => 1, numeratorExp: n => n, denominatorVal: n => n, factorialize: true, }, }, { label: (x='x') => `\\cos(${x})`, benchmark: Math.cos, lambda: (x, n) => Math.pow(-1, n) * Math.pow(x, 2*n) / factorial(2*n), domain: { interval: [-3 * Math.PI, 3 * Math.PI], unit: '𝜋', unitSize: Math.PI, }, range: { interval: [-1.5, 1.5], ticksPerUnit: 2, }, terms: { formula: (x='x', n='n') => `(-1)^${n} \\frac {${x} ^ {2${n}}} {(2${n})!}`, sign: n => Math.pow(-1, n), numeratorExp: n => 2*n, denominatorVal: n => 2*n, factorialize: true, }, }, { label: (x='x') => `\\sin(${x})`, benchmark: Math.sin, lambda: (x, n) => Math.pow(-1, n) * Math.pow(x, 2*n+1) / factorial(2*n+1), domain: { interval: [-3 * Math.PI, 3 * Math.PI], unit: '𝜋', unitSize: Math.PI, }, range: { interval: [-1.5, 1.5], ticksPerUnit: 2, }, terms: { formula: (x='x', n='n') => `(-1)^${n} \\frac {${x} ^ {2${n}+1}} {(2${n} + 1)!}`, sign: n => Math.pow(-1, n), numeratorExp: n => 2*n + 1, denominatorVal: n => 2*n + 1, factorialize: true, }, }, { label: (x='x') => `\\frac{1}{1-${x}}`, benchmark: x => 1 / (1 - x), lambda: (x, n) => Math.pow(x, n), domain: { valid: [-1, 1], interval: [-1.5, 1.5], ticksPerUnit: 2, }, range: { interval: [-10, 100], ticksPerUnit: .1, }, terms: { formula: (x='x', n='n') => `${x}^${n}`, sign: () => 1, numeratorExp: n => n, denominatorVal: () => 1, factorialize: false, }, }, { label: (x='x') => `\\ln(1+${x})`, benchmark: x => Math.log(1 + x), lambda: (x, n) => Math.pow(-1, n+1) * Math.pow(x, n) / n, n0: 1, domain: { valid: [-1, 1], interval: [-1.5, 1.5], ticksPerUnit: 2, }, range: { interval: [-5, 1], }, terms: { formula: (x='x', n='n') => `(-1)^{${n}+1} \\frac {${x} ^ ${n}} {${n}}`, sign: n => Math.pow(-1, n+1), numeratorExp: n => n, denominatorVal: n => n, factorialize: false, }, }, { label: (x='x') => `\\tan^{-1}(${x})`, benchmark: x => Math.atan(x), lambda: (x, n) => Math.pow(-1, n) * Math.pow(x, 2*n+1) / (2*n+1), domain: { valid: [-1, 1], interval: [-1.5, 1.5], ticksPerUnit: 2, }, range: { interval: [-.5 * Math.PI, .5 * Math.PI], unit: '𝜋', unitSize: Math.PI, ticksPerUnit: 4, }, terms: { formula: (x='x', n='n') => `(-1)^${n} \\frac {${x} ^ {2${n}+1}} {2${n} + 1}`, sign: n => Math.pow(-1, n), numeratorExp: n => 2*n + 1, denominatorVal: n => 2*n + 1, factorialize: false, }, }, ] // Bessel Function: lambda: (x, n) => Math.pow(-1, n) * Math.pow(x, 2*n) / (Math.pow(2, 2*n) * Math.pow(factorial(n), 2)),35:T942,function renderSolution( { label, n0, terms: { formula, sign, numeratorExp, denominatorVal, factorialize }, lambda, benchmark }, x = 'x', n1, realX ) { n0 = n0 || 0 const smallScreen = width < 600 const series = d3.range(n0, Math.min((n1+1) || Infinity, smallScreen ? 4 : 6) + (n0)) .map(n => { const denom = denominatorVal(n) const exp = numeratorExp(n) return [ denom === 1 || (factorialize && denom === 0) ? '' : '\\frac', exp === 0 ? '{1}' : exp === 1 ? `{${x}}` : `{${x} ^ {${exp}}}`, denom === 1 || (factorialize && denom === 0) ? '' : `{${denom}${factorialize ? '!' : ''}}`, n1 != null && n === degree ? '' : sign(n+1) > 0 ? '+' : '-', ].join('') }) const fmt = d3.format('.4') const realSeries = realX != null && d3.range(n0, (n1 != null ? Math.min(n1, 20) : 4) + 1 + (n0)) .map(n => lambda(realX, n)) .map((v, i) => `${v >= 0 ? i === 0 ? '' : '+' : '-'}${fmt(Math.abs(v))}`) .map(s => s.replace(/e(.*)/, `{\\times 10^{$1}}`)) const stripDoubleParens = s => s.replace(/$(\(.*$)\)/, '$1') const realBenchmark = benchmark(xSampleValue) return html`

${ tex`\displaystyle \color{${colors.benchmark}} ${stripDoubleParens(`f(${x})`)} = ${stripDoubleParens(label(x))}` }

${tex`\displaystyle \color{${colors.func}} ${n1 ? '\\approx' : '='} \sum_{n=${n0}} ^ {${n1 === undefined ? '\\infty' : n1}} ${formula(x)} \newline \color{${colors.series}} = ${series.join('')} ${n1 != null && series.length === degree+1 ? '' : '\\mathellipsis'} \newline `} ${realSeries ? [ html`

${tex`\color{#888} = ${realSeries.join('')} ${realSeries.length > degree ? '' : '\\mathellipsis'}`}

`, html`

${ tex`\displaystyle \color{${colors.func}} = ${sumOf(lambda, n1, n0)(xSampleValue).toFixed(4)} \color{${colors.benchmark}} \approx ${ Math.abs(realBenchmark) === Infinity ? (realBenchmark < 0 ? '-' : '') + '\\infty' : realBenchmark.toFixed(4) }` }

` ] : ''}

` }36:[] 2f:{"title":"Taylor Polynomials","cells":[{"id":0,"value":"# Taylor Polynomials","pinned":false,"hidden":false,"mode":"md"},{"id":2042,"value":"md`Consider the function ${tex`\\color{${colors.benchmark}} f(x) = ${func.label()}`}. Using [Taylor Series](https://en.wikipedia.org/wiki/Taylor_series), we can express ***f(x)*** as a summation of an inifnite number of terms (denoted as ${tex`\\small \\sum_{n=0}^{\\infty}`}) where the ***n***th term in the series is defined as ${tex`\\color{${colors.func}} ${func.terms.formula()}`}. Here's how we notate this series and its expansion into a polynomial of infinite degree:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"renderSolution(func)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2074,"value":"md`It turns out that nearly any mathematical function can be expressed as a Taylor Series — even trigonometric functions. Below is a selection of such functions. Choosing a function updates the equations above and renders the resulting graphs below. \n\nSince we can't actually sum *all* the terms of the infinite series, we only sum up to a certain term (**${nthify(degree)}** in this case) yielding an *N*th-degree polynomial approximation of the function. You may notice cases where the orange line of the polynomial deviates from the blue benchmark line of the mathematical function being approximated — especially at the extremes and when the *polynomial degree of approximation* slider is set relatively low.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof func = Inputs.radio(functions, {\n value: functions[0],\n format: d => tex`\\displaystyle \\large ${d.label()}`,\n label: 'Select function to analyze',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"Inputs.form([\n viewof xSampleValue,\n viewof degree,\n], width > 600 && {\n template: inputs => html`

${\n inputs.map(input => html`

${input}

`)\n }

`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"md`One fascinating aspect of Taylor Series is how its terms, computed for some point ***x***, influence the result of ***f(x)***. The bars below visualize the first ***n*** significant Taylor terms for the point at ***x = *** **${xSampleFormat(xSampleValue)}** (which you may adjust using the slider above). The bars are shaded light or dark according to whether their values are included in the approximation (i.e. whether ***n*** ${tex`\\leq`} the polynomial's degree).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"{\n const realX = Math.round(xSampleValue * 100) / 100\n let x = realX\n if (Math.abs(x) < 1e-5) { x = 0 }\n const parens = x < 0 || (x !== 0 && func.domain.unit)\n x = xSampleFormat(x).replace('𝜋', '\\\\pi')\n if (parens) { x = `(${x})`}\n return renderSolution(func, x, degree, realX) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"taylorPlot = Plot.line(\n plotPoints(sumOf(func.lambda, degree, func.n0), ...(func.domain.valid || func.domain.interval)), \n { stroke: colors.func, strokeWidth: 6, strokeOpacity: 2/3 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"benchmarkPlot = Plot.line(\n plotPoints(func.benchmark, ...func.domain.interval), \n { stroke: colors.benchmark, strokeWidth: 2, strokeDasharray: '4 5' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"colors = ({\n func: '#e70',\n benchmark: '#36c' || 'steelblue',\n series: '#555'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"function axisFor(config) {\n const tickFormat = d3.format('.2')\n return {\n domain: config.interval,\n ticks: d3.range(\n config.interval[0], \n config.interval[1] * (1 + 1e-9), \n (config.unitSize || 1) / (config.ticksPerUnit || 1)\n ),\n tickFormat: v => [\n config.unit && Math.abs(v) === config.unitSize \n ? v < 0 ? '-' : '' \n : tickFormat(v / (config.unitSize || 1)),\n (v === 0 ? '' : config.unit),\n ].join('')\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function plotPoints(fn, x0, x1) {\n const numPoints = width / 4\n return d3.range(x0, x1, (x1 - x0) / numPoints)\n .map(x => [x, fn(x)])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"/* Returns f(x) such that when called with x, returns sigma of fn(x,n) as n goes from n0 to n1 */\nfunction sumOf(fn, n1, n0=0) {\n return function(x) {\n return d3.sum(d3.range(n0, n1+1).map(n => fn(x, n)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"function factorial(n) {\n if (!(n >= 0)) { throw new Error(`n must be greater than or equal to 0 (encountered n=${n})`) }\n return n === 0 ? 1 : n * factorial(n - 1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"function xSampleFormat(x, roundZero=true) {\n if (roundZero && Math.abs(x) < 1e-5) { x = 0 }\n return d3.format('.3')(x / (func.domain.unitSize || 1)).replace('−', '-') + (x === 0 ? '' : func.domain.unit || '')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"function nthify(v) {\n const rightmost = v % 10\n if (v < 11 || v > 13) {\n if (rightmost === 1) return v + 'st'\n if (rightmost === 2) return v + 'nd'\n if (rightmost === 3) return v + 'rd' \n }\n return v + 'th'\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1993,"value":"function setupView(opts) {\n mutable initialX = opts.xSampleValue\n \n viewof func.value = opts.func\n viewof func.dispatchEvent(new CustomEvent('input'))\n \n viewof degree.value = opts.degree\n viewof degree.dispatchEvent(new CustomEvent('input'))\n\n setTimeout(function() { mutable initialX = null }, 100)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof degree = Inputs.range([0, 100], { value: 7, step: 1, label: 'Polynomial Degree of Approximation' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"viewof xSampleValue = {\n const widget = Inputs.range(func.domain.valid || func.domain.interval, {\n value: mutable initialX || d3.mean(func.domain.valid || func.domain.interval),\n label: 'Adjust sample\\'s x',\n width: width / (width > 1000 ? 2 : 3),\n step: (func.domain.unitSize || 1) / 100\n })\n widget.querySelector('input').style.display = 'none'\n return widget\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2138,"value":"mutable initialX = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}