30:T6b4,{ 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([-xlim,ylim]).range([30,570]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(10)) const yScale = d3.scaleLinear().domain([-ylim,ylim]).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(-xlim)) .attr("y",yScale(ylim)) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(s2+1/(d-s1)))(data2) const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(s2+1/(d-s1)))(data1) svg.append("path") .attr("d",pathData1) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") .attr("stroke-width",2) svg.append("path") .attr("d",pathData2) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") .attr("stroke-width",2) svg.append("line") .attr("x1",xScale(s1)) .attr("y1",yScale(-ylim)) .attr("x2",xScale(s1)) .attr("y2",yScale(ylim)) .attr("stroke","tomato") .attr("stroke-dasharray",4) .attr("stroke-width",3) svg.append("line") .attr("x1",xScale(-xlim)) .attr("y1",yScale(s2)) .attr("x2",xScale(xlim)) .attr("y2",yScale(s2)) .attr("stroke","cornflowerblue") .attr("stroke-dasharray",4) .attr("stroke-width",3) yield svg.node() } 31:[] 2e:{"title":"Asymptotes","cells":[{"id":0,"value":"md`# Asymptotes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"html`Move the sliders to shift the graph left, right, up, and down. Try to determine the equations of the graph itself, and the vertical and horizontal asymptotes. Click the button for the correct answers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof b = button({value:\"show/hide equations\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"{\n if(s1 == 0){\n var p1 = `{x}`\n }else if(s1 < 0){\n var p1 = `{x + ${-s1}}`\n }else{\n var p1 = `{x - ${s1}}`\n }\n \n if(s2 == 0){\n var p2 = ``\n }else if(s2 < 0){\n var p2 = `${s2}`\n }else{\n var p2 = `+ ${s2}`\n }\n if(show){\n return tex`y = \\dfrac{1}${p1}${p2}`\n }else{return tex``}\n}\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"{\n if(show){\n return tex`x = ${s1}\\hspace5pt\\color{tomato}\\text{(vertical asymptote)}`\n }else{return tex``}\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"{\n if(show){\n return tex`y = ${s2}\\hspace5pt\\color{cornflowerblue}\\text{(horizontal asymptote)}`\n }else{return tex``}\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"viewof s1 = slider({min:-xlim,max:xlim,step:1,display:v=>``,description:\"move left or right\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"viewof s2 = slider({min:-ylim,max:ylim,step:1,display:v=>``,description:\"move up or down\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"data1 = {\n const data = []\n for(var i = s1 + .01; i <= xlim; i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"data2 = {\n const data = []\n for(var i = -xlim; i <= s1 -.01; i = i + .01){\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"},{"id":643,"value":"xlim = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"ylim = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"show = {\n b\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}