30:T620,{ const svgDims = [600,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales and axes const xScale = d3.scaleLinear().domain([-5,5]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(10)) const yScale = d3.scaleLinear().domain([-25,25]).range([570,30]) const yAxis = svg.append("g").attr("transform","translate(300,0)").call(d3.axisLeft(yScale).ticks(10)) const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",540) .attr("height",540) .attr("x",xScale(-5)) .attr("y",yScale(25)) const pathData = d3.line().x(d => xScale(d)).y(d => yScale(a*((d-h)*(d-h))+ k) )(data) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const b = -2*a*h const c = a*h*h+k if(b*b-4*a*c >= 0 && a != 0){ let x1 = d3.format(".2f")((-b-Math.sqrt(b*b-4*a*c))/(2*a)) let x2 = d3.format(".2f")((-b+Math.sqrt(b*b-4*a*c))/(2*a)) svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(x1)) .attr("cy",yScale(0)) .attr("clip-path","url(#clip)") svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(x2)) .attr("cy",yScale(0)) .attr("clip-path","url(#clip)") } yield svg.node() } 31:[] 2e:{"title":"Quadratic Formula","cells":[{"id":0,"value":"md`# Quadratic Formula`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"html`The general form of the equation of a parabola is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"tex`y = ax^{2} + bx + c`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"html`If the parabola intersects the x-axis, it will do so in one or two locations. The quadratic formula gives these to us:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"tex`x =\\dfrac{-b \\pm \\sqrt{b^{2} - 4ac}}{2a}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"html`Below we start with the vertex form, but we multiply out to obtain the general form:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"{ \n if(a == 1 || a == 0){\n var p1 = ``\n }else if(a == -1){\n var p1 = `-`\n }else{\n var p1 = a\n }\n \n if(a == 0){\n var p2 = ``\n }else if(h == 0){\n var p2 = `x^{2}`\n }else if(h < 0){\n var p2 = `(x + ${-h})^{2}`\n }else{\n var p2 = `(x - ${h})^{2}`\n }\n \n if(a == 0){\n var p3 = k\n }else if(k == 0){\n var p3 = ``\n }else if(k < 0){\n var p3 = `- ${-k}`\n }else{\n var p3 = `+ ${k}`\n }\n return tex`y = ${p1}${p2}${p3}`\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"{\n if(a == 0){\n var p1 = ``\n }else if(a == 1){\n var p1 = `x^{2}`\n }else if(a == -1){\n var p1 = `-x^{2}`\n }else{\n var p1 = `${a}x^{2}`\n }\n \n if(a*h == 0){\n var p2 = ``\n }else if(a*h < 0){\n var p2 = `+${-2*a*h}x`\n }else{\n var p2 = `-${2*a*h}x` \n }\n \n if(a == 0){\n var p3 = `${k}`\n }else if(a*h*h+k == 0){\n var p3 = ``\n }else if(a*h*h+k < 0){\n var p3 = `-${-(a*h*h+k)}`\n }else{\n var p3 = `+${a*h*h+k}`\n }\n \n \n return tex`y = ${p1}${p2}${p3}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"{\n const b = -2*a*h\n const c = a*h*h+k\n \n if(a == 0){return tex`\n\\begin{aligned}\nx_1 = \\dfrac{${-b} - \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} \\hspace10pt \\text{(undefined)} \\\\\nx_2 = \\dfrac{${-b} + \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} \\hspace10pt \\text{(undefined)} \n\\end{aligned}`}\n else if(b*b-4*a*c < 0){\n return tex`\n\\begin{aligned}\nx_1 = \\dfrac{${-b} - \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} \\hspace10pt \\text{(not real)} \\\\\nx_2 = \\dfrac{${-b} + \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} \\hspace10pt \\text{(not real)} \n\\end{aligned}`\n }else{\n return tex`\n\\begin{aligned}\n&x_1 = \\dfrac{${-b} - \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} = ${d3.format(\".2f\")((-b-Math.sqrt(b*b-4*a*c))/(2*a))} \\\\\n&x_2 = \\dfrac{${-b} + \\sqrt{${Math.abs(b)}^{2}-4(${a})(${c})}}{2(${a})} = ${d3.format(\".2f\")((-b+Math.sqrt(b*b-4*a*c))/(2*a))}\n\\end{aligned}`\n }\n \n\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof a = slider({min:-10,max:10,step:1,value: 1,description:\"set a\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof h = slider({min:-5,max:5,step: 1,value: 0,description:\"set h\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof k = slider({min:-25,max:25,step: 1,value: 0,description:\"set k\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"data = {\n const data = []\n for(let i = -5; i <= 5; i = i + .1){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}