31:T1932,{ const svgDims = [630,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,60]) const xScale2 = d3.scaleLinear().domain([.7,1]).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)) //variables let zoom = false let c = 1 let e = .7 let a = c/e let d = a/e let whiteX = 0 let whiteY = 0 let d1 = Math.sqrt(Math.pow(whiteX-c,2) + Math.pow(whiteY,2)) let d2 = Math.sqrt(Math.abs(whiteY-d)) let ratio = d1/(d1+d2) let dataFilt = [-a,...data.filter(d => d > -a && d < a),a] const yTop = (a,e,x) => { return Math.sqrt((a*a-x*x)*(1-e*e)) } //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)) //elements let pathDataTop = d3.line().x(d => xScale(d)).y(d => yScale(yTop(a,e,d)))(dataFilt) const pathTop = svg.append("path") .attr("d",pathDataTop) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") let pathDataBottom = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(a,e,d)))(dataFilt) const pathBottom = svg.append("path") .attr("d",pathDataBottom) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") 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 line1 = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(0)) .attr("x2",xScale(c)) .attr("y2",yScale(0)) .attr("stroke","tomato") .attr("stroke-width",3) const line2 = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(0)) .attr("x2",xScale(d)) .attr("y2",yScale(0)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const directrix = svg.append("line") .attr("x1",xScale(d)) .attr("y1",yScale(10)) .attr("x2",xScale(d)) .attr("y2",yScale(-10)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const focus = svg.append("circle") .attr("cx",xScale(c)) .attr("cy",yScale(0)) .attr("r",7) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","tomato") const whiteCirc = svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(0)) .attr("r",7) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","white") const ecc = svg.append("circle") .attr("cx",xScale2(.7)) .attr("cy",10) .attr("r",7) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","lime") const greenLine = svg.append("line") .attr("x1",580) .attr("y1",yScale2(e/(1+e))) .attr("x2",630) .attr("y2",yScale2(e/(1+e))) .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<=4.94 && x>=.01){ target.attr("cx",xScale(x)) c = x a = c/e d = a/e dataFilt = [-a,...data.filter(d => d > -a && d < a),a] pathDataTop = d3.line().x(d => xScale(d)).y(d => yScale(yTop(a,e,d)))(dataFilt) pathTop.attr("d",pathDataTop) pathDataBottom = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(a,e,d)))(dataFilt) pathBottom.attr("d",pathDataBottom) directrix.attr("x1",xScale(d)).attr("x2",xScale(d)) line1.attr("x2",xScale(x)) line2.attr("x2",xScale(d)) d1 = Math.sqrt(Math.pow(whiteX-c,2) + Math.pow(whiteY,2)) d2 = Math.abs(whiteX-d) ratio = d1/(d1+d2) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) } }) focus.call(drag) const drag2 = d3.drag() .on("drag",function(){ const target = d3.select(this) let x = xScale2.invert(d3.event.x) if(x<1 && x>=.7){ target.attr("cx",xScale2(x)) e = x a = c/e d = a/e dataFilt = [-a,...data.filter(d => d > -a && d < a),a] pathDataTop = d3.line().x(d => xScale(d)).y(d => yScale(yTop(a,e,d)))(dataFilt) pathTop.attr("d",pathDataTop) pathDataBottom = d3.line().x(d => xScale(d)).y(d => yScale(-yTop(a,e,d)))(dataFilt) pathBottom.attr("d",pathDataBottom) directrix.attr("x1",xScale(d)).attr("x2",xScale(d)) line2.attr("x2",xScale(d)) d1 = Math.sqrt(Math.pow(whiteX-c,2) + Math.pow(whiteY,2)) d2 = Math.abs(whiteX-d) ratio = d1/(d1+d2) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) greenLine.attr("y1",yScale2(e/(1+e))).attr("y2",yScale2(e/(1+e))) } }) ecc.call(drag2) const drag3 = 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)<=10 && Math.abs(y)<=10){ target.attr("cx",xScale(x)).attr("cy",yScale(y)) line1.attr("x1",xScale(x)).attr("y1",yScale(y)) line2.attr("x1",xScale(x)).attr("y1",yScale(y)).attr("y2",yScale(y)) whiteX = x whiteY = y d1 = Math.sqrt(Math.pow(whiteX-c,2) + Math.pow(whiteY,2)) d2 = Math.abs(whiteX-d) ratio = d1/(d1+d2) red.attr("y2",yScale2(ratio)) blue.attr("y1",yScale2(ratio)) } }) whiteCirc.call(drag3) yield svg.node() }32:[] 2f:{"title":"The Ellipse (Focus and Directrix)","cells":[{"id":0,"value":"md`# The Ellipse (Focus and Directrix)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"html`Drag the red point (the focus) and the green point (the eccentricity) to change the shape of the ellipse. 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":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"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":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":801,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}