29:null 2a:["$","title",null,{"children":"Equation of the Ellipse | Charles Redmond | Observable"}] 2f: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() }30:[] 2d:{"id":"b9c52a6cc06180a1","slug":"equation-of-the-ellipse","title":"Equation of the Ellipse","thumbnail":"50995ddfe9ce68518318b478438129994ea337e3e277974f024308c12c14a305","access_level":"public","create_time":"$D2020-06-03T13:16:15.661Z","update_time":"$D2020-06-04T12:06:58.319Z","view_time":null,"first_public_time":"$D2020-06-04T12:07:23.555Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":116,"publish_version":116,"role":null,"authored":false,"authors":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null}],"members":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"caaad549451732ec","slug":"conic-sections","title":"Conic Sections","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"Equation of the Ellipse","cells":[{"id":0,"value":"md`# Equation of the Ellipse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof a = slider({min:1,max:10,step:1,display:()=>``})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof b = slider({min:1,max:10,step:1,display:()=>``})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`

Libraries

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