2b:null 2c:["$","title",null,{"children":"[L] Function Plot & mathjs | Murat Anlı | Observable"}] 31:T824,md ` ## Maxima/minima Let's say that we throw an object into the air and we want to know the maximum height it acquires, as it rises it's velocity decreases and when it reaches the highest point its velocity is zero, we also know that the velocity is the instantaneous rate of change of height with respect to time hence the derivative is involved in this process and therefore we expect it to be involved in other maxima/minima problems More generally if ${tex `y`} is a function of ${tex `x`} it seems that to find the maximum value of ${tex `y`} we must find ${tex `y'`} and set it to 0 Let's see an example, the following function has a maximum value of 3.333 near ${tex `x = 1`} and a minimum value of 2 near ${tex `x = 3`}, if we analyze the slope of the function near those points we will see that on the left of ${tex `x = 1`} the slope is positive and on the right of ${tex `x = 1`} the slope is negative, since we know that the derivative represents the slope of a function we can also expect that the derivative of this function near ${tex `x = 1`} will go from a positive value to a negative value intersecting the x-axis, if we analyze the slope near ${tex `x = 3`} will will see the same behavior with the slope but it's going from a negative value to a positive one ${tex ` f(x) = x^3 / 3 -2x^2 +3x + 2 \\ f'(x) = x^2 - 4x + 3 \\ `} Now the problem reduces to finding the points where ${tex `y' = 0`} in the derivative function, finding them will tell us exactly the maximum/minimum value of ${tex `y`}, finding the values of ${tex `x`} when ${tex `y' = 0`} ${tex ` 0 = x^2 - 4x + 3 \\ 0 = (x - 1)(x - 3) \\ `} And we see that: ${tex ` y' = 0 \quad when \quad x = 1 \quad and \quad x = 3 \\ `} The process didn't actually find the maximum/minimum values since for ${tex `x > 3`} the function increases indefinitely, same goes when ${tex `x < 1`} but in this case the function decreases indefinitely, these values are called the *relative maxima/minima* because **near** ${tex `x = 3`} or ${tex `x = 1`} these points are the minimum/maximum that can be found `32:[] 2f:{"id":"486d18472c75e914","slug":null,"title":"[L] Function Plot & mathjs","thumbnail":"168d12a77bcbbfbd3f4996c3a46d757bdf69d5da9df271c97e3923129b8805c6","access_level":"public","create_time":"$D2023-03-01T12:46:43.378Z","update_time":"$D2023-03-11T12:13:22.573Z","view_time":null,"first_public_time":"$D2023-03-01T12:46:43.378Z","has_unpublished_edits":null,"fork":{"id":"feb806da74907f65","slug":"function-plot","title":"Function Plot","owner":{"id":"b4b0f443279c6a15","login":"mauriciopoppe","name":"Mauricio Poppe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"099e5d662aa22e29","login":"omanli","name":"Murat Anlı","avatar_url":"https://avatars-next.observableusercontent.com/a4d53bc536a70a0abc8fc18b8c0b1f04c29d7ac0e7d88d15f9041ce9fd58dbe9","tier":"starter_2024"},"version":718,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58c0ca80f1801961","login":"omanli","name":"Murat Anlı","avatar_url":"https://avatars-next.observableusercontent.com/a4d53bc536a70a0abc8fc18b8c0b1f04c29d7ac0e7d88d15f9041ce9fd58dbe9","tier":null}],"members":[{"type":"individual","id":"58c0ca80f1801961","login":"omanli","name":"Murat Anlı","avatar_url":"https://avatars-next.observableusercontent.com/a4d53bc536a70a0abc8fc18b8c0b1f04c29d7ac0e7d88d15f9041ce9fd58dbe9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"[L] Function Plot & mathjs","cells":[{"id":0,"value":"# [L] Function Plot & mathjs\n\n[Function Plot](https://github.com/mauriciopoppe/function-plot) is a powerful library built on top of D3.js supporting interactive line charts and scatterplots.\n\n[Math.js](https://mathjs.org/) is an extensive math library for JavaScript and Node.js featuring a flexible expression parser, supporting symbolic computation, providing a large set of built-in functions and constants, handling numbers, big numbers, complex numbers, fractions, units, and matrices.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"initialized = {\n let contentsBounds = document.body.getBoundingClientRect()\n let width = 800\n let height = 350\n let ratio = contentsBounds.width / width\n width *= ratio\n height *= ratio\n\n functionPlot.globals.DEFAULT_WIDTH = 0.8*width\n functionPlot.globals.DEFAULT_HEIGHT = height\n return true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"

\n ${viewof Ln1i} ${viewof Ln1f}
\n ${viewof Ln2i} ${viewof Ln2f}
\n ${viewof Ln3i} ${viewof Ln3f}
\n ${viewof Ln4i} ${viewof Ln4f}
\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"viewof E = Inputs.textarea({label: \"Mathjs Parser Input\", placeholder: \"...\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"math.evaluate('x + 40', {x:20}) - 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"MathjsParseOutput = (function() {\n let F = E.split('\\n')[0]\n let eq = F.search(\"=\")\n let scope_c = {x:0, y:0}\n let scope_x = {x:1, y:0}\n let scope_y = {x:0, y:1}\n //Parser.set('x', 0)\n //Parser.set('x', 0)\n //Parser.set('y', 0)\n let c_rhs = math.evaluate(F.substring(eq+1), scope_c)\n let c_lhs = math.evaluate(F.substring(0,eq), scope_c)\n let x_rhs = math.evaluate(F.substring(eq+1), scope_x)\n let x_lhs = math.evaluate(F.substring(0,eq), scope_x)\n let y_rhs = math.evaluate(F.substring(eq+1), scope_y)\n let y_lhs = math.evaluate(F.substring(0,eq), scope_y)\n //return x_lhs - x_rhs - (c_lhs - c_rhs)\n // math.simplify(F.substring(0,eq), scope_x) gets the fractional \n return [math.simplify(F.substring(0,eq) + '-1*' + c_lhs, scope_x) + \" ; \" +\n math.simplify(F.substring(0,eq) + '-1*' + c_lhs, scope_y)]\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"node = math.parse(E.split('\\n')[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`### with a \\`{js}\\` Cell\n ${tex.block`${node.toTex()}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"### With `markdown`\n\nA mixture of `markdown` and a `tex.block{}`\n\n${tex`\\LaTeX`} is good at typesetting mathematical formulas like:\n ${tex.block`x-\\frac{y}{3} + z = 7`}\n ${tex.block`${node.toTex()}`}\n ${tex.block`f(x) = y`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"M = [\n math.round(math.e, 3), // 2.718\n math.atan2(3, -3) / math.pi, // 0.75\n math.log(10000, 10), // 4\n math.sqrt(-4), // 2i\n math.derivative('x^2 + x', 'x'), // 2*x+1\n math.pow([[-1, 2], [3, 1]], 2), // [[7, 0], [0, 7]]\n\n math.evaluate('1.2 * (2 + 4.5)'), // 7.8\n math.evaluate('12.7 cm to inch'), // 5 inch\n math.evaluate('sin(45 deg) ^ 2'), // 0.5\n math.evaluate('9 / 3 + 2i'), // 3 + 2i\n math.evaluate('det([-1, 2; 3, 1])'), // -7\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n let target = DOM.element('div')\n functionPlot({\n title: 'Lines',\n xAxis: { domain: [-10, 50] },\n yAxis: { domain: [-5, 30] },\n data: [{ fn: Ln1f },\n { fn: Ln2f }\n ],\n target\n });\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"viewof Ln1i = Inputs.toggle({label: \"Disp\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"viewof Ln2i = Inputs.toggle({label: \"Disp\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof Ln3i = Inputs.toggle({label: \"Disp\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof Ln4i = Inputs.toggle({label: \"Disp\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof Ln1f = Inputs.text({label: \"Line 1\", placeholder: \"y = ax + b\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof Ln2f = Inputs.text({label: \"Line 2\", placeholder: \"y = ax + b\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof Ln3f = Inputs.text({label: \"Line 3\", placeholder: \"y = ax + b\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"viewof Ln4f = Inputs.text({label: \"Line 4\", placeholder: \"y = ax + b\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"math = require(\"mathjs@11.6.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\nMauricio Poppe uses function-plot extensively in his blog, please check out these examples:\n\n- [Derivatives](https://www.mauriciopoppe.com/notes/mathematics/calculus/derivative/)\n- [Integrals](https://www.mauriciopoppe.com/notes/mathematics/calculus/integral/)\n\nThe following example is plotting x^2 with a secant on x0=1 and x1=-1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n let target = DOM.element('div')\n functionPlot({\n target,\n tip: {\n xLine: true\n },\n yAxis: { domain: [-1, 9] },\n data: [\n {\n fn: 'x * x',\n secants: [\n {\n x0: 1,\n x1: 2,\n updateOnMouseMove: true\n }\n ]\n }\n ]\n })\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"targetA = {\n let target = DOM.element('div')\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"targetB = {\n let target = DOM.element('div')\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"joinTargets = {\n let a = functionPlot({\n target: targetA,\n xAxis: { domain: [-4, 8] },\n yAxis: { domain: [-4, 8] },\n annotations: [\n {\n y: 3.333333333,\n text: 'max'\n },\n {\n y: 2,\n text: 'min'\n }\n ],\n data: [\n {\n fn: '(x^3) / 3 - 2 * x * x + 3 * x + 2',\n graphType: 'polyline',\n derivative: {\n fn: 'x * x - 4 * x + 3',\n updateOnMouseMove: true\n }\n }\n ]\n })\n let b = functionPlot({\n target: targetB,\n xAxis: { domain: [-4, 8] },\n yAxis: { domain: [-4, 8] },\n annotations: [\n {\n x: 1,\n text: 'intercept'\n },\n {\n x: 3,\n text: 'intercept'\n }\n ],\n data: [\n {\n fn: 'x * x - 4 * x + 3',\n graphType: 'polyline'\n }\n ]\n })\n a.addLink(b)\n b.addLink(a)\n return \"targets joined!\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`\n## Area as the limit of the sum\n\nLet’s say we want to compute the area of the graph below ${tex`f(x) = x^2`} and the ${tex `x`}-axis bounded by the vertical lines ${tex `x_0 = a = 1`} and ${tex `x_1 = b = 2`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"{\n let target = DOM.element('div')\n functionPlot({\n target,\n xAxis: { domain: [0, 3] },\n yAxis: { domain: [0, 5] },\n data: [\n {\n fn: 'x * x'\n }\n ],\n annotations: [\n { x: 1, text: 'a' },\n { x: 2, text: 'b' }\n ]\n })\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`\nAn approximation to the area can be found by taking the maximum y-value in ${tex `(a, b)`} called ${tex `m_1`} and multiplying it by ${tex `(b - a)`} which will be expressed as ${tex `\\Delta(x)`}, then the first approximation is ${tex `m_1\\Delta{(x)}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"{\n let target = DOM.element('div')\nfunctionPlot({\n target,\n xAxis: { domain: [0, 3] },\n yAxis: { domain: [0, 5] },\n xDomain: [0, 3],\n yDomain: [0, 5],\n annotations: [\n { x: 1, text: 'a' },\n { x: 2, text: 'b' },\n { y: 4, text: 'm_1' }\n ],\n data: [\n {\n fn: 'x * x'\n },\n {\n fn: 'x * x',\n range: [1, 2],\n nSamples: 2,\n closed: true\n }\n ]\n })\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`\nWe can obtain a better approximation if we divide the interval ${tex `(a, b)`} into two equal parts each denoted by ${tex `\\Delta{(x)}`} multiplied by the maximum ${tex `y`}-value in each part and then form the sum \n\n${tex `S_2 = m_1\\Delta{x} + m_2\\Delta{x}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"{\n let target = DOM.element('div')\n functionPlot({\n target,\n xAxis: { domain: [0, 3] },\n yAxis: { domain: [0, 5] },\n disableZoom: true,\n annotations: [\n { x: 1, text: 'a' },\n { x: 2, text: 'b' },\n { y: 4, text: 'm_1' },\n { y: 2.25, text: 'm_2' }\n ],\n data: [\n {\n fn: 'x * x'\n },\n {\n fn: 'x * x',\n range: [1, 2],\n nSamples: 3,\n closed: true\n }\n ]\n })\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`\nDividing the interval ${tex `(a, b)`} into ${tex `n`} equal parts each denoted as ${tex `\\Delta{x}`} and choosing ${tex `n`} maximum ${tex `y`}-values for each part we form the sum:\n\n${tex `\nS_n = m_1\\Delta{x} + m_2\\Delta{x} + \\ldots + m_n\\Delta{x}\n`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"{\n let target = DOM.element('div')\n let options = {\n target: target,\n disableZoom: true,\n xAxis: { domain: [0, 3] },\n yAxis: { domain: [0, 5] },\n annotations: [\n { x: 1, text: 'a' },\n { x: 2, text: 'b' }\n ],\n data: [\n {\n fn: 'x * x'\n },\n {\n fn: 'x * x',\n range: [1, 2],\n nSamples: 30,\n closed: true\n }\n ]\n }\n\n functionPlot(options)\n\n var $el = document.querySelector('#sum-area-slider')\n options.data[1].nSamples = integralSlider\n functionPlot(options)\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof integralSlider = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10, \n description: \"n: number of divisions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`\n## Vector field\n\nAn idea from this issue: https://github.com/mauriciopoppe/function-plot/issues/68\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"{\n let target = DOM.element('div')\n \n function F(x, y) {\n return [-y, x]\n }\n\n let data = []\n\n // Objective: scale the vectors so that the one with greatest magnitude is\n // a unit vector\n\n // greatest magnitude\n let ml = 0\n let xLimit = [-6, 6]\n let yLimit = [-3, 3]\n for (let i = xLimit[0]; i <= xLimit[1]; i += 0.5) {\n for (let j = yLimit[0]; j <= yLimit[1]; j += 0.5) {\n var [x, y] = F(i, j)\n ml = Math.max(ml, x * x + y * y)\n data.push({\n offset: [i, j],\n vector: [x, y],\n graphType: 'polyline',\n fnType: 'vector',\n color: 'black'\n })\n }\n }\n\n // scale the vectors as stated above\n data.forEach(v => {\n v.vector = v.vector.map(c => c / Math.sqrt(ml))\n })\n\n functionPlot({\n target,\n data: data\n })\n\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`\n## Desmos examples\n\nThe following examples mimic what you can do with function-plot in comparison to desmos\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md`\n[Lists: Curve Stitching](https://www.desmos.com/calculator/ib4qkln029)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"{\n let target = DOM.element('div')\n \n let data = []\n for (let i = 1; i <= curveStitching; i += 1) {\n data.push({ \n fn: 'a + (a * x) / (a - 11)',\n nSamples: 10,\n graphType: 'polyline',\n color: '#000080',\n scope: { a: i }\n })\n }\n \n let options = {\n target,\n grid: true,\n yAxis: { domain: [-2, 15] },\n xAxis: { domain: [-2, 20] },\n data\n }\n functionPlot(options)\n\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof curveStitching = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 10, \n description: \"number of lists\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`\n

\n[Calculus: Integrals](https://www.desmos.com/calculator/qigfpckugc)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"{\n let target = DOM.element('div')\n let options = {\n target,\n grid: true,\n data: [\n { \n fn: 'a * x^2 + c',\n scope: { a: integralsA, c: integralsC }\n },\n { \n fn: 'a * x^3 / 3',\n scope: { a: integralsA, c: integralsC }\n }\n ]\n }\n functionPlot(options)\n\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"viewof integralsA = slider({\n min: -10, \n max: 10, \n step: 0.01, \n value: 10, \n title: \"a\", \n description: `the value of a in the equation a * x^2 + c`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof integralsC = slider({\n min: -10, \n max: 10, \n step: 0.01, \n value: 1, \n title: \"c\", \n description: `the value of a in the equation a * x^2 + c`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`\n

\n[Parabolas: standard form + tangent](https://www.desmos.com/calculator/dxkknajdqb)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n let target = DOM.element('div')\n let options = {\n target,\n grid: true,\n yAxis: { domain: [-2, 6] },\n xAxis: { domain: [-6, 6] },\n data: [\n { \n fn: 'a * x^2 + b * x + c',\n closed: true,\n scope: { a: parabolasA, b: parabolasB, c: parabolasC }\n },\n { \n fn: 'b * x + c',\n color: 'black',\n scope: { a: parabolasA, b: parabolasB, c: parabolasC }\n }\n ]\n }\n functionPlot(options)\n\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof parabolasA = slider({\n min: -10, \n max: 10, \n step: 0.01, \n value: 0.7, \n title: \"a\", \n description: `the value of a in the equation ax^2 + bx + c`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"viewof parabolasB = slider({\n min: -10, \n max: 10, \n step: 0.01, \n value: 0.8, \n title: \"b\", \n description: `the value of b in the equation ax^2 + bx + c`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof parabolasC = slider({\n min: -10, \n max: 10, \n step: 0.01, \n value: 1, \n title: \"c\", \n description: `the value of c in the equation ax^2 + bx + c`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`\n

\n[Trigonometry: Unit Circle](https://www.desmos.com/calculator/qmzx2skkzy)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"{\n let target = DOM.element('div')\n let options = {\n target,\n grid: true,\n yAxis: {domain: [-1.5, 1.5]},\n xAxis: {domain: [-3.5, 3.5]},\n data: [ \n { fn: 'sqrt(1 - x * x)', color: '#000080' },\n { fn: '-sqrt(1 - x * x)', color: '#000080' },\n {\n points: [\n [0, 0],\n [Math.cos(unitCircleA * Math.PI / 180), Math.sin(unitCircleA * Math.PI / 180)]\n ],\n fnType: 'points',\n graphType: 'polyline',\n color: 'red'\n },\n {\n points: [\n [Math.cos(unitCircleA * Math.PI / 180), 0],\n [Math.cos(unitCircleA * Math.PI / 180), Math.sin(unitCircleA * Math.PI / 180)]\n ],\n fnType: 'points',\n graphType: 'polyline',\n color: 'red'\n }\n ]\n }\n functionPlot(options)\n\n return target\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"viewof unitCircleA = slider({\n min: -10, \n max: 360, \n step: 1, \n value: 45, \n title: \"angle\", \n description: `the angle in the circle`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"functionPlot = require(\"function-plot@1.22.2/dist/function-plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"