https://letsdatascience.com/_next/static/chunks/3492.a49adb96b4aec232.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3492],{3492:(e,t,s)=>{s.r(t),s.d(t,{default:()=>w});var l=s(95155),r=s(12115),a=s(41407),i=s(26497),n=s(83126),o=s(66630),d=s(50906),c=s(17666),x=s(81336);let h=[.93,.81,.72,.58,.51,.34,.12],u=[.46,.41,.38,.34,.31,.28,.25,.23,.21,.19,.18,.16,.15,.14,.13,.12,.11,.1,.09,.09,.08,.08,.07,.07,.06,.06,.05,.05,.04,.04,.04,.03,.03,.03,.02,.02,.02,.02,.01,.01,.01,.01,.01];function m(e){let t=h.filter(t=>t>=e).length,s=h.length-t,l=u.filter(t=>t>=e).length,r=u.length-l,a=t+l?t/(t+l):0,i=t+s?t/(t+s):0;return{TP:t,FN:s,FP:l,TN:r,prec:a,rec:i,f1:a+i?2*a*i/(a+i):0,acc:(t+r)/50,cost:1500*s+80*l}}let g=Array.from({length:91},(e,t)=>+(.05+.01*t).toFixed(2)),f=1/0,b=.5;g.forEach(e=>{let t=m(e).cost;t<f&&(f=t,b=e)});let p=f,j=b,y=m(.5).cost,v=[{t:"The setup, 50 test loans, each with a P(default) score",w:"The model outputs a probability for every loan. Red dots defaulted, green repaid. Notice they overlap in the middle, no score perfectly separates them."},{t:"The threshold turns probabilities into decisions",w:"Pick a cutoff t. Every loan scoring ≥ t gets flagged (ringed) as a predicted default and rejected. The model is the probabilities; the threshold is the policy."},{t:"Confusion matrix, four cells, counted live",w:"Compare prediction vs reality: TP (caught defaults), FP (good loans wrongly rejected), FN (missed defaults), TN (correctly approved). Every count is derived from the slider."},{t:"Slide to 0.10, recall hits 1.00, precision collapses",w:"Lower the bar and you catch every defaulter (recall 1.00), but you also reject 18 good loans (precision 0.28). Safety bought with fal

1se alarms."},{t:"Slide to 0.70, precision hits 1.00, recall falls",w:"Raise the bar and every rejection is a real default (precision 1.00), but you miss 4 defaulters (recall 0.43). Confidence bought with blind spots."},{t:"There is no right threshold without a cost",w:"A missed default (FN) costs $1,500; a wrongly-rejected good loan (FP) costs $80, a 19\xd7 asymmetry. Sweep the slider and watch the dollar cost. The minimum is far below 0.50."}],N=[.5,.5,.5,.1,.7,.12];function w(){let e=(0,a.I)(),[t,s]=(0,r.useState)("guided"),[g,f]=(0,r.useState)(0),[b,w]=(0,r.useState)(!1),[A,T]=(0,r.useState)(.5),S=(0,r.useRef)(null);(0,r.useEffect)(()=>{if(b&&"guided"===t)return S.current=setTimeout(()=>{g<5?f(e=>e+1):w(!1)},3800),()=>{S.current&&clearTimeout(S.current)}},[b,g,t]),(0,r.useEffect)(()=>{"guided"===t&&T(N[g])},[g,t]);let C=(0,r.useCallback)(()=>{f(0),T(.5),w(!1)},[]),z=(0,r.useMemo)(()=>m(A),[A]),$="explore"===t||g>=1,L="explore"===t||g>=2,E="explore"===t||g>=5,R=(0,r.useMemo)(()=>{let e=(e,t)=>e.map((e,s)=>({p:e,band:t,y:1===t?28+37*s%30:92+53*s%34}));return[...e(h,1),...e(u,0)]},[]);return(0,l.jsxs)(x.A,{title:"One Model, Infinite Decisions",description:"Drag the threshold, watch decisions, metrics, and cost move together.",icon:o.A,currentStep:g+1,totalSteps:6,isPlaying:b,onReset:C,onPrev:()=>f(e=>Math.max(0,e-1)),onNext:()=>f(e=>Math.min(5,e+1)),onTogglePlay:()=>w(e=>!e),onStepClick:e=>f(e),children:[(0,l.jsx)("div",{className:"flex gap-1.5 mb-2",children:["guided","explore"].map(e=>(0,l.jsx)("button",{onClick:()=>{s(e),w(!1)},className:"px-3 py-1 text-xs font-semibold rounded-lg border-2 transition-all ".concat(t===e?"bg-neutral-900 text-white border-neutral-900":"bg-white text-neutral-600 border-neutral-200 hover:border-neutral-400"),children:"guided"===e?"Guided tour":"Explore"},e))}),"guided"===t&&(0,l.jsx)(i.N,{mode:"wait",children:(0,l.jsxs)(n.P.div,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},exit:{opacity:0,y:-6},transition:{duration:.2},className:"mb-1.5",children:[(0,l.jsx)("h4",{className:"text-base font-bold text-neutral-900 mb-0.5",children:v[g].t}),(0,l.jsx)("p",{className:"text-sm text-neutral-600 leading-snug",children:v[g].w})]},g)}),(0,l.jsx)("div",{className:"bg-neutral-50 border border-neutral-200 rounded-xl p-1.5 overflow-x-auto",children:(0,l.jsx)("div",{className:"mx-auto",style:{maxWidth:360},children:(0,l.jsxs)("svg",{viewBox:"0 0 ".concat(560," ").concat(150),className:"w-full",children:[(0,l.jsx)("text",{x:36,y:20,fontSize:"10",fill:"#dc2626",fontWeight:"700",children:"defaulted (7)"}),(0,l.jsx)("text",{x:36,y:86,fontSize:"10",fill:"#16a34a",fontWeight:"700",children:"repaid (43)"}),(0,l.jsx)("line",{x1:36,y1:128,x2:524,y2:128,stroke:"#cbd5e1"}),[0,.25,.5,.75,1].map(e=>(0,l.jsxs)("g",{children:[(0,l.jsx)("line",{x1:36+488*e,y1:125,x2:36+488*e,y2:131,stroke:"#94a3b8"}),(0,l.jsx)("text",{x:36+488*e,y:142,fontSize:"9",fill:"#94a3b8",textAnchor:"middle",children:e.toFixed(2)})]},e)),(0,l.jsx)("text",{x:524,y:142,fontSize:"9",fill:"#94a3b8",textAnchor:"end",children:"P(default) →"}),$&&(0,l.jsx)(n.P.line,{initial:!1,animate:{x1:36+488*A,x2:36+488*A},x1:36+488*A,x2:36+488*A,y1:6,y2:128,stroke:"#f59e0b",strokeWidth:2.5,strokeDasharray:"5 3",transition:e?{duration:0}:{duration:.25}}),R.map((e,t)=>{let s=$&&e.p>=A;return(0,l.jsxs)("g",{children:[(0,l.jsx)("circle",{cx:36+488*e.p,cy:e.y,r:5,fill:e.band?"#dc2626":"#16a34a",opacity:.85}),s&&(0,l.jsx)("circle",{cx:36+488*e.p,cy:e.y,r:8,fill:"none",stroke:"#f59e0b",strokeWidth:2})]},t)}),$&&(0,l.jsxs)("text",{x:36+488*A,y:4,fontSize:"10",fill:"#b45309",textAnchor:"middle",fontWeight:"800",children:["t=",A.toFixed(2)]})]})})}),L&&(0,l.jsxs)("div",{className:"mt-2 grid grid-cols-1 sm:grid-cols-2 gap-2",children:[(0,l.jsxs)("div",{className:"grid grid-cols-2 gap-1.5",children:[(0,l.jsx)(F,{label:"TP, caught default",v:z.TP,cls:"bg-emerald-100 text-emerald-800 border-emerald-200"}),(0,l.jsx)(F,{label:"FP, good rejected",v:z.FP,cls:"bg-amber-100 text-amber-800 border-amber-200"}),(0,l.jsx)(F,{label:"FN, missed default",v:z.FN,cls:"bg-rose-100 text-rose-800 border-rose-200"}),(0,l.jsx)(F,{label:"TN, good approved",v:z.TN,cls:"bg-neutral-100 text-neutral-700 border-neutral-200"})]}),(0,l.jsxs)("div",{className:"grid grid-cols-2 gap-1.5",children:[(0,l.jsx)(k,{label:"precision",v:z.prec,hint:"of flagged, % real"}),(0,l.jsx)(k,{label:"recall",v:z.rec,hint:"of defaults, % caught"}),(0,l.jsx)(k,{label:"F1",v:z.f1,hint:"harmonic mean"}),(0,l.jsx)(k,{label:"accuracy",v:z.acc,hint:"overall correct"})]})]}),"explore"===t&&(0,l.jsxs)("div",{className:"mt-2.5 p-2.5 bg-neutral-50 border border-neutral-200 rounded-lg",children:[(0,l.jsxs)("label",{className:"text-[11px] font-bold text-neutral-600",children:["decision threshold t: ",(0,l.jsx)("span",{className:"font-mono",children:A.toFixed(2)})]}

1),(0,l.jsx)("input",{type:"range",min:.05,max:.95,step:.01,value:A,onChange:e=>T(parseFloat(e.target.value)),className:"w-full accent-amber-500 mt-1","aria-label":"decision threshold"})]}),E&&(0,l.jsxs)("div",{className:"mt-2 p-2 bg-neutral-50 border border-neutral-200 rounded-lg flex flex-wrap items-center justify-between gap-2",children:[(0,l.jsxs)("div",{className:"text-sm text-neutral-700",children:["Cost at t=",A.toFixed(2),": ",(0,l.jsxs)("span",{className:"font-mono font-bold text-neutral-900",children:["$",z.cost.toLocaleString()]})," ",(0,l.jsxs)("span",{className:"text-neutral-400",children:["(",z.FN,"\xb7$1,500 + ",z.FP,"\xb7$80)"]})]}),(0,l.jsxs)("div",{className:"text-xs text-emerald-700 font-semibold",children:["cost-min $",p.toLocaleString()," @ t≈",j.toFixed(2),", saves $",(y-p).toLocaleString()," vs t=0.50"]})]}),(0,l.jsxs)("div",{className:"mt-2 p-2 bg-neutral-900 rounded-xl text-[13px] text-neutral-100 leading-snug flex items-start gap-2.5",children:[(0,l.jsx)(d.A,{size:15,className:"text-amber-400 flex-shrink-0 mt-0.5"}),(0,l.jsx)("div",{children:(0,l.jsx)(P,{mode:t,step:g,t:A,cm:z})})]}),(0,l.jsxs)("div",{className:"mt-2 p-2 bg-amber-50 border-l-4 border-amber-500 rounded-r-lg flex items-start gap-2",children:[(0,l.jsx)(c.A,{size:18,className:"text-amber-600 flex-shrink-0 mt-0.5"}),(0,l.jsxs)("p",{className:"text-[13px] text-amber-800 leading-snug",children:[(0,l.jsx)("span",{className:"font-bold text-amber-900",children:"Key Insight: "}),"The model is the probabilities; the ",(0,l.jsx)("em",{children:"threshold is the policy"}),". One trained model yields infinitely many classifiers. Because a missed Lendly default costs ~19\xd7 a false rejection, the cost-optimal cutoff (≈0.12) sits far below sklearn’s default 0.50, accuracy alone would never reveal that."]})]})]})}function F(e){let{label:t,v:s,cls:r}=e;return(0,l.jsxs)("div",{className:"px-2 py-1.5 rounded-lg border ".concat(r),children:[(0,l.jsx)("div",{className:"text-[9px] font-bold uppercase tracking-wide leading-tight",children:t}),(0,l.jsx)("div",{className:"text-lg font-bold font-mono leading-tight",children:s})]})}function k(e){let{label:t,v:s,hint:r}=e;return(0,l.jsxs)("div",{className:"px-2 py-1.5 rounded-lg border border-neutral-200 bg-white",children:[(0,l.jsx)("div",{className:"text-[9px] font-bold uppercase tracking-wide text-neutral-500",children:t}),(0,l.jsx)("div",{className:"text-base font-bold font-mono text-neutral-900 leading-tight",children:s.toFixed(3)}),(0,l.jsx)("div",{className:"text-[9px] text-neutral-400 leading-tight",children:r})]})}function P(e){let{mode:t,step:s,t:r,cm:a}=e;return"explore"===t?(0,l.jsxs)(l.Fragment,{children:["At t=",r.toFixed(2),": TP ",a.TP,", FP ",a.FP,", FN ",a.FN,", TN ",a.TN,". Precision ",(0,l.jsx)("strong",{children:a.prec.toFixed(3)}),", recall ",(0,l.jsx)("strong",{children:a.rec.toFixed(3)}),", F1 ",(0,l.jsx)("strong",{children:a.f1.toFixed(3)}),", accuracy ",(0,l.jsx)("strong",{children:a.acc.toFixed(3)}),". Cost ",(0,l.jsxs)("strong",{className:"text-amber-300",children:["$",a.cost.toLocaleString()]}),". Drag toward 0.12 to minimize cost; toward 0.46–0.51 to maximize F1."]}):0===s?(0,l.jsxs)(l.Fragment,{children:["50 loans, base rate 7/50 = 14%, matching Lendly. The red and green clouds overlap between roughly 0.10 and 0.46, so any single cutoff will make ",(0,l.jsx)("em",{children:"some"})," mistakes."]}):1===s?(0,l.jsxs)(l.Fragment,{children:["At the sklearn-default t=0.50, ",a.TP+a.FP," loans are flagged (ringed). Everything left of the amber line is approved, everything right is rejected, that one line is the entire decision policy."]}):2===s?(0,l.jsxs)(l.Fragment,{children:["t=0.50 → TP ",a.TP,", FP ",a.FP,", FN ",a.FN,", TN ",a.TN,". Precision ",(0,l.jsx)("strong",{children:a.prec.toFixed(3)}),", recall ",(0,l.jsx)("strong",{children:a.rec.toFixed(3)}),", accuracy ",(0,l.jsx)("strong",{children:a.acc.toFixed(3)}),". Accuracy looks great, but it’s flattered by the 43 easy negatives."]}):3===s?(0,l.jsxs)(l.Fragment,{children:["t=0.10 → recall ",(0,l.jsx)("strong",{className:"text-emerald-300",children:a.rec.toFixed(3)})," (caught all 7), but precision ",(0,l.jsx)("strong",{className:"text-rose-300",children:a.prec.toFixed(3)}),": you reject ",a.TP+a.FP," loans and ",a.FP," of them were good. Accuracy actually ",(0,l.jsx)("em",{children:"drops"})," to ",a.acc.toFixed(3),"."]}):4===s?(0,l.jsxs)(l.Fragment,{children:["t=0.70 → precision ",(0,l.jsx)("strong",{className:"text-emerald-300",children:a.prec.toFixed(3)})," (every rejection is real), but recall ",(0,l.jsx)("strong",{className:"text-rose-300",children:a.rec.toFixed(3)}),": ",a.FN," defaulters slip through. Same model, opposite failure mode."]}):(0,l.jsxs)(l.Fragment,{children:["At t=",r.toFixed(2)," the cost is ",(0,l.jsxs)("strong",{className:"text-amber-300",children:["$",a.cost.toLocaleStr

1ing()]}),". The minimum is ",(0,l.jsxs)("strong",{children:["$",p.toLocaleString()]})," near t≈",j.toFixed(2),", saving $",(y-p).toLocaleString()," versus the default 0.50. The “best” threshold is whatever your dollars say, not 0.50."]})}},41407:(e,t,s)=>{s.d(t,{I:()=>i});var l=s(12115),r=s(98662),a=s(14741);function i(){a.r.current||(0,r.U)();let[e]=(0,l.useState)(a.O.current);return e}},53511:(e,t,s)=>{s.d(t,{A:()=>l});let l=(0,s(71847).A)("pause",[["rect",{x:"14",y:"3",width:"5",height:"18",rx:"1",key:"kaeet6"}],["rect",{x:"5",y:"3",width:"5",height:"18",rx:"1",key:"1wsw3u"}]])},66630:(e,t,s)=>{s.d(t,{A:()=>l});let l=(0,s(71847).A)("sliders-horizontal",[["line",{x1:"21",x2:"14",y1:"4",y2:"4",key:"obuewd"}],["line",{x1:"10",x2:"3",y1:"4",y2:"4",key:"1q6298"}],["line",{x1:"21",x2:"12",y1:"12",y2:"12",key:"1iu8h1"}],["line",{x1:"8",x2:"3",y1:"12",y2:"12",key:"ntss68"}],["line",{x1:"21",x2:"16",y1:"20",y2:"20",key:"14d8ph"}],["line",{x1:"12",x2:"3",y1:"20",y2:"20",key:"m0wm8r"}],["line",{x1:"14",x2:"14",y1:"2",y2:"6",key:"14e1ph"}],["line",{x1:"8",x2:"8",y1:"10",y2:"14",key:"1i6ji0"}],["line",{x1:"16",x2:"16",y1:"18",y2:"22",key:"1lctlv"}]])},81336:(e,t,s)=>{s.d(t,{A:()=>u});var l=s(95155),r=s(12115),a=s(7420),i=s(83126),n=s(50906),o=s(48314),d=s(90368),c=s(53511),x=s(85921),h=s(27937);function u(e){let{title:t,description:s,onReset:u,onPrev:m,onNext:g,onTogglePlay:f,onStepClick:b,isPlaying:p=!1,children:j,className:y="",icon:v=n.A,currentStep:N,totalSteps:w}=e,F=(0,r.useRef)(null);(0,a.U)(F,t,N,w);let k=void 0!==N&&void 0!==w,P=k?N/w*100:0,A=!!(m||g||f),T=!!(b&&w),S=(null!=N?N:0)-1;return(0,l.jsx)("div",{ref:F,className:"w-full ".concat(y),children:(0,l.jsxs)("div",{className:"bg-white rounded-2xl border border-neutral-200 shadow-sm overflow-hidden",children:[(0,l.jsx)("div",{className:"bg-neutral-900 text-white px-6 py-4",children:(0,l.jsxs)("div",{className:"flex items-center justify-between",children:[(0,l.jsxs)("div",{className:"flex items-center gap-3",children:[(0,l.jsx)("div",{className:"p-2 bg-white/10 rounded-lg",children:(0,l.jsx)(v,{className:"w-5 h-5"})}),(0,l.jsxs)("div",{children:[(0,l.jsx)("h3",{className:"font-bold",children:t}),(0,l.jsx)("p",{className:"text-sm text-neutral-400",children:s})]})]}),k&&(0,l.jsxs)("div",{className:"text-sm text-neutral-400",children:["Step ",N," of ",w]})]})}),k&&(0,l.jsx)("div",{className:"h-1 bg-neutral-200",children:(0,l.jsx)(i.P.div,{className:"h-full bg-amber-500",initial:{width:0},animate:{width:"".concat(P,"%")},transition:{duration:.3}})}),A&&(0,l.jsxs)("div",{className:"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-4 sm:px-6 py-2 border-b border-neutral-100 bg-neutral-50",children:[(0,l.jsxs)("div",{className:"flex items-center justify-center sm:justify-start gap-1",children:[u&&(0,l.jsx)("button",{onClick:u,title:"Reset","aria-label":"Reset",className:"w-11 h-11 inline-flex items-center justify-center rounded-lg hover:bg-neutral-200 text-neutral-600 transition-colors",children:(0,l.jsx)(o.A,{className:"w-4 h-4"})}),m&&(0,l.jsx)("button",{onClick:m,disabled:1===N,title:"Previous","aria-label":"Previous",className:"w-11 h-11 inline-flex items-center justify-center rounded-lg hover:bg-neutral-200 text-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",children:(0,l.jsx)(d.A,{className:"w-4 h-4"})}),f&&(0,l.jsx)("button",{onClick:f,title:p?"Pause":"Play","aria-label":p?"Pause":"Play",className:"w-11 h-11 inline-flex items-center justify-center rounded-lg bg-neutral-900 text-white hover:bg-neutral-800 transition-colors",children:p?(0,l.jsx)(c.A,{className:"w-4 h-4"}):(0,l.jsx)(x.A,{className:"w-4 h-4"})}),g&&(0,l.jsx)("button",{onClick:g,disabled:N===w,title:"Next","aria-label":"Next",className:"w-11 h-11 inline-flex items-center justify-center rounded-lg hover:bg-neutral-200 text-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",children:(0,l.jsx)(h.A,{className:"w-4 h-4"})})]}),T&&(0,l.jsx)("div",{className:"flex items-center justify-center gap-0.5 overflow-x-auto w-full sm:w-auto py-0.5",children:Array.from({length:w}).map((e,t)=>(0,l.jsx)("button",{onClick:()=>b(t),"aria-label":"Go to step ".concat(t+1),"aria-current":t===S?"step":void 0,className:"w-8 h-8 flex-shrink-0 inline-flex items-center justify-center rounded-full hover:bg-neutral-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-900 focus-visible:ring-offset-2",children:(0,l.jsx)("span",{"aria-hidden":"true",className:"w-2 h-2 rounded-full transition-colors ".concat(t===S?"bg-neutral-900":t<S?"bg-neutral-400":"bg-neutral-200")})},t))})]}),(0,l.jsx)("div",{className:"p-6 bg-white min-h-[300px] relative overflow-hidden",children:(0,l.jsx)("div",{className:"relative z-10 w-full",children:j})})]})})}},85921:(e,t,s)=>{s.d(t,{A:()=>l});let l=(0,s(71847).A)("play",[["path",{d:"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",key:"10ikf1"}]])}}]);