Pokušaj ovo: ostavi standardizaciju isključenu i povuci „?” skroz gore pa skroz dolje.
Primijeti da Proline drži ≈ 100% udjela u udaljenosti. Zatim uključi standardizaciju — udio se izjednači
(~50/50) i tek tada „najbliži susjed” ima smisla. Zato PCA i k-Means uvijek rade na standardiziranim podacima.
);
}
/* ============================================================
WIDGET 2 — PCA: LOV NA KUT S NAJVIŠE INFORMACIJA
(intuicija na DVIJE varijable: Flavonoidi × Intenzitet boje)
============================================================ */
function VarianceHunter() {
const cv = useRef(null);
const [deg, setDeg] = useState(20);
const [showDrops, setShowDrops] = useState(true);
const [bestSeen, setBestSeen] = useState(0);
const raf = useRef(null);
const P = WINE.flci;
const W = 720, H = 420, cx = W / 2, cy = H / 2 - 18, SC = 58;
// centriraj (već je ~0, ali svejedno)
const C = useMemo(() => {
const n = P.length, mx = P.reduce((s, r) => s + r[0], 0) / n, my = P.reduce((s, r) => s + r[1], 0) / n;
return P.map(r => [r[0] - mx, r[1] - my, r[2]]);
}, []);
const totVar = useMemo(() => C.reduce((s, r) => s + r[0] * r[0] + r[1] * r[1], 0) / C.length, [C]);
const pct = (d) => {
const t = d * Math.PI / 180, u = [Math.cos(t), Math.sin(t)];
const vp = C.reduce((s, r) => { const p = r[0] * u[0] + r[1] * u[1]; return s + p * p; }, 0) / C.length;
return vp / totVar * 100;
};
const cur = pct(deg);
const maxPct = useMemo(() => { let m = 0; for (let d = 0; d < 180; d++) m = Math.max(m, pct(d)); return m; }, [C]);
useEffect(() => { if (cur > bestSeen) setBestSeen(cur); }, [cur]);
const findBest = () => {
let bd = 0, bm = 0; for (let d = 0; d < 180; d++) { const p = pct(d); if (p > bm) { bm = p; bd = d; } }
cancelAnimationFrame(raf.current);
const step = () => {
setDeg(prev => {
const diff = bd - prev;
if (Math.abs(diff) < 0.6) return bd;
raf.current = requestAnimationFrame(step);
return prev + Math.sign(diff) * Math.max(0.6, Math.abs(diff) * 0.12);
});
};
raf.current = requestAnimationFrame(step);
};
useEffect(() => {
const ctx = cv.current.getContext("2d"); ctx.clearRect(0, 0, W, H);
const t = deg * Math.PI / 180, u = [Math.cos(t), Math.sin(t)];
const toS = (x, y) => [cx + x * SC, cy - y * SC];
// os kroz ishodište (oba smjera)
const L = 250;
const [ax1, ay1] = [cx - u[0] * L, cy + u[1] * L], [ax2, ay2] = [cx + u[0] * L, cy - u[1] * L];
// projekcijske okomice
if (showDrops) {
ctx.strokeStyle = "rgba(111,103,84,.4)"; ctx.lineWidth = 1;
C.forEach(r => {
const [px, py] = toS(r[0], r[1]);
const proj = r[0] * u[0] + r[1] * u[1];
const [qx, qy] = toS(proj * u[0], proj * u[1]);
ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(qx, qy); ctx.stroke();
});
}
// os
ctx.strokeStyle = "#6b4f1d"; ctx.lineWidth = 2.5;
ctx.beginPath(); ctx.moveTo(ax1, ay1); ctx.lineTo(ax2, ay2); ctx.stroke();
// projekcije (kvačice na osi)
C.forEach(r => {
const proj = r[0] * u[0] + r[1] * u[1];
const [qx, qy] = toS(proj * u[0], proj * u[1]);
ctx.beginPath(); ctx.arc(qx, qy, 3, 0, 7); ctx.fillStyle = CLS[r[2]]; ctx.fill();
});
// točke
C.forEach(r => {
const [px, py] = toS(r[0], r[1]);
ctx.beginPath(); ctx.arc(px, py, 5, 0, 7);
ctx.fillStyle = CLS[r[2]]; ctx.globalAlpha = .85; ctx.fill(); ctx.globalAlpha = 1;
});
// "rug" — 1D raspored projekcija ispod
const ry = H - 16;
ctx.strokeStyle = "#b8ab8e"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(60, ry); ctx.lineTo(W - 60, ry); ctx.stroke();
C.forEach(r => {
const proj = r[0] * u[0] + r[1] * u[1];
const x = clamp(mapr(proj, -3.2, 3.2, 60, W - 60), 60, W - 60);
ctx.beginPath(); ctx.moveTo(x, ry - 6); ctx.lineTo(x, ry + 6); ctx.strokeStyle = CLS[r[2]]; ctx.globalAlpha = .6; ctx.stroke(); ctx.globalAlpha = 1;
});
ctx.fillStyle = "#6f6754"; ctx.font = "10px JetBrains Mono"; ctx.textAlign = "center";
ctx.fillText("položaji vina projiciranih na os (1D)", W / 2, ry - 12);
}, [deg, showDrops, C]);
const atBest = Math.abs(cur - maxPct) < 0.6;
let hint = "Okreći kut osi i gledaj „raširenost”. Iz nekih smjerova vina se stisnu u crtu (malo informacija).";
if (atBest) hint = "★ Ovo je PC1! Uz ovaj kut su vina najraširenija — PCA bira upravo taj smjer. Primijeti da se i tri vrste vina najljepše razdvoje, iako PCA ne zna za vrste.";
else if (cur < 44) hint = "Loš kut: točke se gotovo preklapaju u crtu, gubimo najviše informacija. Zavrti dalje.";
return (
intuicija PCA na DVIJE varijable · Flavonoidi × Intenzitet boje (standardizirano)
Objašnjeno informacija {atBest && PC1}{cur.toFixed(0)}%
Najbolje do sada{bestSeen.toFixed(0)}%
Maksimum (PC1){maxPct.toFixed(0)}%
{hint}
Najbolji kut za grupsku fotografiju. Mnoštvo ljudi stoji na trgu, a ti smiješ slikati samo iz jednog
smjera. Iz „tankog” smjera svi se stope u crtu; iz pravog smjera ljudi su najrašireniji i svako lice se vidi. PCA
obilazi sve smjerove i bira onaj uz koji su podaci najrašireniji (najveća varijanca) — to je PC1.
Druga komponenta (PC2) je najbolji smjer okomit na prvi.
);
}
/* ============================================================
LOADINGS PANEL — što PC1 i PC2 stvarno znače (svih 5 značajki)
============================================================ */
const LOAD_NAMES = {
flavanoids: "Flavonoidi", proline: "Prolin", color_intensity: "Intenzitet boje",
"od280/od315_of_diluted_wines": "OD315 (razrij. vina)", alcohol: "Alkohol",
};
function LoadingsPanel() {
const L = WINE.loadings;
const keys = Object.keys(L);
const seg = (v, col) => {
const w = Math.abs(v) * 46; // % širine pola trake
const left = v >= 0 ? 50 : 50 - w;
return ;
};
return (
stvarni rezultat PCA · 5 najvažnijih značajki (ono što vidiš u Orangeu)
doprinos PC1 doprinos PC2lijevo = negativan · desno = pozitivan
{keys.map(k => (
{LOAD_NAMES[k]}
{seg(L[k][0], "#6b4f1d")}
{seg(L[k][1], "#2a5d57")}
))}
PC1 je „opće bogatstvo” vina — visoki Flavonoidi, Prolin i OD315 zajedno. PC2 razdvaja po
boji i tijelu — visok Intenzitet boje i Alkohol. Svaka komponenta je ponderirana mješavina izvornih svojstava.
A zašto u nekim izvorima piše ~55%?
Ako PCA pustiš na svih 13 značajki (bez odabira top-5), prve dvije komponente nose tek ≈ {WINE.pcaFull[0]}% + {WINE.pcaFull[1]}% = ≈55%.
Više početnih značajki znači da se informacija raspoređuje kroz više komponenti. Kad prvo zadržiš samo 5 najvažnijih, prve dvije nose puno više (≈{(WINE.pcaTop5[0] + WINE.pcaTop5[1]).toFixed(0)}%).
Klikaj „Korak” dok ne piše Stabilno, pa prebacuj bojanje. Dvije slike su gotovo identične — a stroju
nitko nije rekao koja je vrsta vina. Najteža mu je granica {CLSN[1]} ↔ {CLSN[2]}.
Vrećica izmiješanog sitniša. Stroju daš novčiće i kažeš samo: izvaži i izmjeri svaki, pa složi u
3 hrpe slične robe — ne kažeš koliko vrijede. Hrpe se gotovo poklope sa stvarnim apoenima; pogriješi tek na
ponekom izlizanom, graničnom novčiću. Tu nenadzirano učenje dotiče nadzirano: kemija sama iscrtava vrste,
a oznake (vrste) samo potvrde ono što je struktura već pokazala.
);
}
/* ============================================================
WIDGET 4 — BANK: BAKE-OFF MODELA + ZAMKA „DURATION”
============================================================ */
const METRICS = [
{ k: "AUC", lab: "AUC", note: "AUC = sposobnost da kupce rangira na vrh liste. Ne ovisi o omjeru klasa — najpoštenija mjera za kampanju." },
{ k: "CA", lab: "Točnost (CA)", note: "Točnost vara: i „lijeni model” koji uvijek kaže NE ima ≈89%. Zato CA sam ne odlučuje." },
{ k: "R", lab: "Recall (kupci)", note: "Recall na klasi „da”: koliko stvarnih kupaca model uhvati. I najbolji uhvati tek ~pola." },
{ k: "P", lab: "Preciznost (kupci)", note: "Preciznost: kad model kaže „kupac”, koliko je puta u pravu." },
{ k: "F1", lab: "F1 (kupci)", note: "F1 spaja preciznost i recall na klasi kupaca — pošteniji prikaz nego sirova točnost." },
];
function ModelBakeoff() {
const [metric, setMetric] = useState("AUC");
const [dur, setDur] = useState(true);
const data = dur ? BANK.withDuration : BANK.withoutDuration;
const rows = [...data].map(m => ({ ...m })).sort((a, b) => b[metric] - a[metric]);
const mObj = METRICS.find(m => m.k === metric);
return (
5 modela · poredaj po onome što ti je važno
{METRICS.map(m => )}
{rows.map((m, i) => {
const v = m[metric];
return (
{i < 3 && {i + 1}}{m.name}
{v.toFixed(3)}
);
})}
skala 0 – 1
{dur ? (
⚠Spektakularan rezultat — ali varka. „duration” (trajanje poziva) znaš tek nakon poziva.
Dugačak poziv je posljedica zainteresiranog klijenta, a ne podatak kojim biraš koga zvati.
Uključivanje te značajke je curenje podataka i napuhuje AUC za ~0,15.
) : (
✓Realan, upotrebljiv model. Koristi samo ono što znaš prije poziva (dob, posao, kontakt,
ekonomski pokazatelji…). AUC padne, ali ovo je broj na koji se u praksi možeš osloniti.
)}
{mObj.note}
Pokušaj ovo: (1) Gledaj Točnost — svi modeli izgledaju ~0,90, kao da su jednako dobri.
(2) Prebaci na AUC — Gradient Boosting izbija na vrh, razlike postaju vidljive. (3) Spusti polugu
„duration” na NE i gledaj kako svima AUC propadne. Pobjednik ovisi o tome što mjeriš i
koje značajke smiješ koristiti — ne biraj slijepo po točnosti.
);
}
/* ============================================================
MALI CALLOUT — LIJENI MODEL (paradoks točnosti, primijenjeno)
============================================================ */
function LazyCallout() {
const yes = Math.round(100 * BANK.balance.yes);
const cells = Array.from({ length: 100 }, (_, i) => i < yes);
return (
„Lijeni model”: uvijek reci NE
{cells.map((isYes, i) => )}
Točnost (CA){(BANK.balance.no * 100).toFixed(1)}%
Uhvaćenih kupaca0%
Samo ~{yes} od 100 klijenata kaže „da”. Model koji za svakoga kaže „neće”
ima ~89% točnosti — a banci je beskoristan jer ne nađe nijednog kupca. Zato gledamo AUC i recall.
Zašto se to događa općenito → susret 05 (paradoks točnosti).
);
}
/* ============================================================
KVIZ
============================================================ */
const QUIZ = [
{ q: "Zašto podatke standardiziramo (z-score) prije PCA i k-Meansa?",
a: ["Da bismo ubrzali računanje", "Da značajka s velikim rasponom (npr. Proline) ne nadglasa sve ostale u udaljenosti", "Jer modeli ne rade s decimalnim brojevima"],
correct: 1, why: "Bez standardizacije Proline (raspon ~1500) potpuno dominira udaljenostima, a značajke malog raspona nestanu. Standardizacija svima daje jednaku priliku." },
{ q: "Što PCA bira kao prvu glavnu komponentu (PC1)?",
a: ["Smjer u kojem su podaci najrašireniji (najveća varijanca)", "Najvažniju izvornu varijablu", "Smjer u kojem se klase najviše preklapaju"],
correct: 0, why: "PC1 je smjer maksimalne raširenosti (varijance) — nosi najviše informacija. PC2 je najbolji smjer okomit na njega." },
{ q: "k-Means je na Wine podacima ~95% pogodio prave 3 vrste, a da mu nitko nije dao oznake. Što to znači?",
a: ["Da je k-Means zapravo nadzirani model", "Da kemijski sastav sam po sebi razdvaja vrste — struktura postoji i prije oznaka", "Da su podaci slučajni"],
correct: 1, why: "Grupe se pojave i bez oznaka jer ih kemija stvarno razdvaja. Tu nenadzirano učenje prelazi u nadzirano: oznake potvrde postojeću strukturu." },
{ q: "Zašto je značajka „duration” problematična u Bank modelu, iako najviše diže AUC?",
a: ["Jer je mjerena u sekundama", "Jer trajanje poziva znamo tek NAKON poziva — to je curenje podataka", "Jer je nebitna za odluku"],
correct: 1, why: "Dugačak poziv je posljedica zainteresiranog klijenta. Kad slažeš listu koga zvati, poziv se još nije dogodio — pa duration ne postoji. Korištenje te značajke napuhuje rezultat (curenje podataka)." },
];
function Quiz() {
const [ans, setAns] = useState({});
const [score, setScore] = useState(0);
const pick = (qi, oi) => {
if (ans[qi] !== undefined) return;
setAns(a => ({ ...a, [qi]: oi }));
if (oi === QUIZ[qi].correct) setScore(s => s + 1);
};
const done = Object.keys(ans).length === QUIZ.length;
return (
{QUIZ.map((item, qi) => (
{qi + 1}. {item.q}
{item.a.map((txt, oi) => {
const picked = ans[qi]; let cls = "opt";
if (picked !== undefined) { if (oi === item.correct) cls += " correct"; else if (oi === picked) cls += " wrong"; }
return ;
})}
Danas radimo dvije vježbe u Orangeu. S vinima učimo nenadzirano — bez oznaka,
struktura se pojavi sama. S bankom učimo nadzirano — iz oznaka, pa mjerimo i biramo model.
Ovdje pojmove ne čitaš nego ih pomičeš, vrtiš i uspoređuješ.
📏 Standardizacija🧭 PCA🪙 Klasteri vs istina🏁 Bake-off modela⚠ Curenje podataka
Pregled
Dvije polovice, jedna nit
Najprije s vinima (178 uzoraka, 13 kemijskih mjerenja) gledamo kako se grupe pojave
bez ijedne oznake: standardiziramo, sažmemo s PCA-om i klasteriramo. Zatim s bankom
(4119 klijenata) prelazimo na nadzirano učenje: treniramo 5 modela i pošteno ih mjerimo. Nit koja ih spaja:
ako struktura u podacima postoji, nenadzirano će je naći — a nadzirano je onda samo iskoristi.
📏
Standardizacija
Zašto jedna „velika” varijabla pokvari sve udaljenosti i kako to popraviti.
→ Tko određuje udaljenost
🧭
PCA
Traženje najboljeg kuta gledanja: 13 brojeva sažmemo u 2, uz najmanji gubitak.
→ Lov na kut
🪙
Klasteri vs istina
k-Means bez oznaka pronađe prave vrste vina ~95%. Most do nadziranog učenja.
→ Usporedba
🏁
Bake-off
5 modela, koji je najbolji? Ovisi o mjeri — i o tome smiješ li koristiti „duration”.
→ Banka
Dio 1 · vino · nenadzirano
Tko zapravo određuje udaljenost?
Sve metode koje gledaju „koliko su dvije stvari slične” (PCA, k-Means, najbliži susjed)
računaju udaljenost. Ako jedna značajka ima ogroman raspon brojeva, ona sama odluči o svemu. Zamisli
da uspoređuješ ljude, a visinu mjeriš u milimetrima, a broj cipele u brojevima — milimetri zdrobe sve ostalo.
Rank (Information Gain) — kako biramo značajke
Prije PCA-a Rank pokazuje koje varijable najjače razlikuju poznate klase. Na Wine podacima top-5 su:
Flavonoidi, Prolin, Intenzitet boje, OD315, Alkohol. Na njima dalje radi PCA i k-Means — manje šuma, brže računanje.
Dio 1 · vino · PCA
Najbolji kut gledanja na podatke
13 kemijskih mjerenja je previše da bismo ih nacrtali. PCA pronalazi nekoliko novih
smjerova duž kojih su vina najraširenija, pa složenih 13 brojeva sažmemo u 2 — gubeći tek malo detalja.
Prvo izgradi intuiciju na samo dvije varijable, a zatim pogledaj stvarni rezultat.
Pažnja: PCA ne grupira
PCA samo bira najinformativniji kut gledanja i sažima dimenzije. Grupe (vrste vina) se onda vide
same od sebe na grafu — ali ih PCA nije stvorio. Grupiranje radi k-Means, u sljedećem koraku.
Dio 1 · vino · klasteriranje
Stroj koji pogodi vrste — bez oznaka
Sada pustimo k-Means (k=3) da sam složi vina u 3 hrpe, koristeći samo kemiju i ništa
o vrstama. Pa otkrijemo oznake i usporedimo. Koliko se klasteri poklapaju sa stvarnim vrstama?
Dio 2 · banka · nadzirano
Koji je model najbolji? Ovisi što pitaš
Banka želi znati hoće li klijent prihvatiti oročeni depozit. Podaci su nebalansirani:
samo ~11% kaže „da”. Trenirali smo 5 modela i izmjerili ih 5-strukom kros-validacijom. Prije nego što proglasiš
pobjednika — pogledaj „lijeni model”.
Rank na banci — i zašto je „duration” crvena zastava
Rank ovdje stavlja duration (trajanje poziva) na vrh važnosti. Ali Rank nije odluka — najveća
važnost može značiti curenje podataka. Provjeri možeš li značajku doista znati prije trenutka odluke.
Provjeri se
Kratki kviz
Četiri pitanja, odgovor odmah. Klikni opciju koju misliš da je točna.
Sve ovo radiš „za prave” u Orangeu. Wine: Datasets → Preprocess (Standardize) → Rank →
PCA → Scatter Plot → k-Means. Banka: Continuize (One-Hot) → Rank → Test & Score → ROC →
Confusion Matrix. Brojke na ovoj stranici izračunate su iz pravih skupova podataka.