2b:null 2c:["$","title",null,{"children":"Approximate Integration | Paul Handorff | Observable"}] 31:T511,html`

Method	Approximate Area	Error
Left	${tex`\large${areaRectangles(a, b, n, areaLeftRectangle)}`}	${tex`\large${areaRectangles(a, b, n, areaLeftRectangle) - areaExact(a, b)}`}
Midpoint	${tex`\large${areaRectangles(a, b, n, areaMidpointRectangle)}`}	${tex`\large${areaRectangles(a, b, n, areaMidpointRectangle) - areaExact(a, b)}`}
Right	${tex`\large${areaRectangles(a, b, n, areaRightRectangle)}`}	${tex`\large${areaRectangles(a, b, n, areaRightRectangle) - areaExact(a, b)}`}
Trapezoid	${tex`\large${areaRectangles(a, b, n, areaTrapezoid)}`}	${tex`\large${areaRectangles(a, b, n, areaTrapezoid) - areaExact(a, b)}`}
Simpson's	${tex`\large${areaParabolas(a, b, n)}`}	${tex`\large${areaParabolas(a, b, n) - areaExact(a, b)}`}
Exact area	${tex`\large${areaExact(a, b)}`}

`32:[] 2f:{"id":"73eb04b23488deaf","slug":"approximate-integration","title":"Approximate Integration","thumbnail":"ff16d73e12949d9a65cc37cbf1aeed1ccd706daf07a29323c3027d05e94bea98","access_level":"public","create_time":"$D2020-11-21T11:27:06.962Z","update_time":"$D2021-02-15T21:37:25.994Z","view_time":null,"first_public_time":"$D2020-11-21T13:48:04.853Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58821a8167eb7a13","login":"phandorff","name":"Paul Handorff","avatar_url":"https://avatars-next.observableusercontent.com/7d3d06ef65a88bea1d4b8038050eb42911addd11882d5d6855b94b7f2b1ed303","tier":"starter_2024"},"version":523,"publish_version":523,"role":null,"authored":false,"authors":[{"type":"individual","id":"31b40c6e442a9949","login":"phandorff","name":"Paul Handorff","avatar_url":"https://avatars-next.observableusercontent.com/7d3d06ef65a88bea1d4b8038050eb42911addd11882d5d6855b94b7f2b1ed303","tier":null}],"members":[{"type":"individual","id":"31b40c6e442a9949","login":"phandorff","name":"Paul Handorff","avatar_url":"https://avatars-next.observableusercontent.com/7d3d06ef65a88bea1d4b8038050eb42911addd11882d5d6855b94b7f2b1ed303","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Approximate Integration","cells":[{"id":0,"value":"md`# Approximate Integration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`## Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`Define a function, and its integral (for computing errors) here. Initially, ${tex` f(x) = \\frac{1}{x}`}.\n\nIf you change the function, you may need to change the bounds of the graph. Set \\`xLow\\`, \\`xHigh\\`, \\`yLow\\` and \\`yHigh\\` in Appendix, below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"f = x => (x + 1) ** 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"integralFn = x => (2 / 3) * (x + 1) ** 1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"md`Choose an approximation method and parameters here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof a = slider({\n min: xLow,\n max: 10,\n step: 1,\n value: xLow,\n description: \"Min x value\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof b = slider({\n min: 0,\n max: xHigh,\n step: 1,\n value: xHigh,\n description: \"Max x value\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof fn = select({\n options: [\"Lower\", \"Upper\", \"Midpoint\", \"Trapezoid\", \"Simpson's\"],\n description: \"Method\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof n = slider({\n min: 2,\n max: 100,\n step: 2,\n value: 10,\n description: \"Number of rectangles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"{\n const p = plotter({\n xDomain: [xLow, xHigh],\n yDomain: [yHigh, yLow],\n width: 600,\n height: 600,\n grid: showGrid\n });\n p.func(f, { stroke: 'green', width: 3 });\n\n const drawFn = {\n Lower: drawLeftRectangle,\n Upper: drawRightRectangle,\n Midpoint: drawMidpointRectangle,\n Trapezoid: drawTrapezoid\n }[fn];\n\n if (fn === \"Simpson's\") {\n drawParabolas(p, a, b, n);\n } else {\n drawRectangles(p, a, b, n, drawFn);\n }\n\n return p.node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"xLow = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"xHigh = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"yLow = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"yHigh = f(xHigh)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"showGrid = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"drawLeftRectangle = (p, x1, x2) => {\n p.rectangle(x1, f(x1), x2, 0, { fill: \"green\", stroke: \"black\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"areaLeftRectangle = (x1, x2) => {\n return (x2 - x1) * f(x1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"drawRightRectangle = (p, x1, x2) => {\n p.rectangle(x1, f(x2), x2, 0, { fill: \"green\", stroke: \"black\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"areaRightRectangle = (x1, x2) => {\n return (x2 - x1) * f(x2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"drawMidpointRectangle = (p, x1, x2) => {\n p.rectangle(x1, f((x1 + x2) / 2), x2, 0, {\n fill: \"green\",\n stroke: \"black\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"areaMidpointRectangle = (x1, x2) => {\n return (x2 - x1) * f((x1 + x2) / 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"drawTrapezoid = (p, x1, x2) => {\n p.polygon(\n [\n { x: x1, y: 0 },\n { x: x1, y: f(x1) },\n { x: x2, y: f(x2) },\n { x: x2, y: 0 }\n ],\n { fill: \"green\", stroke: \"black\" }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"areaTrapezoid = (x1, x2) => {\n return ((x2 - x1) * (f(x1) + f(x2))) / 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"drawRectangles = (p, xMin, xMax, n, drawFn) => {\n const d = (xMax - xMin) / n;\n const xs = Array.from({ length: n }, (_, i) => ({\n x1: xMin + d * i,\n x2: xMin + d * (i + 1)\n }));\n\n xs.forEach(({ x1, x2 }) => drawFn(p, x1, x2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"areaRectangles = (xMin, xMax, n, areaFn) => {\n const d = (xMax - xMin) / n;\n const xs = Array.from({ length: n }, (_, i) => ({\n x1: xMin + d * i,\n x2: xMin + d * (i + 1)\n }));\n\n const areas = xs.map(({ x1, x2 }) => areaFn(x1, x2));\n return areas.reduce((a, b) => a + b, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"areaExact = (xMin, xMax) => {\n return integralFn(xMax) - integralFn(xMin);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"drawParabolas = (p, xMin, xMax, n) => {\n const d = (2 * (xMax - xMin)) / n;\n\n const xs = Array.from({ length: n / 2 }, (_, i) => ({\n x1: xMin + d * i,\n x2: xMin + d * (i + 1)\n }));\n\n xs.forEach(({ x1, x2 }) => {\n drawParabola(p, x1, x2);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"drawParabola = (p, x1, x2) => {\n const a = f(x1);\n const b = f(x2);\n const c = f((x1 + x2) / 2);\n\n const denom = (x1 - x2) ** 2;\n\n const A = (2 * (a + b - 2 * c)) / denom;\n const B = -(x1 * (a + 3 * b - 4 * c) + x2 * (3 * a + b - 4 * c)) / denom;\n const C = (x1 ** 2 * b + x1 * x2 * (a + b - 4 * c) + x2 ** 2 * a) / denom;\n\n // Number of points to approximate curve\n const N = 60;\n const parabolaFn = x => A * x ** 2 + B * x + C;\n const curvePoints = Array.from({ length: N }, (_, i) => {\n const x = x1 + ((x2 - x1) * i) / (N - 1);\n const y = parabolaFn(x);\n return { x, y };\n });\n\n const allPoints = [{ x: x1, y: 0 }, ...curvePoints, { x: x2, y: 0 }];\n p.polygon(allPoints, { fill: \"green\", stroke: \"black\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"areaParabolas = (xMin, xMax, n) => {\n const d = (xMax - xMin) / n;\n const xs = Array.from({ length: n + 1 }, (_, i) => xMin + d * i);\n\n const terms = xs.map((x, i) => {\n if (i === 0 || i === n) {\n return f(x);\n } else if (i % 2 === 0) {\n return 2 * f(x);\n } else {\n return 4 * f(x);\n }\n });\n\n return (d / 3) * terms.reduce((a, b) => a + b, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { plotter } from '@kjerandp/plotter'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"