https://www.stats4stem.org/_next/static/chunks/36139.4261f26bf90818a5.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[36139],{36139:(e,t,s)=>{s.r(t),s.d(t,{ScatterplotLSRL:()=>y,default:()=>u});var l=s(95155),r=s(12115);let a={top:30,right:30,bottom:50,left:60},n=600-a.left-a.right,i=400-a.top-a.bottom,x=200-a.top-a.bottom,o={"height-weight":{label:"Height vs Weight",points:[{x:60,y:105},{x:62,y:120},{x:64,y:130},{x:66,y:140},{x:68,y:155},{x:70,y:165},{x:72,y:180},{x:74,y:190},{x:65,y:135},{x:67,y:150},{x:69,y:160},{x:71,y:170}],xLabel:"Height (inches)",yLabel:"Weight (lbs)"},"study-score":{label:"Study Hours vs Score",points:[{x:1,y:52},{x:2,y:58},{x:3,y:65},{x:4,y:70},{x:5,y:74},{x:6,y:82},{x:7,y:85},{x:8,y:90},{x:3,y:60},{x:5,y:78},{x:2,y:55},{x:6,y:80}],xLabel:"Hours Studied",yLabel:"Test Score"}};function c(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.1;if(e===t)return[e-1,t+1];let l=t-e;return[e-l*s,t+l*s]}function d(e,t){let s,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:6,r=(t-e)/l,a=Math.pow(10,Math.floor(Math.log10(r))),n=r/a,i=[],x=Math.ceil(e/(s=n<=1.5?a:n<=3?2*a:n<=7?5*a:10*a))*s;for(;x<=t;)i.push(x),x+=s;return i}function m(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;return Number.isFinite(e)?e.toFixed(t):"—"}function h(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4;return Number.isFinite(e)?e.toFixed(t):"—"}let u=y;function y(){let[e,t]=(0,r.useState)([]),[s,u]=(0,r.useState)(!0),[y,g]=(0,r.useState)(!1),[b,j]=(0,r.useState)(!1),[v,N]=(0,r.useState)(!1),[k,M]=(0,r.useState)(null),[w,S]=(0,r.useState)(null),[C,W]=(0,r.useState)("x"),[D,L]=(0,r.useState)("y"),A=(0,r.useRef)(null),R=(0,r.useRef)(null),q=(0,r.useMemo)(()=>(function(e){let t=e.length;if(t<2)return null;let s=e.reduce((e,t)=>e+t.x,0)/t,l=e.reduce((e,t)=>e+t.y,0)/t,r=Math.sqrt(e.reduce((e,t)=>e+(t.x-s)**2,0)/(t-1)),a=Math.sqrt(e.reduce((e,t)=>e+(t.y-l)**2,0)/(t-1));if(0===r||0===a)return null;let n=e.reduce((e,t)=>e+(t.x-s)/r*((t.y-l)/a),0)/(t-1),i=a/r*n,x=l-i*s,o=e.map(e=>({x:e.x,y:e.y,predicted:x+i*e.x,residual:e.y-(x+i*e.x)}));return{slope:i,intercept:x,r:n,rSquared:n*n,xMean:s,yMean:l,xSD:r,ySD:a,residuals:o,n:t}})(e),[e]),{xScale:E,yScale:F,xDomain:P,yDomain:T,xTicks:H,yTicks:I}=(0,r.useMemo)(()=>{if(0===e.length)return{xScale:e=>a.left+(e-0)/100*n,yScale:e=>a.top+i-(e-0)/100*i,xDomain:[0,100],yDomain:[0,100],xTicks:d(0,100),yTicks:d(0,100)};let t=e.map(e=>e.x),s=e.map(e=>e.y),l=c(Math.min(...t),Math.max(...t)),r=c(Math.min(...s),Math.max(...s));return{xScale:e=>a.left+(e-l[0])/(l[1]-l[0])*n,yScale:e=>a.top+i-(e-r[0])/(r[1]-r[0])*i,xDomain:l,yDomain:r,xTicks:d(l[0],l[1]),yTicks:d(r[0],r[1])}},[e]),{rScale:_,rTicks:X}=(0,r.useMemo)(()=>{if(!q)return{rScale:()=>a.top+x/2,rDomain:[-1,1],rTicks:[-1,0,1]};let e=q.residuals.map(e=>e.residual),t=Math.max(Math.abs(Math.min(...e)),Math.abs(Math.max(...e)),.1),s=[-(1.2*t),1.2*t];return{rScale:e=>a.top+x-(e-s[0])/(s[1]-s[0])*x,rDomain:s,rTicks:d(s[0],s[1],4)}},[q]),Y=(0,r.useMemo)(()=>{if(!q||e.length<3)return null;var t=q.xMean;let s=e.length,l=e.reduce((e,s)=>e+(s.x-t)**2,0);return 0===l?e.map(()=>1/s):e.map(e=>1/s+(e.x-t)**2/l)},[e,q]),B=(0,r.useCallback)((e,t,s)=>{let l=e.getBoundingClientRect(),r=t-l.left,x=s-l.top;return{x:P[0]+(r-a.left)/n*(P[1]-P[0]),y:T[0]+(a.top+i-x)/i*(T[1]-T[0])}},[P,T]),O=(0,r.useCallback)((e,t)=>{var s,l;e.preventDefault(),e.stopPropagation(),M(t),null==(s=(l=e.target).setPointerCapture)||s.call(l,e.pointerId)},[]),U=(0,r.useCallback)(e=>{if(null===k||!A.current)return;let s=B(A.current,e.clientX,e.clientY);t(e=>e.map((e,t)=>t===k?s:e))},[k,B]),z=(0,r.useCallback)(()=>{M(null)},[]),G=(0,r.useCallback)(e=>{if(null!==k||!A.current)return;let s=B(A.current,e.clientX,e.clientY);s.x<P[0]||s.x>P[1]||s.y<T[0]||s.y>T[1]||t(e=>[...e,s])},[k,B,P,T]),J=(0,r.useCallback)(e=>{t(t=>t.filter((t,s)=>s!==e))},[]),K=(0,r.useCallback)(e=>{let s=o[e];s&&(t([...s.points]),W(s.xLabel),L(s.yLabel))},[]),Q=(0,r.useCallback)(()=>{t([]),W("x"),L("y")},[]);(0,r.useEffect)(()=>{let e=e=>{var t,s;(null==(s=e.target)||null==(t=s.closest)?void 0:t.call(s,".lsrl-point"))&&e.preventDefault()};return document.addEventListener("contextmenu",e),()=>document.removeEventListener("contextmenu",e)},[]);let V=(0,r.useMemo)(()=>

1{if(!q)return null;let{slope:e,intercept:t}=q,s=P[0],l=P[1];return{x1:E(s),y1:F(t+e*s),x2:E(l),y2:F(t+e*l)}},[q,P,E,F]);return(0,l.jsxs)("div",{className:"flex flex-col gap-4 p-4 max-w-[1080px] mx-auto select-none",children:[(0,l.jsxs)("div",{className:"flex flex-col sm:flex-row items-start sm:items-center gap-3",children:[(0,l.jsx)("h2",{className:"text-xl font-bold text-gray-900",children:"Scatterplot & LSRL"}),(0,l.jsxs)("div",{className:"flex flex-wrap gap-2",children:[Object.entries(o).map(e=>{let[t,s]=e;return(0,l.jsxs)("button",{onClick:()=>K(t),className:"px-3 py-1.5 text-sm font-medium rounded-md bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 transition-colors",children:["Demo: ",s.label]},t)}),(0,l.jsx)("button",{onClick:Q,className:"px-3 py-1.5 text-sm font-medium rounded-md bg-red-50 text-red-600 hover:bg-red-100 border border-red-200 transition-colors",children:"Clear All"})]})]}),(0,l.jsxs)("div",{className:"flex flex-col lg:flex-row gap-4",children:[(0,l.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,l.jsx)("div",{className:"relative bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden",children:(0,l.jsxs)("svg",{ref:A,width:600,height:400,className:"cursor-crosshair",onClick:G,onPointerMove:U,onPointerUp:z,onPointerLeave:z,children:[H.map(e=>(0,l.jsx)("line",{x1:E(e),y1:a.top,x2:E(e),y2:a.top+i,stroke:"#e5e7eb",strokeWidth:1},"xg-".concat(e))),I.map(e=>(0,l.jsx)("line",{x1:a.left,y1:F(e),x2:a.left+n,y2:F(e),stroke:"#e5e7eb",strokeWidth:1},"yg-".concat(e))),(0,l.jsx)("line",{x1:a.left,y1:a.top+i,x2:a.left+n,y2:a.top+i,stroke:"#374151",strokeWidth:1.5}),(0,l.jsx)("line",{x1:a.left,y1:a.top,x2:a.left,y2:a.top+i,stroke:"#374151",strokeWidth:1.5}),H.map(e=>(0,l.jsx)("text",{x:E(e),y:a.top+i+20,textAnchor:"middle",className:"fill-gray-500 text-[11px]",children:m(e,+(e%1!=0))},"xt-".concat(e))),I.map(e=>(0,l.jsx)("text",{x:a.left-8,y:F(e)+4,textAnchor:"end",className:"fill-gray-500 text-[11px]",children:m(e,+(e%1!=0))},"yt-".concat(e))),(0,l.jsx)("text",{x:a.left+n/2,y:394,textAnchor:"middle",className:"fill-gray-700 text-xs font-medium",children:C}),(0,l.jsx)("text",{x:14,y:a.top+i/2,textAnchor:"middle",className:"fill-gray-700 text-xs font-medium",transform:"rotate(-90, 14, ".concat(a.top+i/2,")"),children:D}),s&&q&&q.residuals.map((e,t)=>(0,l.jsx)("line",{x1:E(e.x),y1:F(e.y),x2:E(e.x),y2:F(e.predicted),stroke:"#d1d5db",strokeWidth:1,strokeDasharray:"3,3"},"res-".concat(t))),s&&b&&q&&q.residuals.map((e,t)=>{let s=Math.abs(F(e.y)-F(e.predicted));if(s<1)return null;let r=Math.min(F(e.y),F(e.predicted));return(0,l.jsx)("rect",{x:E(e.x),y:r,width:s,height:s,fill:"#bbf7d0",stroke:"#4ade80",strokeWidth:1,opacity:.5},"sq-".concat(t))}),s&&V&&(0,l.jsx)("line",{x1:V.x1,y1:V.y1,x2:V.x2,y2:V.y2,stroke:"#ef4444",strokeWidth:2}),q&&s&&(0,l.jsxs)("g",{children:[(0,l.jsx)("line",{x1:E(q.xMean)-8,y1:F(q.yMean),x2:E(q.xMean)+8,y2:F(q.yMean),stroke:"#ef4444",strokeWidth:1.5,opacity:.5}),(0,l.jsx)("line",{x1:E(q.xMean),y1:F(q.yMean)-8,x2:E(q.xMean),y2:F(q.yMean)+8,stroke:"#ef4444",strokeWidth:1.5,opacity:.5})]}),e.map((t,s)=>{var r,a,n;let i=v&&Y&&Y[s]>2/(null!=(a=null==q?void 0:q.n)?a:e.length),x=k===s,o=w===s;return(0,l.jsxs)("g",{className:"lsrl-point",children:[(0,l.jsx)("circle",{cx:E(t.x),cy:F(t.y),r:12,fill:"transparent",className:"cursor-grab active:cursor-grabbing",onPointerDown:e=>O(e,s),onDoubleClick:()=>J(s),onMouseEnter:()=>S(s),onMouseLeave:()=>S(null)}),(0,l.jsx)("circle",{cx:E(t.x),cy:F(t.y),r:x||o?8:6,fill:x?"#f59e0b":i?"#f97316":"#3b82f6",stroke:x?"#d97706":i?"#ea580c":"#1d4ed8",strokeWidth:2,className:"pointer-events-none transition-[r] duration-75"}),o&&!x&&(0,l.jsxs)("g",{children:[(0,l.jsx)("rect",{x:E(t.x)+12,y:F(t.y)-36,width:q?160:120,height:q?42:24,rx:4,fill:"white",stroke:"#d1d5db",strokeWidth:1}),(0,l.jsxs)("text",{x:E(t.x)+18,y:F(t.y)-20,className:"fill-gray-800 text-[11px] font-mono",children:["(",m(t.x),", ",m(t.y),")"]}),q&&(0,l.jsxs)("text",{x:E(t.x)+18,y:F(t.y)-6,className:"fill-gray-500 text-[10px] font-mono",children:["resid: ",m(null!=(n=null==(r=q.residuals[s])?void 0:r.residual)?n:0,3)]})]})]},s)}),0===e.length&&(0,l.jsx)("text",{x:a.left+n/2,y:a.top+i/2,textAnchor:"middle",className:"fill-gray-400 text-sm",children:"Click anyw

1here to add points"})]})}),y&&q&&(0,l.jsx)("div",{className:"relative bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden",children:(0,l.jsxs)("svg",{ref:R,width:600,height:200,children:[H.map(e=>(0,l.jsx)("line",{x1:E(e),y1:a.top,x2:E(e),y2:a.top+x,stroke:"#e5e7eb",strokeWidth:1},"rxg-".concat(e))),X.map(e=>(0,l.jsx)("line",{x1:a.left,y1:_(e),x2:a.left+n,y2:_(e),stroke:"#e5e7eb",strokeWidth:1},"ryg-".concat(e))),(0,l.jsx)("line",{x1:a.left,y1:a.top+x,x2:a.left+n,y2:a.top+x,stroke:"#374151",strokeWidth:1.5}),(0,l.jsx)("line",{x1:a.left,y1:a.top,x2:a.left,y2:a.top+x,stroke:"#374151",strokeWidth:1.5}),(0,l.jsx)("line",{x1:a.left,y1:_(0),x2:a.left+n,y2:_(0),stroke:"#6b7280",strokeWidth:1.5,strokeDasharray:"6,4"}),H.map(e=>(0,l.jsx)("text",{x:E(e),y:a.top+x+20,textAnchor:"middle",className:"fill-gray-500 text-[11px]",children:m(e,+(e%1!=0))},"rxt-".concat(e))),X.map(e=>(0,l.jsx)("text",{x:a.left-8,y:_(e)+4,textAnchor:"end",className:"fill-gray-500 text-[11px]",children:m(e,1)},"ryt-".concat(e))),(0,l.jsx)("text",{x:a.left+n/2,y:194,textAnchor:"middle",className:"fill-gray-700 text-xs font-medium",children:C}),(0,l.jsx)("text",{x:14,y:a.top+x/2,textAnchor:"middle",className:"fill-gray-700 text-xs font-medium",transform:"rotate(-90, 14, ".concat(a.top+x/2,")"),children:"Residual"}),q.residuals.map((e,t)=>(0,l.jsx)("circle",{cx:E(e.x),cy:_(e.residual),r:5,fill:"#a855f7",stroke:"#7e22ce",strokeWidth:1.5},"rp-".concat(t))),(0,l.jsx)("text",{x:a.left+n/2,y:a.top-10,textAnchor:"middle",className:"fill-gray-400 text-[10px] italic",children:"Random scatter = good linear fit | Curved = nonlinear | Fan shape = non-constant variance"})]})}),(0,l.jsxs)("div",{className:"flex flex-wrap gap-3",children:[(0,l.jsx)(p,{label:"Show LSRL",active:s,onClick:()=>u(e=>!e)}),(0,l.jsx)(p,{label:"Show Residual Plot",active:y,onClick:()=>g(e=>!e),disabled:!q}),(0,l.jsx)(p,{label:"Show Residual Squares",active:b,onClick:()=>j(e=>!e),disabled:!q||!s}),(0,l.jsx)(p,{label:"Highlight Influential",active:v,onClick:()=>N(e=>!e),disabled:!q})]})]}),(0,l.jsx)("div",{className:"lg:w-[280px] flex-shrink-0",children:(0,l.jsxs)("div",{className:"bg-white rounded-lg border border-gray-200 shadow-sm p-4 space-y-4 sticky top-4",children:[(0,l.jsx)("h3",{className:"text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2",children:"Summary Statistics"}),q?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("div",{className:"grid grid-cols-2 gap-x-4 gap-y-1 text-sm",children:[(0,l.jsx)(f,{label:"n",value:String(q.n)}),(0,l.jsx)(f,{label:"",value:""}),(0,l.jsx)(f,{label:"".concat(C," mean"),value:h(q.xMean)}),(0,l.jsx)(f,{label:"".concat(D," mean"),value:h(q.yMean)}),(0,l.jsx)(f,{label:"sₓ",value:h(q.xSD)}),(0,l.jsx)(f,{label:"sᵧ",value:h(q.ySD)})]}),(0,l.jsxs)("div",{className:"border-t border-gray-100 pt-3 space-y-2",children:[(0,l.jsxs)("div",{className:"flex items-center justify-between text-sm",children:[(0,l.jsx)("span",{className:"text-gray-500 font-medium",children:"r"}),(0,l.jsx)("span",{className:"font-mono font-semibold text-gray-900",children:h(q.r)})]}),(0,l.jsxs)("div",{className:"flex items-center justify-between text-sm",children:[(0,l.jsx)("span",{className:"text-gray-500 font-medium",children:"r\xb2"}),(0,l.jsx)("span",{className:"font-mono font-semibold text-gray-900",children:h(q.rSquared)})]})]}),(0,l.jsxs)("div",{className:"border-t border-gray-100 pt-3",children:[(0,l.jsx)("p",{className:"text-xs text-gray-500 font-medium mb-1",children:"LSRL Equation"}),(0,l.jsxs)("p",{className:"font-mono text-sm text-gray-900",children:[(0,l.jsx)("span",{className:"font-serif italic",children:"ŷ"})," ="," ",m(q.intercept,4)," ",q.slope>=0?"+":"−"," ",m(Math.abs(q.slope),4),"x"]})]}),(0,l.jsxs)("div",{className:"border-t border-gray-100 pt-3",children:[(0,l.jsx)("p",{className:"text-xs text-gray-500 font-medium mb-1",children:"Interpretation"}),(0,l.jsxs)("p",{className:"text-xs text-gray-600 leading-relaxed",children:["For each 1-unit increase in ",C,","," ",(0,l.jsx)("span",{className:"font-serif italic",children:"ŷ"})," ",q.slope>=0?"increases":"decreases"," by"," ",(0,l.jsx)("span",{className:"font-mono font-medium",children:m(Math.abs(q.slope),4)})," ",D,"."]}),(0,l.jsxs)("p",{className:"text-xs text-gray-600 leading-relaxed mt-1",children:[m(100*q.rSquared,1),"% of the variation in ",D," is explained by the linear relationship with ",C,"."]})]})]}):(0,l.jsx)("p",{className:"text-sm text-gray-400 italic",children:0===e.length?"Add at least 2 points to see stats.":1===e.length?"Add one more point.":"Insufficient variation in data."}),e.length>0&&(0,l.jsxs)("div",{className:"border-t border-gray-100 pt-3",children:[(0,l.jsxs)("p",{className:"text-xs text-gray-500 font-medium mb-2",children:["Data (",e.length," point",1!==e.length?"s":"",")"]}),(0,l.jsx)("div",{className:"max-h-[200px] overflow-y-auto",children:(0,l.jsxs)("table",{className:"w-full text-xs font-mono",children:[(0,l.jsx)("thead",{children:(0,l.jsxs)("tr",{className:"text-gray-400",children:[(0,l.jsx)("th",{className:"text-left pr-2",children:"#"}),(0,l.jsx)("th",{className:"text-right pr-2",children:"x"}),(0,l.jsx)("th",{className:"text-right",children:"y"})]})}),(0,l.jsx)("tbody",{children:e.map((e,t)=>(0,l.jsxs)("tr",{className:"".concat(w===t?"bg-blue-50":""," ").concat(k===t?"bg-amber-50":""),children:[(0,l.jsx)("td",{className:"text-gray-400 pr-2",children:t+1}),(0,l.jsx)("td",{className:"text-right pr-2",children:m(e.x)}),(0,l.jsx)("td",{className:"text-right",children:m(e.y)})]},t))})]})})]}),(0,l.jsx)("div",{className:"border-t border-gray-100 pt-3",children:(0,l.jsxs)("p",{className:"text-[10px] text-gray-400 leading-relaxed",children:[(0,l.jsx)("strong",{children:"Click"})," to add a point \xb7"," ",(0,l.jsx)("strong",{children:"Drag"})," to move \xb7"," ",(0,l.jsx)("strong",{children:"Double-click"})," to remove"]})})]})})]})]})}function p(e){let{label:t,active:s,onClick:r,disabled:a=!1}=e;return(0,l.jsx)("button",{onClick:r,disabled:a,className:"px-3 py-1.5 text-xs font-medium rounded-md border transition-colors ".concat(a?"bg-gray-50 text-gray-300 border-gray-100 cursor-not-allowed":s?"bg-blue-600 text-white border-blue-600 hover:bg-blue-700":"bg-white text-gray-600 border-gray-200 hover:bg-gray-50"),children:t})}function f(e){let{label:t,value:s}=e;return t||s?(0,l.jsxs)("div",{className:"flex items-center justify-between",children:[(0,l.jsx)("span",{className:"text-gray-500 text-xs",children:t}),(0,l.jsx)("span",{className:"font-mono text-xs font-medium text-gray-800",children:s})]}):(0,l.jsx)("div",{})}}}]);