31:T24ee,{ const svgDims = [630,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") const lim = 10 //scales const xScale = d3.scaleLinear().domain([-lim,lim]).range([30,570]) const yScale = d3.scaleLinear().domain([-lim,lim]).range([570,60]) const xScale2 = d3.scaleLinear().domain([1,2]).range([30,570]) const yScale2 = d3.scaleLinear().domain([0,1]).range([570,60]) //axes const xAxis = svg.append("g").attr("transform","translate(0,315)").call(d3.axisBottom(xScale)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(10)) const xAxis2 = svg.append("g").attr("transform","translate(0,10)").call(d3.axisBottom(xScale2)) const yAxis2 = svg.append("g").attr("transform",`translate(600,0)`).call(d3.axisRight(yScale2)) //clip const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",540) .attr("height",510) .attr("x",xScale(-10)) .attr("y",yScale(10)) //initialize state const state = { focus:{x:1,y:0}, point:{x:0,y:0}, ecc:{x:1.5}, a:{x:1/1.5,y:0} } //variables let dataFilt = [...data.filter(d => d < -state.a.x),-state.a.x,...data.filter(d => d < -state.a.x).reverse()] let d1 = Math.sqrt(Math.pow(state.point.x-state.focus.x,2) + Math.pow(state.point.y,2)) let d2 = Math.abs(state.point.x-state.a.x/state.ecc.x) console.log(d1,d2) let ratio = d1/(d1+d2) const yTop = (a,e,x) => { return Math.sqrt((a*a-x*x)*(1-e*e)) } //updates const updateFocus = (focus,x,rLine,directrix,bLine,path1,path2,path3,path4,red,blue) => { state.focus.x = x focus.attr("cx",xScale(state.focus.x)) rLine.attr("x2",xScale(state.focus.x)) directrix.attr("x1",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) .attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) bLine.attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) state.a.x = state.focus.x/state.ecc.x const dataFilt = [...data.filter(d => d < -state.a.x),-state.a.x,...data.filter(d => d < -state.a.x).reverse()] const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData3 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) const pathData4 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) path1.attr("d",pathData1) path2.attr("d",pathData2) path3.attr("d",pathData3) path4.attr("d",pathData4) const d1 = Math.sqrt(Math.pow(state.point.x-state.focus.x,2) + Math.pow(state.point.y,2)) const d2 = Math.abs(state.point.x-state.a.x/state.ecc.x) const ratio = d1/(d1+d2) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) } const updatePoint = (point,x,y,rLine,bLine,red,blue) => { state.point.x = x state.point.y = y point.attr("cx",xScale(state.point.x)).attr("cy",yScale(state.point.y)) rLine.attr("x1",xScale(state.point.x)).attr("y1",yScale(state.point.y)) bLine.attr("x1",xScale(state.point.x)).attr("y1",yScale(state.point.y)).attr("y2",yScale(state.point.y)) const d1 = Math.sqrt(Math.pow(state.point.x-state.focus.x,2) + Math.pow(state.point.y,2)) const d2 = Math.abs(state.point.x-state.a.x/state.ecc.x) const ratio = d1/(d1+d2) console.log(d1,d2,ratio) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) } const updateEcc = (ecc,x,directrix,bLine,path1,path2,path3,path4,greenLine,red,blue) => { state.ecc.x = x ecc.attr("cx",xScale2(x)) directrix.attr("x1",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) .attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) bLine.attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) state.a.x = state.focus.x/state.ecc.x const dataFilt = [...data.filter(d => d < -state.a.x),-state.a.x,...data.filter(d => d < -state.a.x).reverse()] const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData3 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) const pathData4 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) path1.attr("d",pathData1) path2.attr("d",pathData2) path3.attr("d",pathData3) path4.attr("d",pathData4) const d1 = Math.sqrt(Math.pow(state.point.x-state.focus.x,2) + Math.pow(state.point.y,2)) const d2 = Math.abs(state.point.x-state.a.x/state.ecc.x) const ratio = d1/(d1+d2) greenLine.attr("y1",yScale2(state.ecc.x/(1+state.ecc.x))) .attr("y2",yScale2(state.ecc.x/(1+state.ecc.x))) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) } //elements const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt) const pathData3 = d3.line().x(d => xScale(d)).y(d => yScale(yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) const pathData4 = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(state.focus.x/state.ecc.x,state.ecc.x,d)))(dataFilt.map(d => -d)) const hyperbola1 = svg.append("path") .attr("d",pathData1) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const hyperbola2 = svg.append("path") .attr("d",pathData2) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const hyperbola3 = svg.append("path") .attr("d",pathData3) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const hyperbola4 = svg.append("path") .attr("d",pathData4) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const rLine = svg.append("line") .attr("x1",xScale(state.point.x)) .attr("y1",yScale(state.point.y)) .attr("x2",xScale(state.focus.x)) .attr("y2",yScale(state.focus.y)) .attr("stroke","tomato") .attr("stroke-width",3) const bLine = svg.append("line") .attr("x1",xScale(state.point.x)) .attr("y1",yScale(state.point.y)) .attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) .attr("y2",yScale(state.point.y)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const red = svg.append("line") .attr("x1",600) .attr("y1",yScale2(0)) .attr("x2",600) .attr("y2",yScale2(ratio)) .attr("stroke","tomato") .attr("stroke-width",4) const blue = svg.append("line") .attr("x1",600) .attr("y1",yScale2(ratio)) .attr("x2",600) .attr("y2",yScale2(1)) .attr("stroke","cornflowerblue") .attr("stroke-width",4) const directrix = svg.append("line") .attr("x1",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) .attr("y1",yScale(-lim)) .attr("x2",xScale(state.focus.x/(state.ecc.x*state.ecc.x))) .attr("y2",yScale(lim)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const focus = svg.append("circle") .attr("r",7) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(state.focus.x)) .attr("cy",yScale(0)) const point = svg.append("circle") .attr("r",7) .attr("stroke","black") .attr("fill","white") .attr("cx",xScale(state.point.x)) .attr("cy",yScale(state.point.y)) const ecc = svg.append("circle") .attr("r",7) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","lime") .attr("cx",xScale2(state.ecc.x)) .attr("cy",10) const greenLine = svg.append("line") .attr("x1",580) .attr("y1",yScale2(state.ecc.x/(1+state.ecc.x))) .attr("x2",630) .attr("y2",yScale2(state.ecc.x/(1+state.ecc.x))) .attr("stroke-width",2) .attr("stroke","lime") //drag behavior const drag = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = parseFloat(d3.format(".2f")(xScale.invert(d3.event.x))) if(x<=lim && x>=0){ updateFocus(target,x,rLine,directrix,bLine,hyperbola1,hyperbola2,hyperbola3,hyperbola4,red,blue) } }) focus.call(drag) const drag2 = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = parseFloat(d3.format(".2f")(xScale.invert(d3.event.x))) let y = parseFloat(d3.format(".2f")(yScale.invert(d3.event.y))) if(Math.abs(x)<=lim && Math.abs(y)<=lim){ updatePoint(target,x,y,rLine,bLine,red,blue) } }) point.call(drag2) const drag3 = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = xScale2.invert(d3.event.x) if(x>=1.01 && x<=2){ updateEcc(target,x,directrix,bLine,hyperbola1,hyperbola2,hyperbola3,hyperbola4,greenLine,red,blue) } }) ecc.call(drag3) yield svg.node() }32:[] 2f:{"title":"Hyperbola (Focus and Directrix)","cells":[{"id":0,"value":"md`# Hyperbola (Focus and Directrix)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html`Drag the red point (the focus) and the green point (the eccentricity) to change the shape of the hyperbola. Drag the white point and observe its distance to both the focus and the directrix (the vertical blue line). To be on the ellipse, the ratio of the red to blue lengths should be equal to the eccentricity. That is achieved when the red and the blue meet at the green on the gauge on the right.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = {\n const data = []\n for(let i = -10;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":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}