31: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() }32:[] 2f:{"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"},{"id":117,"value":"viewof b = button({value:\"reset\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"tex`y = .5x + 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof curve = radio({options:[\"line\",\"curve\"],value:\"line\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":26,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":7,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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"}