31:Ta76,{ 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)) //ellipse const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(b*Math.sqrt(1 - d*d/(a*a))))([...data,a]) 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(1 - d*d/(a*a))))([...data,a]) const y2 = svg.append("path") .attr("d",pathData2) .attr("stroke","black") .attr("fill","none") //lines const lineY = svg.append("line") .attr("x1",xScale(-a)) .attr("y1",yScale(0)) .attr("x2",xScale(a)) .attr("y2",yScale(0)) .attr("stroke",()=>{ if(a > b){return "tomato"} else if(a < b){return "cornflowerblue"} else{return "black"} }) .attr("stroke-width",3) //lines const lineX = svg.append("line") .attr("x1",xScale(0)) .attr("y1",yScale(-b)) .attr("x2",xScale(0)) .attr("y2",yScale(b)) .attr("stroke",()=>{ if(b > a){return "tomato"} else if(b < a){return "cornflowerblue"} else{return "black"} }) .attr("stroke-width",3) //points svg.append("circle") .attr("cx",xScale(a)) .attr("cy",yScale(0)) .attr("r",5) .attr("stroke","black") .attr("fill",()=>{ if(a > b){return "tomato"} else if(a < b){return "cornflowerblue"} else{return "black"} }) svg.append("circle") .attr("cx",xScale(-a)) .attr("cy",yScale(0)) .attr("r",5) .attr("stroke","black") .attr("fill",()=>{ if(a > b){return "tomato"} else if(a < b){return "cornflowerblue"} else{return "black"} }) svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(b)) .attr("r",5) .attr("stroke","black") .attr("fill",()=>{ if(b > a){return "tomato"} else if(b < a){return "cornflowerblue"} else{return "black"} }) svg.append("circle") .attr("cx",xScale(0)) .attr("cy",yScale(-b)) .attr("r",5) .attr("stroke","black") .attr("fill",()=>{ if(b > a){return "tomato"} else if(b < a){return "cornflowerblue"} else{return "black"} }) yield svg.node() }32:[] 2f:{"title":"Equation of the Ellipse","cells":[{"id":0,"value":"md`# Equation of the Ellipse`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`Move the sliders below to change the shape of the ellipse. Everything red is associated with the major axis. Everything blue is associated with the minor axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"{\n if(a > b){\n var major = a\n var minor = b\n var color1 = \"tomato\"\n var color2 = \"cornflowerblue\"\n }else if(a < b){\n var major = b\n var minor = a\n var color1 = \"cornflowerblue\"\n var color2 = \"tomato\"\n }else{\n var major = a\n var minor = b\n var color1 = \"black\"\n var color2 = \"black\"\n }\n if(a == b){\n return tex`r = ${minor} \\color{black}\\\\\\text{}\\\\ \\\\\\text{} \\\\\\text{} \\dfrac{x^{2}}{\\color{${color1}}${a}*${a}} + \\dfrac{y^{2}}{\\color{${color2}}${b}*${b}} = 1 `\n }else{return tex`\\color{tomato}a = ${major}\\\\\\color{cornflowerblue}b = ${minor} \\color{black}\\\\\\text{}\\\\ \\dfrac{x^{2}}{\\color{${color1}}${a}*${a}} + \\dfrac{y^{2}}{\\color{${color2}}${b}*${b}} = 1`}\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof a = slider({min:1,max:10,step:1,display:()=>``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof b = slider({min:1,max:10,step:1,display:()=>``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`

Variables and Code

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

Libraries

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