31:T1046,{ 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([-2,2]).range([30,570]) const yScale = d3.scaleLinear().domain([-2,2]).range([570,60]) const xScale2 = d3.scaleLinear().domain([0,1]).range([30,570]) //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,0)").call(d3.axisBottom(xScale2)) //clip const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",540) .attr("height",540) .attr("x",xScale(-2)) .attr("y",yScale(2)) //variables let p = 1 let whiteX = 0 let whiteY = 0 let d1 = Math.sqrt(Math.pow(whiteX-0,2) + Math.pow(whiteY-p,2)) let d2 = Math.sqrt(Math.abs(whiteY+p)) let ratio = d1/(d1+d2) //elements const red = svg.append("line") .attr("x1",xScale2(0)) .attr("y1",0) .attr("x2",xScale2(ratio)) .attr("y2",0) .attr("stroke","tomato") .attr("stroke-width",15) const blue = svg.append("line") .attr("x1",xScale2(ratio)) .attr("y1",0) .attr("x2",xScale2(1)) .attr("y2",0) .attr("stroke","cornflowerblue") .attr("stroke-width",15) let pathData = d3.line().x(d => xScale(d)).y(d => yScale((d*d)/(4*p)))(data) const path = svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") const line1 = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(p)) .attr("x2",xScale(0)) .attr("y2",yScale(0)) .attr("stroke","tomato") .attr("stroke-width",3) const line2 = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(-p)) .attr("x2",xScale(0)) .attr("y2",yScale(0)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) const focus = svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(p)) .attr("r",7) .attr("stroke","black") .attr("stroke-width",2) .attr("fill","tomato") const directrix = svg.append("line") .attr("x1",xScale(-2)) .attr("y1",yScale(-p)) .attr("x2",xScale(2)) .attr("y2",yScale(-p)) .attr("stroke","cornflowerblue") .attr("stroke-width",3) 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") //drag behaviors const drag = d3.drag() .on("drag",function(){ const target = d3.select(this) let y = yScale.invert(d3.event.y) if(y<=2 && y>=.01){ target.attr("cy",yScale(y)) p = y directrix.attr("y1",yScale(-p)).attr("y2",yScale(-p)) line1.attr("y1",yScale(p)) line2.attr("y1",yScale(-p)) pathData = d3.line().x(d => xScale(d)).y(d => yScale((d*d)/(4*p)))(data) path.attr("d",pathData) d1 = Math.sqrt(Math.pow(whiteX-0,2) + Math.pow(whiteY-p,2)) d2 = Math.abs(whiteY+p) ratio = d1/(d1+d2) red.attr("x2",xScale2(ratio)) blue.attr("x1",xScale2(ratio)) } }) 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 = yScale.invert(d3.event.y) if(Math.abs(x)<=2 && Math.abs(y)<=2){ target.attr("cx",xScale(x)).attr("cy",yScale(y)) whiteX = x whiteY = y line1.attr("x2",xScale(x)).attr("y2",yScale(y)) line2.attr("x2",xScale(x)).attr("y2",yScale(y)).attr("x1",xScale(x)) d1 = Math.sqrt(Math.pow(whiteX-0,2) + Math.pow(whiteY-p,2)) d2 = Math.abs(whiteY+p) ratio = d1/(d1+d2) red.attr("x2",xScale2(ratio)) blue.attr("x1",xScale2(ratio)) } }) whiteCirc.call(drag2) yield svg.node() }32:[] 2f:{"title":"Parabola via Focus and Directrix","cells":[{"id":0,"value":"md`# Parabola via Focus and Directrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"value":"html`Drag the focus (red point) to change the shape of the parabola. You can also drag the white point to visualize it's distance to the focus and the directrix. The gauge at the top let's you know which distance is greater.`","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 = -2;i<=2;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"}