31:T854,{ const svgDims = [600,630] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") d3.selectAll("#table .row").remove() const xScale = d3.scaleLinear().domain([-10,10]).range([30,570]) const yScale = d3.scaleLinear().domain([-50,50]).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)) const pathData = d3.line().x(d => xScale(d)).y(d => yScale(slope*d + intercept))(data) const path = svg.append("path") .attr("d",pathData) .attr("stroke","cornflowerblue") .attr("stroke-width",2) .attr("fill","none") const pathData2 = d3.line().x(d => xScale(d)).y(d => yScale(slope2*d + intercept2))(data) const path2 = svg.append("path") .attr("d",pathData2) .attr("stroke","tomato") .attr("opacity",()=>{ return rline[0]=="1"?1:0 }) .attr("stroke-width",2) .attr("fill","none") mutable error = [] for(let i = 0; i <= n-1; i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(points[i].x)) .attr("cy",yScale(points[i].y)) svg.append("line") .attr("x1",xScale(points[i].x)) .attr("y1",yScale(points[i].y)) .attr("x2",xScale(points[i].x)) .attr("y2",yScale(slope*points[i].x + intercept)) .attr("stroke","black") .attr("stroke-dasharray",4) .attr("stroke-width",2) .attr("opacity",()=>{ return rline[0]=="2" || rline[1]=="2"?1:0 }) if(rline[0]=="2" || rline[1]=="2"){ const row = d3.select("#table").append("tr").attr("class","row") row.append("td").text(d3.format(".2f")(points[i].x)) row.append("td").text(d3.format(".2f")(points[i].y)) row.append("td").text(d3.format(".2f")(slope*points[i].x + intercept)) row.append("td").text(d3.format(".2f")(Math.pow(slope*points[i].x + intercept-points[i].y,2))) mutable error.push(Math.pow(slope*points[i].x + intercept-points[i].y,2)) } } yield svg.node() }32:[] 2f:{"title":"How Close is the Line?","cells":[{"id":0,"value":"md`# How Close is the Line?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof n = number({min:1,max:100,step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof b = button({value:\"refresh points\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof rline = checkbox({options:[\n {label:\"show/hide true regression line\",value:1},\n {label:\"show/hide calculations\",value:2}\n ]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"rmse = {\n if(rline[0]==\"2\" || rline[1]==\"2\"){\n return Math.sqrt(d3.mean(error))\n }else{\n return `?`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof slope = slider({min:-10,max:10,description:\"set slope\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof intercept = slider({min:-50,max:50,description:\"set intercept\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html`\n\n \n \n \n \n \n \n \n

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"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":53,"value":"points = {\n b\n const points = []\n const sd = Math.random()*5+5\n for(let i = 0;i <= n-1; i++){\n const x = Math.random()*10-5\n const y = slope2*x+intercept2+normal(0,sd)\n if(Math.abs(y) < 50){\n points.push({x:x,y:y})\n }else{\n points.push({x:x,y:0})}\n }\n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"slope2 = {\n b\n return Math.random()*10-5\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"intercept2 = {\n b\n return Math.random()*20-10\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"mutable error = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"normal = stdlib.base.random.normal","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}