31:Td1e,{ const svgDims = [600,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales const xScale = d3.scaleLinear().domain([-10,10]).range([30,570]) const yScale = d3.scaleLinear().domain([-10,10]).range([570,30]) //axes const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(10)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(10)) //hyperbola const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(b*Math.sqrt(d*d/(a*a)-1)))([a,...data]) const y1 = svg.append("path") .attr("d",pathData1) .attr("stroke","black") .attr("fill","none") const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(-b*Math.sqrt(d*d/(a*a)-1)))([a,...data]) const y2 = svg.append("path") .attr("d",pathData2) .attr("stroke","black") .attr("fill","none") const pathData3 = d3.line().x(d => xScale(d)).y(d => yScale(b*Math.sqrt(d*d/(a*a)-1)))([...data.map(d => -d)]) const y3 = svg.append("path") .attr("d",pathData3) .attr("stroke","black") .attr("fill","none") const pathData4 = d3.line().x(d => xScale(d)).y(d => yScale(-b*Math.sqrt(d*d/(a*a)-1)))([...data.map(d => -d)]) const y4 = svg.append("path") .attr("d",pathData4) .attr("stroke","black") .attr("fill","none") //lines svg.append("line") .attr("x1",xScale(-a)) .attr("y1",yScale(b)) .attr("x2",xScale(a)) .attr("y2",yScale(b)) .attr("stroke","tomato") .attr("stroke-width",4) .attr("stroke-dasharray",3) svg.append("line") .attr("x1",xScale(-a)) .attr("y1",yScale(-b)) .attr("x2",xScale(a)) .attr("y2",yScale(-b)) .attr("stroke","tomato") .attr("stroke-width",4) .attr("stroke-dasharray",3) svg.append("line") .attr("x1",xScale(-a)) .attr("y1",yScale(0)) .attr("x2",xScale(a)) .attr("y2",yScale(0)) .attr("stroke","tomato") .attr("stroke-width",4) svg.append("line") .attr("x1",xScale(-a)) .attr("y1",yScale(-b)) .attr("x2",xScale(-a)) .attr("y2",yScale(b)) .attr("stroke","cornflowerblue") .attr("stroke-width",4) .attr("stroke-dasharray",3) svg.append("line") .attr("x1",xScale(a)) .attr("y1",yScale(-b)) .attr("x2",xScale(a)) .attr("y2",yScale(b)) .attr("stroke","cornflowerblue") .attr("stroke-width",4) .attr("stroke-dasharray",3) svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(-b)) .attr("x2",xScale(0)) .attr("y2",yScale(b)) .attr("stroke","cornflowerblue") .attr("stroke-width",4) //points svg.append("circle") .attr("cx",xScale(a)) .attr("cy",yScale(0)) .attr("r",5) .attr("stroke","black") .attr("fill","tomato") svg.append("circle") .attr("cx",xScale(-a)) .attr("cy",yScale(0)) .attr("r",5) .attr("stroke","black") .attr("fill","tomato") svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(b)) .attr("r",5) .attr("stroke","black") .attr("fill","cornflowerblue") svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(-b)) .attr("r",5) .attr("stroke","black") .attr("fill","cornflowerblue") yield svg.node() }32:[] 2f:{"title":"Equation of the Hyperbola","cells":[{"id":0,"value":"md`# Equation of the Hyperbola`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`Adjust a and b with the sliders below. All things red refer to the transverse axis and all things blue refer to the conjugate axis. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"{\n return tex`\n \\color{tomato}a = ${a}\\\\\n \\color{cornflowerblue}b = ${b}\\\\\n \\text{}\\\\\n \\color{black}\\dfrac{x^{2}}{\\color{tomato}${a}*${a}}\\color{black} - \\dfrac{y^{2}}{\\color{cornflowerblue}${b}*${b}\\color{black}} = 1\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof a = slider({min:1,max:9,step:1,display:()=>``,description:\"adjust a\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof b = slider({min:1,max:9,step:1,display:()=>``,description:\"adjust b\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html`

Variables and Code

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

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}