29:null 2a:["$","title",null,{"children":"Vertical Distance to a Line or Curve | Charles Redmond | Observable"}] 2f:T89a,{ b d3.selectAll("#table .row").remove() const svgDims = [600,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") const xScale = d3.scaleLinear().domain([-10,10]).range([30,570]) const yScale = d3.scaleLinear().domain([-10,10]).range([570,30]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale)) let count = 0 const f = (x) => { if(curve == "line"){ return .5*x+1 }else{ return -.1*x*x+6 } } const pathData1 = d3.line().x(d => xScale(d)).y(d => yScale(.5*d + 1))(data) const path1 = svg.append("path").attr("d",pathData1).attr("stroke","black").attr("fill","none") .attr("opacity",()=> curve == "line"?1:0) const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(-.1*d*d + 6))(data) const path2 = svg.append("path").attr("d",pathData2).attr("stroke","black").attr("fill","none") .attr("opacity",()=> curve == "curve"?1:0) svg.on("click",function(){ const target = d3.select(this) const x = d3.mouse(this)[0] const y = d3.mouse(this)[1] const absError = d3.format(".1f")(Math.abs(yScale.invert(y) - f(xScale.invert(x)))) const squaredError = d3.format(".1f")(Math.pow(yScale.invert(y) - f(xScale.invert(x)),2)) if(count < 10 && Math.abs(xScale.invert(x))<=10 && Math.abs(yScale.invert(x))<=10){ target.append("line") .attr("x1",x) .attr("y1",y) .attr("x2",x) .attr("y2",yScale(f(xScale.invert(x)))) .attr("stroke","black") target.append("circle").attr("r",5).attr("cx",x).attr("cy",y).attr("stroke","black") .attr("fill","tomato") const row = d3.select("#table").append("tr").attr("class","row") row .append("td").text(`${d3.format(".1f")(xScale.invert(x))}`) row.append("td").text(`${d3.format(".1f")(yScale.invert(y))}`) row.append("td").text(`${d3.format(".1f")(f(xScale.invert(x)))}`) row.append("td").text(`${absError}`) row.append("td").text(`${squaredError}`) count++ } }) yield svg.node() }30:[] 2d:{"id":"a7c27f3b8dfa8854","slug":"vertical-distance-to-a-line-or-curve","title":"Vertical Distance to a Line or Curve","thumbnail":"37470d07e0ec99c5465af55c9a672c364ef592701d418adf9dca427f801dd4bc","access_level":"public","create_time":"$D2020-06-08T22:13:48.790Z","update_time":"$D2020-11-04T21:39:24.025Z","view_time":null,"first_public_time":"$D2020-06-10T15:19:18.911Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":152,"publish_version":152,"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":18,"collection":{"id":"6c5e647a4bb0a37b","slug":"regression","title":"Regression","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"Vertical Distance to a Line or Curve","cells":[{"id":0,"value":"md`# Vertical Distance to a Line or Curve\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof b = button({value:\"reset\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"tex`y = .5x + 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof curve = radio({options:[\"line\",\"curve\"],value:\"line\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"html`\n\n \n \n \n \n \n \n \n\n \n

${tex`\\large x`}	${tex`\\large y`}	${tex`\\large \\hat{y}`}	${tex`\\large \\mid y - \\hat{y} \\mid`}	${tex`\\large (y-\\hat{y})^{2}`}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`

Variables and Code

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

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"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":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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"