34:null 35:["$","title",null,{"children":"Multidimensional Visualization Ejercicio | Paolo Medrano Teran | Observable"}] 3b:T675,radvizWine = { const size = 720, margin = 100, c = size / 2, R = c - margin; // R = radio r const sx = v => c + v * R, sy = v => c - v * R; const P = radvizProject(rvNorm, rvAnchors); const svg = d3.create("svg") .attr("viewBox", [0, 0, size, size]).attr("width", size) .style("max-width", "100%").style("height", "auto") .style("font", "11px sans-serif"); // Círculo svg.append("circle").attr("cx", c).attr("cy", c).attr("r", R) .attr("fill", "none").attr("stroke", "#bbb"); // Puntos P_i svg.append("g").selectAll("circle").data(P).join("circle") .attr("cx", p => sx(p[0])).attr("cy", p => sy(p[1])) .attr("r", 3.5) .attr("fill", (p, i) => rvColor(wine[i][rvClass])) .attr("fill-opacity", 0.75) .attr("stroke", "white").attr("stroke-width", 0.5); // Anclas S_j svg.append("g").selectAll("circle").data(rvAnchors).join("circle") .attr("cx", a => sx(a.x)).attr("cy", a => sy(a.y)) .attr("r", 5).attr("fill", "#d62728"); svg.append("g").selectAll("text").data(rvAnchors).join("text") .attr("x", a => c + (R + 12) * a.x).attr("y", a => c - (R + 12) * a.y) .attr("text-anchor", a => a.x > 0.3 ? "start" : a.x < -0.3 ? "end" : "middle") .attr("dominant-baseline", "middle") .text(a => a.name); // Leyenda const leg = svg.append("g").attr("transform", "translate(12,16)") .selectAll("g").data(rvColor.domain()).join("g") .attr("transform", (d, i) => `translate(0,${i * 18})`); leg.append("circle").attr("r", 5).attr("fill", d => rvColor(d)); leg.append("text").attr("x", 10).attr("dy", "0.35em").text(d => `${rvClass} = ${d}`); return svg.node(); }3c:T17e7,viewof rvProjection = { const size = 720, margin = 100, c = size / 2, R = c - margin; const sx = v => c + v * R, sy = v => c - v * R; const D = rvFeatures.length; const initAnchors = () => rvFeatures.map((name, j) => { const t = 2 * Math.PI * j / D; return {name, x: Math.cos(t), y: Math.sin(t), on: true}; }); const angle = a => (Math.atan2(a.y, a.x) + 2 * Math.PI) % (2 * Math.PI); const anchors = initAnchors(); let selected = null; let P = radvizProject(rvNorm, anchors); // ---------- Contenedor y controles ---------- const root = d3.create("div").style("position", "relative").style("font", "12px sans-serif"); const node = root.node(); const bar = root.append("div") .style("display", "flex").style("gap", "10px").style("align-items", "center") .style("margin-bottom", "6px"); const btnEven = bar.append("button").text("Distribuir"); const btnOpt = bar.append("button").text("Optimizar orden"); const status = bar.append("span").style("color", "#666"); const svg = root.append("svg") .attr("viewBox", [0, 0, size, size]).attr("width", size) .style("max-width", "100%").style("height", "auto"); const tip = root.append("div") .style("position", "absolute").style("pointer-events", "none").style("display", "none") .style("background", "rgba(255,255,255,0.95)").style("border", "1px solid #ccc") .style("border-radius", "4px").style("padding", "6px 8px").style("font", "11px sans-serif"); svg.append("circle").attr("cx", c).attr("cy", c).attr("r", R) .attr("fill", "none").attr("stroke", "#bbb"); const gPts = svg.append("g"); const gTop = svg.append("g"); const gLegend = svg.append("g").attr("transform", "translate(12,16)"); // ---------- Puntos + tooltip ---------- const dots = gPts.selectAll("circle").data(d3.range(wine.length)).join("circle") .attr("r", 3.5) .attr("fill", i => rvColor(wine[i][rvClass])) .attr("stroke", "white").attr("stroke-width", 0.5) .on("mouseenter", (event, i) => { tip.style("display", null).html( `${rvClass}: ${wine[i][rvClass]}
` + rvFeatures.map((f, j) => `${f}: ${wine[i][f]} (${rvNorm[i][j].toFixed(2)})`).join("
")); }) .on("mousemove", event => { const [mx, my] = d3.pointer(event, node); tip.style("left", `${mx + 12}px`).style("top", `${my + 12}px`); }) .on("mouseleave", () => tip.style("display", "none")); // ---------- Anclas: arrastrar sobre el círculo ---------- const handles = gTop.selectAll("circle").data(anchors).join("circle") .attr("r", 7).attr("stroke", "white").attr("stroke-width", 1.5) .style("cursor", "grab") .on("mouseenter", (event, a) => { const j = anchors.indexOf(a); dots.attr("r", i => 1.5 + 6 * rvNorm[i][j]); // tamaño = valor en esa variable }) .on("mouseleave", () => dots.attr("r", 3.5)) .call(d3.drag() .subject((event, a) => ({x: sx(a.x), y: sy(a.y)})) // en píxeles .on("drag", (event, a) => { const t = Math.atan2(c - event.y, event.x - c); // se mantiene sobre el círculo a.x = Math.cos(t); a.y = Math.sin(t); status.text(`${a.name}: θ = ${(angle(a) * 180 / Math.PI).toFixed(0)}°`); render(); }) .on("end", () => emit())); // ---------- Etiquetas: clic = activar/desactivar variable ---------- const labels = gTop.selectAll("text").data(anchors).join("text") .attr("dominant-baseline", "middle") .style("font", "11px sans-serif").style("cursor", "pointer").style("user-select", "none") .text(a => a.name) .on("click", (event, a) => { a.on = !a.on; render(); emit(); }); // ---------- Leyenda: clic = resaltar clase ---------- const leg = gLegend.selectAll("g").data(rvColor.domain()).join("g") .attr("transform", (d, i) => `translate(0,${i * 18})`) .style("cursor", "pointer") .on("click", (event, v) => { selected = selected === v ? null : v; leg.attr("opacity", d => selected == null || d === selected ? 1 : 0.35); render(); }); leg.append("circle").attr("r", 5).attr("fill", d => rvColor(d)); leg.append("text").attr("x", 10).attr("dy", "0.35em") .style("font", "11px sans-serif").text(d => `${rvClass} = ${d}`); // ---------- Botones ---------- btnEven.on("click", () => { const active = anchors.filter(a => a.on).sort((a, b) => angle(a) - angle(b)); active.forEach((a, k) => { const t = 2 * Math.PI * k / active.length; a.x = Math.cos(t); a.y = Math.sin(t); }); render(); emit(); }); btnOpt.on("click", () => { status.text("Optimizando…"); setTimeout(() => { // orden actual de las anclas activas, según su ángulo en el círculo const start = anchors.map((a, j) => j) .filter(j => anchors[j].on) .sort((p, q) => angle(anchors[p]) - angle(anchors[q])); const {order, score} = rvOptimizeOrder(rvNorm, start, 10); order.forEach((j, t) => { const th = 2 * Math.PI * t / order.length; anchors[j].x = Math.cos(th); anchors[j].y = Math.sin(th); }); status.text(`Orden optimizado · NP = ${score.toFixed(3)}`); render(); emit(); }, 20); }); // ---------- Redibujar ---------- function render() { P = radvizProject(rvNorm, anchors); handles .attr("cx", a => sx(a.x)).attr("cy", a => sy(a.y)) .attr("fill", a => a.on ? "#d62728" : "#ccc"); labels .attr("x", a => c + (R + 14) * a.x).attr("y", a => c - (R + 14) * a.y) .attr("text-anchor", a => a.x > 0.3 ? "start" : a.x < -0.3 ? "end" : "middle") .attr("fill", a => a.on ? "#222" : "#bbb") .style("text-decoration", a => a.on ? null : "line-through"); dots .attr("cx", i => sx(P[i][0])).attr("cy", i => sy(P[i][1])) .attr("fill-opacity", i => selected == null || wine[i][rvClass] === selected ? 0.8 : 0.06); } // Valor del viewof = proyección 2D actual function emit() { node.value = P; node.dispatchEvent(new Event("input", {bubbles: true})); } render(); node.value = P; return node; }3d:T48d,function rvSearchStepper(start) { const n = start.length; let order = start.slice(); let cur = rvScore(order); let a = 0, b = 0, step = 0, improved = false, done = false; const pack = (o, r, accepted, pa, pb) => ({order: o, P: r.P, score: r.score, accepted, best: cur.score, step, a: pa, b: pb}); const first = pack(order, cur, true, null, null); let bestState = first; return { first, get done() { return done; }, get best() { return bestState; }, next() { if (done) return {done: true}; b++; if (b >= n) { a++; b = a + 1; } if (b >= n) { // terminó una pasada completa if (!improved) { done = true; return {done: true}; } improved = false; a = 0; b = 1; } const cand = order.slice(); [cand[a], cand[b]] = [cand[b], cand[a]]; // intercambia dos anclas const r = rvScore(cand); step++; const accepted = r.score > cur.score + 1e-12; if (accepted) { order = cand; cur = r; improved = true; } const s = pack(cand, r, accepted, a, b); if (accepted) bestState = s; return {done: false, value: s}; } }; }3e:T25af,viewof rvAuto = { const D = rvFeatures.length; const size = 560, margin = 115, c = size / 2, R = c - margin; const sx = v => c + v * R, sy = v => c - v * R; const HL = "#b07aa1"; // color del par intercambiado let stepper, history = [], best = null, nThumbs = 0; let running = false, finished = false, token = 0, alive = true; let delay = 80, onlyBest = false; invalidation.then(() => { alive = false; }); // ---------- Controles ---------- const root = d3.create("div").style("font", "12px sans-serif"); const node = root.node(); const bar = root.append("div") .style("display", "flex").style("flex-wrap", "wrap") .style("gap", "10px").style("align-items", "center"); const btnRun = bar.append("button").text("Iniciar"); const btnReset = bar.append("button").text("Orden original"); const btnShuffle = bar.append("button").text("Orden aleatorio"); bar.append("span").text("Pausa por paso:"); const speed = bar.append("input").attr("type", "range") .attr("min", 0).attr("max", 500).attr("step", 10).property("value", delay); const speedLabel = bar.append("span").text(`${delay} ms`); const lbl = bar.append("label"); const chk = lbl.append("input").attr("type", "checkbox"); lbl.append("span").text(" Mostrar solo mejoras"); const info = root.append("div").style("margin", "8px 0 2px").style("font-size", "13px"); const chainCand = root.append("div").style("margin", "2px 0"); const chainBest = root.append("div").style("margin", "2px 0 6px"); // ---------- Radviz principal + curva de la métrica ---------- const row = root.append("div") .style("display", "flex").style("flex-wrap", "wrap") .style("gap", "12px").style("align-items", "flex-start"); const svg = row.append("svg") .attr("viewBox", [0, 0, size, size]).attr("width", size) .style("max-width", "100%").style("height", "auto").style("overflow", "visible"); // Polígono que une las anclas en el orden actual (el último se une con el primero) const poly = svg.append("path").attr("fill", "none").attr("stroke", "#bbb"); const dots = svg.append("g").selectAll("circle").data(d3.range(wine.length)).join("circle") .attr("cx", c).attr("cy", c).attr("r", 3) .attr("fill", i => rvColor(wine[i][rvClass])).attr("fill-opacity", 0.8) .attr("stroke", "white").attr("stroke-width", 0.5); const aDots = svg.append("g").selectAll("circle").data(d3.range(D)).join("circle") .attr("cx", c).attr("cy", c).attr("stroke", "white").attr("stroke-width", 1.5); const aLabels = svg.append("g").selectAll("text").data(d3.range(D)).join("text") .attr("dominant-baseline", "middle").style("font", "11px sans-serif") .text(j => rvFeatures[j]); const leg = svg.append("g").attr("transform", "translate(10,14)") .selectAll("g").data(rvColor.domain()).join("g") .attr("transform", (d, i) => `translate(0,${i * 16})`); leg.append("circle").attr("r", 4.5).attr("fill", d => rvColor(d)); leg.append("text").attr("x", 9).attr("dy", "0.35em") .style("font", "11px sans-serif").text(d => `${rvClass} = ${d}`); const cw = 400, ch = 280, cm = {top: 24, right: 14, bottom: 34, left: 46}; const chart = row.append("svg") .attr("viewBox", [0, 0, cw, ch]).attr("width", cw) .style("max-width", "100%").style("height", "auto"); const x = d3.scaleLinear().range([cm.left, cw - cm.right]); const y = d3.scaleLinear().range([ch - cm.bottom, cm.top]); const gx = chart.append("g").attr("transform", `translate(0,${ch - cm.bottom})`); const gy = chart.append("g").attr("transform", `translate(${cm.left},0)`); chart.append("text").attr("x", cw - cm.right).attr("y", ch - 4) .attr("text-anchor", "end").style("font", "11px sans-serif").text("Paso (orden evaluado)"); chart.append("text").attr("x", cm.left).attr("y", 12) .style("font", "11px sans-serif").text("Neighborhood Preservation (k = 10)"); const cDots = chart.append("g"); const bestLine = chart.append("path").attr("fill", "none") .attr("stroke", "#d62728").attr("stroke-width", 2); // ---------- Galería de Radviz generados ---------- root.append("div").style("margin", "12px 0 4px").style("font-weight", "bold") .text("Radviz generados (uno por cada mejora)"); const gallery = root.append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "10px"); // ---------- Funciones de dibujo ---------- const polyPath = (order, A, fx, fy) => "M" + order.map(j => `${fx(A[j].x)},${fy(A[j].y)}`).join("L") + "Z"; const chain = (order, hl) => order.concat(order[0]) .map(j => hl.has(j) ? `${rvFeatures[j]}` : rvFeatures[j]) .join(" → "); function show(s, dur) { const A = rvAnchorsFor(s.order); const hl = new Set(s.a == null ? [] : [s.order[s.a], s.order[s.b]]); const tr = sel => dur > 0 ? sel.transition().duration(dur).ease(d3.easeCubicOut) : sel; tr(poly).attr("d", polyPath(s.order, A, sx, sy)); tr(aDots).attr("cx", j => sx(A[j].x)).attr("cy", j => sy(A[j].y)) .attr("r", j => hl.has(j) ? 9 : 6) .attr("fill", j => hl.has(j) ? HL : "#444"); tr(aLabels) .attr("x", j => c + (R + 14) * A[j].x).attr("y", j => c - (R + 14) * A[j].y) .attr("text-anchor", j => A[j].x > 0.3 ? "start" : A[j].x < -0.3 ? "end" : "middle") .attr("fill", j => hl.has(j) ? HL : "#222"); tr(dots).attr("cx", i => sx(s.P[i][0])).attr("cy", i => sy(s.P[i][1])); chainCand.html(`Orden mostrado: ${chain(s.order, hl)}`); } function drawText(s) { info.html( `Paso ${s.step} | NP del orden mostrado: ${s.score.toFixed(3)}` + ` | Mejor NP: ${best.score.toFixed(3)}` + (s.accepted && s.step > 0 ? ` ✔ mejora aceptada` : "")); chainBest.html(`Mejor orden: ${chain(best.order, new Set())}`); } function drawChart() { x.domain([0, Math.max(20, d3.max(history, h => h.step))]); y.domain([0, Math.max(0.1, d3.max(history, h => h.score)) * 1.1]).nice(); gx.call(d3.axisBottom(x).ticks(6)); gy.call(d3.axisLeft(y).ticks(5)); cDots.selectAll("circle").data(history).join("circle") .attr("cx", h => x(h.step)).attr("cy", h => y(h.score)) .attr("r", h => h.accepted ? 3.5 : 1.8) .attr("fill", h => h.accepted ? "#d62728" : "#bbb"); bestLine.attr("d", d3.line().x(h => x(h.step)).y(h => y(h.best)).curve(d3.curveStepAfter)(history)); } function addThumb(s) { const ts = 150, tc = ts / 2, tR = tc - 10; const A = rvAnchorsFor(s.order); const card = gallery.append("div").style("text-align", "center").style("cursor", "pointer") .attr("title", chain(s.order, new Set()).replace(/<[^>]+>/g, "")) .on("click", () => { if (!running) { show({...s, a: null}, 400); drawText(s); } }); const t = card.append("svg").attr("width", ts).attr("height", ts) .style("border", "1px solid #eee").style("border-radius", "4px"); t.append("path").attr("d", polyPath(s.order, A, v => tc + v * tR, v => tc - v * tR)) .attr("fill", "none").attr("stroke", "#ccc"); t.append("g").selectAll("circle").data(s.P).join("circle") .attr("cx", p => tc + p[0] * tR).attr("cy", p => tc - p[1] * tR).attr("r", 1.4) .attr("fill", (p, i) => rvColor(wine[i][rvClass])); t.append("g").selectAll("circle").data(s.order).join("circle") .attr("cx", j => tc + A[j].x * tR).attr("cy", j => tc - A[j].y * tR) .attr("r", 2.5).attr("fill", "#444"); card.append("div").style("font", "11px sans-serif") .html(`#${nThumbs++} paso ${s.step}
NP ${s.score.toFixed(3)}`); } function emit(P) { node.value = P; node.dispatchEvent(new Event("input", {bubbles: true})); } // ---------- Búsqueda en vivo ---------- const sleep = ms => new Promise(res => setTimeout(res, ms)); async function run(my) { while (running && alive && my === token) { const r = stepper.next(); if (r.done) { finish(); return; } const s = r.value; history.push(s); if (s.accepted) { best = s; addThumb(s); emit(s.P); } const visible = !onlyBest || s.accepted; if (visible) show(s, Math.min(delay * 0.8, 300)); drawText(s); drawChart(); await sleep(visible ? delay : 0); } } function finish() { running = false; finished = true; btnRun.text("Terminado").property("disabled", true); show({...best, a: null}, 500); drawText(best); info.html(`Terminado en ${history[history.length - 1].step} pasos. ` + `Ningún intercambio de dos anclas mejora la métrica. ` + `Mejor NP: ${best.score.toFixed(3)}`); emit(best.P); } function reset(start) { running = false; finished = false; token++; stepper = rvSearchStepper(start); best = stepper.first; history = [best]; nThumbs = 0; gallery.selectAll("*").remove(); addThumb(best); btnRun.text("Iniciar").property("disabled", false); show(best, 400); drawText(best); drawChart(); emit(best.P); } btnRun.on("click", () => { if (finished) return; running = !running; btnRun.text(running ? "Pausar" : "Continuar"); if (running) run(++token); }); btnReset.on("click", () => reset(d3.range(D))); btnShuffle.on("click", () => reset(d3.shuffle(d3.range(D)))); speed.on("input", e => { e.stopPropagation(); delay = +e.target.value; speedLabel.text(`${delay} ms`); }); chk.on("input", e => { e.stopPropagation(); onlyBest = e.target.checked; }); reset(d3.range(D)); return node; }3f:T59e,function rvOptimizeOrder(X, order, k = 10) { const N = X.length; // k vecinos más cercanos (misma lógica que kNearestNeighbors del profesor) const knn = pts => pts.map((p, i) => { const d = pts.map((q, j) => { if (i === j) return Infinity; let s = 0; for (let t = 0; t < p.length; t++) { const e = p[t] - q[t]; s += e * e; } return s; }); return d3.range(N).sort((a, b) => d[a] - d[b]).slice(0, k); }); const orig = knn(X).map(r => new Set(r)); // vecinos en 13D (fijos) // NP de un orden de anclas (distribuidas uniformemente) const score = ord => { const S = X[0].map(() => ({x: 0, y: 0, on: false})); ord.forEach((j, t) => { const th = 2 * Math.PI * t / ord.length; S[j] = {x: Math.cos(th), y: Math.sin(th), on: true}; }); const nb = knn(radvizProject(X, S)); let s = 0; for (let i = 0; i < N; i++) for (const q of nb[i]) if (orig[i].has(q)) s++; return s / (N * k); }; // Hill climbing: intercambiar pares de anclas mientras mejore let best = score(order), improved = true; while (improved) { improved = false; for (let a = 0; a < order.length; a++) for (let b = a + 1; b < order.length; b++) { const o = order.slice(); [o[a], o[b]] = [o[b], o[a]]; const s = score(o); if (s > best + 1e-12) { best = s; order = o; improved = true; } } } return {order, score: best}; }40:T42d,## Star Coordinates - Basic Star Coordinates (0 - 4 points) - Star Coordinates with interaction (0 - 8 points) ### Steps 1. **Normalize the data** ${tex`X \in \mathbb{R}^{N \times D} \rightarrow [0,1]^D`} Normalize each column (dimension) so that all values fall within the interval ${tex`[0, 1]`}. 2. **Assign direction vectors (axes) for each dimension** For each dimension ${tex`j \in \{1, \dots, D\}`}, define a unit vector (axis) ${tex`S_j`}$ positioned radially from the origin: ${tex` S_j = \left( \cos\left(\frac{2\pi(j - 1)}{D}\right),\ \sin\left(\frac{2\pi(j - 1)}{D}\right) \right) `} 3. **Calculate the projected point ${tex`P_i`} for each data point ${tex`x_i`}** Star Coordinates uses a linear combination of the dimension vectors: ${tex` P_i = \sum_{j=1}^{D} x_{ij} \cdot S_j `} This gives the 2D position for the ${tex`i`}-th point. 4. **(Optional) Apply scaling factor to stretch visualization** You may scale the result using a factor ${tex`r`}: ${tex` P_i^{\text{scaled}} = r \cdot P_i `}41:T6d9,starCoordinates = { const size = 720, margin = 70, c = size / 2; const r = 1; // paso 4: factor de escala const P = starProject(scNorm, scAxes); const maxLen = d3.max(P, p => Math.hypot(p[0], p[1])); const unit = (c - margin) / Math.max(1, r * maxLen); // px por unidad const sx = v => c + v * unit, sy = v => c - v * unit; // y hacia arriba const svg = d3.create("svg") .attr("viewBox", [0, 0, size, size]).attr("width", size) .style("max-width", "100%").style("height", "auto") .style("font", "11px sans-serif"); // Ejes S_j svg.append("g").selectAll("line").data(scAxes).join("line") .attr("x1", c).attr("y1", c) .attr("x2", d => sx(d.x)).attr("y2", d => sy(d.y)) .attr("stroke", "#888"); svg.append("g").selectAll("text").data(scAxes).join("text") .attr("x", d => sx(d.x) + 12 * d.x) .attr("y", d => sy(d.y) - 12 * d.y) .attr("text-anchor", d => d.x > 0.3 ? "start" : d.x < -0.3 ? "end" : "middle") .attr("dominant-baseline", "middle") .text(d => d.name); // Puntos P_i escalados svg.append("g").selectAll("circle").data(P).join("circle") .attr("cx", p => sx(r * p[0])).attr("cy", p => sy(r * p[1])) .attr("r", 3.5) .attr("fill", (p, i) => scColor(data[i][scClass])) .attr("fill-opacity", 0.75) .attr("stroke", "white").attr("stroke-width", 0.5); // Leyenda const leg = svg.append("g").attr("transform", "translate(12,16)") .selectAll("g").data(scColor.domain()).join("g") .attr("transform", (d, i) => `translate(0,${i * 18})`); leg.append("circle").attr("r", 5).attr("fill", d => scColor(d)); leg.append("text").attr("x", 10).attr("dy", "0.35em").text(d => `${scClass} = ${d}`); return svg.node(); }42:[{"id":"5ef9383469cac3a665fd0f27845ee3c55eb2474d6587c943f13ccd5c94acf25d5c4213797fc9b89e9e1cbe0dcc58d1607c343690c313796ed6f8be0e268ddf93","href":"https://static.observableusercontent.com/files/5ef9383469cac3a665fd0f27845ee3c55eb2474d6587c943f13ccd5c94acf25d5c4213797fc9b89e9e1cbe0dcc58d1607c343690c313796ed6f8be0e268ddf93","name":"iris-1.csv","type":"text/csv","lastModified":1745372951408.563,"size":4606},{"id":"c4ae00c0aa09a3f98cf6dba2d84ced2200173fc68f27ed978d66a57b53952f3241263d8195d31ed33b68c1d5bbb82fc316155f1275aad755ca7d384c2a8d56d6","href":"https://static.observableusercontent.com/files/c4ae00c0aa09a3f98cf6dba2d84ced2200173fc68f27ed978d66a57b53952f3241263d8195d31ed33b68c1d5bbb82fc316155f1275aad755ca7d384c2a8d56d6","name":"Wine.csv","type":"text/csv","lastModified":1745372877078.387,"size":11462}] 39:{"id":"84ab834fd8ae9ee4","slug":"multidimensional-visualization-ejercicio","title":"Multidimensional Visualization Ejercicio","thumbnail":null,"access_level":"public","create_time":"$D2026-09-22T14:23:31.957Z","update_time":"$D2026-09-22T15:47:29.782Z","view_time":null,"first_public_time":"$D2026-09-22T15:19:54.351Z","has_unpublished_edits":null,"fork":{"id":"fd507377f058b512","slug":"multidimensional-visualization-ejercicio","title":"Multidimensional Visualization Ejercicio","owner":{"id":"a25d8d0a78fdd028","login":"visualizaciondatosutec","name":"VisualizacionDatosUtec"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e6ea96dec060bb93","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","tier":"starter_2024","bio":"","following":false},"version":460,"publish_version":460,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e2328f2ad99ffed","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e6ea96dec060bb93","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Multidimensional Visualization Ejercicio","cells":[{"id":0,"value":"# Multidimensional Visualization Ejercicio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"viewof select = Inputs.select(\n [\"iris-1.csv\",\"Wine.csv\"],\n {\n label: \"Select a dataset\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"data = FA(select).csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Radviz\n- Basic Radviz (0 - 3 points)\n- Radviz with interaction of Anchor points or variables (0 - 6 points)\n\n### Steps:\n1. Normalize the data ${tex`X \\in \\mathbb{R}^{N \\times D}`} to interval ${tex`\\langle 0, 1 \\rangle`},\n2. Place the dimensional anchors ${tex`S_j`}, where ${tex`j \\in \\{1, \\dots, D\\}`}
${tex`S_j = \\left(r \\cos{\\frac{(j-1)2\\pi}{D}}, r \\sin{\\frac{(j-1)2\\pi}{D}} \\right)`},\n3. Calculate the points ${tex`P_i`} where to place each record,
${tex`P_i = \\sum_j^D{\\frac{x_{ij}}{\\sum_j^D{x_{ij}}}S_j}`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"features = data.columns.filter(d=>d!='class')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"//escala de banda\nanchorpointScale = d3.scalePoint().domain(data.columns).range([0,2*Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"anchor_points = {\n let a =[];\n features.forEach(d=>a.push({'name':d,'x':Math.cos(anchorpointScale(d)), 'y':Math.sin(anchorpointScale(d))}));\n return a\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"d3.extent(data.map((d)=>parseFloat(d['sepal-length'])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"//normalize data\nnew_data = {\n const escalas = features.map(d=>d3.extent(data.map(e =>parseFloat(e[d]))))\n const values = data.map((d,j)=>{return features.map((u,i)=>{\n d[u]=(parseFloat(d[u])-escalas[i][0])/(escalas[i][1]-escalas[i][0])\n return d[u]\n })})\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"margin = {return {top: 50, right: 50, bottom: 50, left: 50};}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"space =800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"//simple Scale\nScala = d3.scaleLinear().domain([-1,1]).range([0,space])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"//Draw points\nScala(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"{data.map((d,i)=>{\n let fe = features.map(e=>d[e]);\n \n let suma = d3.sum(fe);\n \n let Xs = anchor_points.map(e=>e.x);\n let Ys = anchor_points.map(e=>e.y);\n \n d['x'] = d3.sum(Xs.map((e,j)=>e*fe[j]))/suma;\n d['y'] = d3.sum(Ys.map((e,j)=>e*fe[j]))/suma;\n })}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"Array.from(new Set(data.map(d=>d.class)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"color('Iris-setosa')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":" color =d3.scaleOrdinal(d3.schemeTableau10)\n .domain(Array.from(new Set(data.map(d=>d.class))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"//Radviz - Wine\nwine = FileAttachment(\"Wine.csv\").csv({typed: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"rvClass = wine.columns[wine.columns.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"rvFeatures = wine.columns.filter(c => c !== rvClass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"rvNorm = {\n const ext = rvFeatures.map(f => d3.extent(wine, d => +d[f]));\n return wine.map(d => rvFeatures.map((f, j) => {\n const [lo, hi] = ext[j];\n return hi === lo ? 0 : (+d[f] - lo) / (hi - lo);\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"rvAnchors = rvFeatures.map((name, j) => {\n const a = 2 * Math.PI * j / rvFeatures.length;\n return {name, x: Math.cos(a), y: Math.sin(a)};\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"function radvizProject(X, anchors) {\n return X.map(row => {\n let x = 0, y = 0, sum = 0;\n anchors.forEach((s, j) => {\n if (s.on === false) return; // variable desactivada\n x += row[j] * s.x;\n y += row[j] * s.y;\n sum += row[j];\n });\n return sum > 0 ? [x / sum, y / sum] : [0, 0];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"rvColor = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(Array.from(new Set(wine.map(d => d[rvClass]))).sort(d3.ascending))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"function rvKnn(pts, k = 10) {\n const idx = d3.range(pts.length);\n return pts.map((p, i) => {\n const d = pts.map((q, j) => {\n if (i === j) return Infinity;\n let s = 0;\n for (let t = 0; t < p.length; t++) { const e = p[t] - q[t]; s += e * e; }\n return s;\n });\n return idx.slice().sort((a, b) => d[a] - d[b]).slice(0, k);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"rvOrigNeighbors = rvKnn(rvNorm, 10).map(r => new Set(r))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"function rvAnchorsFor(order) {\n const S = rvFeatures.map(name => ({name, x: 0, y: 0, on: false}));\n order.forEach((j, t) => {\n const th = 2 * Math.PI * t / order.length;\n S[j] = {name: rvFeatures[j], x: Math.cos(th), y: Math.sin(th), on: true};\n });\n return S;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"function rvScore(order, k = 10) {\n const P = radvizProject(rvNorm, rvAnchorsFor(order));\n const nb = rvKnn(P, k);\n let s = 0;\n nb.forEach((r, i) => r.forEach(q => { if (rvOrigNeighbors[i].has(q)) s++; }));\n return {P, score: s / (P.length * k)};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"rvNP = neighborhoodPreservation(rvNorm, rvProjection, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`**Radviz Wine – Neighborhood Preservation (k = 10):** ${rvNP.global.toFixed(3)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"scClass = data.columns[data.columns.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"scFeatures = data.columns.filter(c => c !== scClass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"scNorm = {\n const ext = scFeatures.map(f => d3.extent(data, d => +d[f]));\n return data.map(d => scFeatures.map((f, j) => {\n const [lo, hi] = ext[j];\n return hi === lo ? 0 : (+d[f] - lo) / (hi - lo);\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"scAxes = scFeatures.map((name, j) => {\n const a = 2 * Math.PI * j / scFeatures.length;\n return {name, x: Math.cos(a), y: Math.sin(a)};\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"function starProject(X, axes) {\n return X.map(row => {\n let x = 0, y = 0;\n axes.forEach((s, j) => { x += row[j] * s.x; y += row[j] * s.y; });\n return [x, y];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"scColor = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(Array.from(new Set(data.map(d => d[scClass]))).sort())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"//your code calculamos los \nanchor_points.map(d=>{\n d.xsc = d.x;\n d.ysc = d.y;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"{\n const r = space/2-50;\n const svg=d3.create('svg').attr('width',space).attr('height',space);\n\n const g = svg.append('g').attr('transform',`translate(${space/2},${space/2})`);\n\n g.selectAll(\".axisL\").data(anchor_points).join('line').attr('x0',0).attr('y0',0).attr('x1',d=>d.xsc*r).attr('y1',d=>d.ysc*r).attr('stroke','blue');\n g.selectAll(\".axisp\").data(anchor_points).join('circle').attr('cx',d=>d.xsc*r).attr('cy',d=>d.ysc*r).attr('r',10).attr('fill','red')\n \n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## Neighborhood Preservation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"// Your Code\nfunction euclidean(a, b) {\n let sum = 0;\n for (let i = 0; i < a.length; i++) {\n const d = a[i] - b[i];\n sum += d * d;\n }\n return Math.sqrt(sum);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"function kNearestNeighbors(points, k) {\n return points.map((point, i) =>\n points\n .map((other, j) => ({\n index: j,\n distance: i === j ? Infinity : euclidean(point, other)\n }))\n .sort((a, b) => a.distance - b.distance)\n .slice(0, k)\n .map(({ index }) => index)\n );\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"function neighborhoodPreservation(original, projected, k = 10) {\n if (original.length !== projected.length) {\n throw new Error(\"Ambos conjuntos deben tener el mismo número de puntos.\");\n }\n\n if (k < 1 || k >= original.length) {\n throw new Error(\"k debe estar entre 1 y n - 1.\");\n }\n\n const originalNeighbors = kNearestNeighbors(original, k);\n const projectedNeighbors = kNearestNeighbors(projected, k);\n\n const perPoint = originalNeighbors.map((neighbors, i) => {\n const projectedSet = new Set(projectedNeighbors[i]);\n const shared = neighbors.reduce(\n (count, neighbor) => count + Number(projectedSet.has(neighbor)),\n 0\n );\n\n return shared / k;\n });\n\n return {\n global: perPoint.reduce((sum, value) => sum + value, 0) / perPoint.length,\n perPoint\n };\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"// Ejemplo\nconst highDimensional = [\n [1, 2, 3, 4],\n [1.1, 2.1, 3, 3.9],\n [8, 7, 9, 6],\n [7.9, 7.1, 8.8, 6.2]\n];\n\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"const projection2D = [\n [0, 0],\n [0.1, 0.1],\n [5, 5],\n [5.2, 4.9]\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"neighborhoodPreservation(highDimensional, projection2D, 1)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"FA = FileAttachment","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 3a:"$39:body"