plotagents 0.5.0 → 0.8.0

package/src/charts/regplot.js

@@ -4,7 +4,7 @@ import { el, g, text, tip, esc, barPath, dotLayer } from '../svg.js';
 import { measure } from '../text.js';
 import { makeFormat, formatNumber } from '../format.js';
 import { colorMap, readable } from '../theme.js';
-import { ensureData, requireField, num, fieldsOf, fieldKind, uniq, humanize } from '../data.js';
+import { ensureData, requireField, num, fieldsOf, fieldKind, uniq, humanize, PlotError } from '../data.js';
 import { yAxisMargin, yAxisTop, yGrid, yTickLabels, gridX, quietCorner } from '../axes.js';
 import { createFrame } from '../frame.js';
 import { polyfit, lowess, histogram, kde as kdeEst } from '../stats.js';
@@ -31,6 +31,12 @@ function readPoints(spec, data, { needY = true } = {}) {
   const pts = data
     .map((r) => ({ x: num(r[x]), y: num(r[y]), k: hue ? String(r[hue]) : '', name: labelF ? String(r[labelF] ?? '') : '' }))
     .filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && (!xLog || p.x > 0) && (!yLog || p.y > 0));
+  if (!pts.length) {
+    const log = xLog || yLog;
+    throw EN(spec)
+      ? new PlotError(`No row has numeric values in both \`${x}\` and \`${y}\`${log ? ' (> 0 for a log scale)' : ''}.`, `Check that \`x\` and \`y\` are measures with numbers${log ? ', or drop the log scale' : ''}; to compare a measure across categories use \`type: "box"\`.`)
+      : new PlotError(`Ninguna fila tiene valores numéricos en \`${x}\` y \`${y}\`${log ? ' (> 0 para escala log)' : ''}.`, `Revisa que \`x\` e \`y\` sean medidas con números${log ? ', o quita la escala log' : ''}; para comparar una medida entre categorías usa \`type: "box"\`.`);
+  }
   const keys = hue ? uniq(pts.map((p) => p.k)) : [''];
   return { x, y, hue, labelF, pts, keys, xLog, yLog };
 }
@@ -50,7 +56,7 @@ function fitGroup(gp, spec, { xLog, xMin, xMax, steps = 90 }) {
     const pts = lw.map(([t, v]) => [spec.logx ? 10 ** t : t, v]);
     return { line: pts, band: null, r2: null, n: gp.length };
   }
-  const fit = polyfit(xs, ys, { order: spec.order ?? 1, level: (spec.ci ?? 95) / 100 });
+  const fit = polyfit(xs, ys, { order: spec.order ?? 1, level: typeof spec.ci === 'number' ? (spec.ci > 1 ? spec.ci / 100 : spec.ci) : 0.95 });
   const line = grid.map((v) => [v, fit.predict(fx(v))]);
   const band = spec.ci === false || spec.ci === null || gp.length < (spec.order ?? 1) + 3 ? null : grid.map((v) => [v, ...fit.band(fx(v))]);
   return { line, band, r2: fit.r2, n: fit.n, fit };
@@ -117,7 +123,7 @@ export function regplot(spec, theme) {
   });
   if (spec.scatter !== false) {
     const order = [...pts].sort((a, b) => (focusKey(a.k) ? 1 : 0) - (focusKey(b.k) ? 1 : 0));
-    const dots = order.map((p) => ({
+    const dots = order.filter((p) => visible(p, xS, yS, inner)).map((p) => ({
       class: 'pa-m', cx: xS(p.x), cy: yS(p.y), r, fill: colorOf(p.k), fillOpacity: K === 1 ? (M.dotOpacity ?? 0.85) * 0.75 : M.dotOpacity ?? 0.85,
       stroke: pts.length > 400 ? 'none' : theme.surface, strokeWidth: 1.25,
       'data-tip': tip(p.name || p.k || '', `${humanize(P.x)}: ${fx(p.x)}`, `${humanize(P.y)}: ${fy(p.y)}`, p.name && p.k ? p.k : ''),
@@ -345,7 +351,7 @@ export function jointplot(spec, theme) {
       body.push(el('path', { d: L(f.line), fill: 'none', stroke: K === 1 ? theme.ink : colorOf(k), strokeWidth: M.lineWidth ?? 2, opacity: 0.9 }));
     });
   }
-  body.push(g({}, dotLayer(pts.map((p) => ({ class: 'pa-m', cx: xS(p.x), cy: yS(p.y), r, fill: colorOf(p.k), fillOpacity: M.dotOpacity ?? 0.85, stroke: pts.length > 400 ? 'none' : theme.surface, strokeWidth: 1.25, 'data-tip': tip(p.name || p.k, `${humanize(P.x)}: ${fx(p.x)}`, `${humanize(P.y)}: ${fy(p.y)}`, p.name && p.k ? p.k : '') })))));
+  body.push(g({}, dotLayer(pts.filter((p) => visible(p, xS, yS, inner)).map((p) => ({ class: 'pa-m', cx: xS(p.x), cy: yS(p.y), r, fill: colorOf(p.k), fillOpacity: M.dotOpacity ?? 0.85, stroke: pts.length > 400 ? 'none' : theme.surface, strokeWidth: 1.25, 'data-tip': tip(p.name || p.k, `${humanize(P.x)}: ${fx(p.x)}`, `${humanize(P.y)}: ${fy(p.y)}`, p.name && p.k ? p.k : '') })))));
   body.push(pointLabels(pts, spec, xS, yS, r, inner, theme, P));
   body.push(gridX(xAx.ticks, xS, inner, theme, tickFmt(fx, xAx), { lines: false }));
   body.push(yTickLabels(yAx.ticks, yS, inner, theme, yt));
@@ -357,6 +363,12 @@ export function jointplot(spec, theme) {
   return frame.finish(body, { desc, type: 'jointplot' });
 }
 
+/** Con xDomain/yDomain, los puntos fuera del rango no se dibujan fuera del área. */
+function visible(p, xS, yS, inner) {
+  const cx = xS(p.x), cy = yS(p.y);
+  return cx >= inner.x - 1 && cx <= inner.x + inner.w + 1 && cy >= inner.y - 1 && cy <= inner.y + inner.h + 1;
+}
+
 function hashStr(s) {
   let h = 0;
   for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;

package/src/charts/sankey.js

@@ -3,7 +3,7 @@
 import { el, g, text, tip } from '../svg.js';
 import { measure, truncate } from '../text.js';
 import { makeFormat } from '../format.js';
-import { ensureData, requireField, num, fieldsOf, fieldKind } from '../data.js';
+import { ensureData, requireField, num, fieldsOf, fieldKind, PlotError } from '../data.js';
 import { createFrame } from '../frame.js';
 
 export function sankey(spec, theme) {
@@ -16,24 +16,39 @@ export function sankey(spec, theme) {
   requireField(data, to, 'to');
   requireField(data, valueF, 'value');
   const locale = spec.locale || 'es';
+  const en = String(locale).startsWith('en');
 
-  // Enlaces agregados
+  // Enlaces agregados (valores no finitos o ≤ 0 se ignoran).
   const lmap = new Map();
   for (const r of data) {
     const v = num(r[valueF]);
-    if (!(v > 0)) continue;
+    if (!(v > 0) || !Number.isFinite(v)) continue;
     const s = String(r[from]), t = String(r[to]);
     if (s === t) continue;
     const k = s + '\u0000' + t;
     lmap.set(k, (lmap.get(k) || 0) + v);
   }
   const links = [...lmap.entries()].map(([k, v]) => { const [s, t] = k.split('\u0000'); return { s, t, v }; });
+  if (!links.length) {
+    throw en
+      ? new PlotError('The sankey has no positive flows between different nodes.', `Check \`${valueF}\`: it needs values > 0, and \`${from}\` must differ from \`${to}\` (self-loops are dropped).`)
+      : new PlotError('El sankey no tiene flujos positivos entre nodos distintos.', `Revisa \`${valueF}\`: necesita valores > 0, y \`${from}\` debe ser distinto de \`${to}\` (los bucles se omiten).`);
+  }
   const names = [...new Set(links.flatMap((l) => [l.s, l.t]))];
   const nodes = new Map(names.map((n) => [n, { name: n, in: [], out: [], depth: 0 }]));
   for (const l of links) { l.sn = nodes.get(l.s); l.tn = nodes.get(l.t); l.sn.out.push(l); l.tn.in.push(l); }
   for (const n of nodes.values()) n.value = Math.max(sum(n.in), sum(n.out));
 
-  // Profundidad = camino más largo desde un origen (con tope por si hay ciclos).
+  // Un sankey fluye en una dirección: un ciclo (a → b → a) no tiene etapas.
+  const cycle = findCycle(nodes);
+  if (cycle) {
+    const path = cycle.join(' → ');
+    throw en
+      ? new PlotError(`The sankey has a cycle (${path}): flows must go one way, stage by stage.`, 'Name each stage apart ("Chile (origin)" → "Chile (destination)"), drop the return flows, or use `type: "chord"` for two-way exchanges.')
+      : new PlotError(`El sankey tiene un ciclo (${path}): los flujos deben ir en una sola dirección, etapa por etapa.`, 'Distingue las etapas ("Chile (origen)" → "Chile (destino)"), quita los flujos de vuelta o usa `type: "chord"` para intercambios en ambos sentidos.');
+  }
+
+  // Profundidad = camino más largo desde un origen.
   for (let it = 0; it < names.length; it++) {
     let changed = false;
     for (const l of links) if (l.tn.depth < l.sn.depth + 1) { l.tn.depth = l.sn.depth + 1; changed = true; }
@@ -105,7 +120,7 @@ export function sankey(spec, theme) {
     const x0 = l.sn.x + NW, x1 = l.tn.x, xm = (x0 + x1) / 2, w = l.v * ky;
     const d = `M${x0},${l.y0}C${xm},${l.y0} ${xm},${l.y1} ${x1},${l.y1}L${x1},${l.y1 + w}C${xm},${l.y1 + w} ${xm},${l.y0 + w} ${x0},${l.y0 + w}Z`;
     const share = l.sn.value ? Math.round((l.v / l.sn.value) * 100) : 0;
-    linkG.push(el('path', { class: 'pa-m', d, fill: linkColor(l), fillOpacity: theme.link, 'data-tip': `${l.s} → ${l.t}\n${fmt(l.v)} · ${share}% de ${l.s}` }));
+    linkG.push(el('path', { class: 'pa-m', d, fill: linkColor(l), fillOpacity: theme.link, 'data-tip': `${l.s} → ${l.t}\n${fmt(l.v)} · ${share}% ${en ? 'of' : 'de'} ${l.s}` }));
   }
   body.push(g({ class: 'pa-links' }, linkG));
   for (const [ci, c] of cols.entries()) for (const n of c) {
@@ -124,10 +139,31 @@ export function sankey(spec, theme) {
     }
     body.push(g({ 'data-tip': `${n.name}\n${fmt(n.value)}` }, parts));
   }
-  const en = String(locale).startsWith('en');
   const top = [...links].sort((a, b) => b.v - a.v).slice(0, 3).map((l) => `${l.s} → ${l.t} (${fmt(l.v)})`).join('; ');
   const desc = en ? `Sankey diagram with ${nodes.size} nodes and ${links.length} flows. Largest flows: ${top}.` : `Diagrama de Sankey con ${nodes.size} nodos y ${links.length} flujos. Mayores flujos: ${top}.`;
   return frame.finish(body, { desc, type: 'sankey' });
 }
 
 const sum = (ls) => ls.reduce((a, l) => a + l.v, 0);
+
+/** Primer ciclo encontrado (lista de nombres, cerrada) o null. DFS iterativo. */
+function findCycle(nodes) {
+  const state = new Map(); // 1 = en la pila, 2 = terminado
+  for (const start of nodes.values()) {
+    if (state.has(start)) continue;
+    const stack = [[start, 0]];
+    const trail = [start];
+    state.set(start, 1);
+    while (stack.length) {
+      const top = stack[stack.length - 1];
+      const [n, i] = top;
+      if (i < n.out.length) {
+        top[1]++;
+        const m = n.out[i].tn;
+        if (state.get(m) === 1) return [...trail.slice(trail.indexOf(m)), m].map((x) => x.name);
+        if (!state.has(m)) { state.set(m, 1); stack.push([m, 0]); trail.push(m); }
+      } else { state.set(n, 2); stack.pop(); trail.pop(); }
+    }
+  }
+  return null;
+}

package/src/charts/scatter.js

@@ -5,28 +5,47 @@ import { measure } from '../text.js';
 import { makeFormat } from '../format.js';
 import { niceDomain, niceStep, linear, log, logDomain } from '../scale.js';
 import { colorMap } from '../theme.js';
-import { ensureData, requireField, uniq, num, fieldsOf, fieldKind, humanize } from '../data.js';
-import { gridY, gridX, ticksWidth, refLinesY, refLinesX, yAxisMargin, yAxisTop, yGrid, yTickLabels, quietCorner } from '../axes.js';
-import { createFrame, SIZES } from '../frame.js';
+import { ensureData, requireField, uniq, num, fieldsOf, fieldKind, humanize, PlotError } from '../data.js';
+import { gridY, gridX, ticksWidth, refLinesY, refLinesX, yAxisMargin, yAxisTop, yGrid, yTickLabels, quietCorner, isInside } from '../axes.js';
+import { createFrame, SIZES, hash } from '../frame.js';
+import { extent } from '../stats.js';
+import { ctx } from '../context.js';
+
+/** Muestra pareja de ~n filas (inferir tipos de campo sin recorrer 50 mil filas). */
+const sampleRows = (data, n = 200) => (data.length <= n ? data : Array.from({ length: n }, (_, i) => data[Math.floor((i * (data.length - 1)) / (n - 1))]));
 
 export function scatter(spec, theme) {
   const data = ensureData(spec);
   const fields = fieldsOf(data);
-  const numeric = fields.filter((f) => fieldKind(data, f) === 'number' || fieldKind(data, f) === 'year');
+  const sample = sampleRows(data);
+  const kinds = new Map();
+  const kindOf = (f) => { if (!kinds.has(f)) kinds.set(f, fieldKind(sample, f)); return kinds.get(f); };
+  const numeric = spec.x && spec.y ? [] : fields.filter((f) => kindOf(f) === 'number' || kindOf(f) === 'year');
   const x = spec.x || numeric[0];
   const y = spec.y || numeric.find((f) => f !== x);
   const size = spec.size;
   const series = spec.series ?? spec.hue ?? spec.color;
-  const labelF = spec.label ?? fields.find((f) => fieldKind(data, f) === 'category' && f !== series);
+  const labelF = spec.label ?? fields.find((f) => kindOf(f) === 'category' && f !== series);
   requireField(data, x, 'x');
   requireField(data, y, 'y');
   if (size) requireField(data, size, 'size');
   if (series) requireField(data, series, 'series');
   const locale = spec.locale || 'es';
+  const en = String(locale).startsWith('en');
+  const xLog = spec.xScale === 'log', yLog = spec.yScale === 'log';
 
+  // En escala log, los valores ≤ 0 no tienen posición: se omiten.
   const pts = data
     .map((r) => ({ r, x: num(r[x]), y: num(r[y]), s: size ? num(r[size]) : 1, k: series ? String(r[series]) : '', name: labelF ? String(r[labelF] ?? '') : '' }))
-    .filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+    .filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && (!xLog || p.x > 0) && (!yLog || p.y > 0));
+  if (!pts.length) {
+    const which = !data.some((r) => Number.isFinite(num(r[x]))) ? x : y;
+    const logNote = xLog || yLog ? (en ? ' (on a log scale only values > 0 count)' : ' (en escala log solo cuentan valores > 0)') : '';
+    throw new PlotError(
+      en ? `No points to plot: \`${which}\` has no numeric values${logNote}.` : `No hay puntos para graficar: \`${which}\` no tiene valores numéricos${logNote}.`,
+      en ? `Use numeric fields for x and y, e.g. x: "gdp", y: "life_expectancy". Fields: ${fields.join(', ')}.` : `Usa campos numéricos en x e y, p. ej. x: "pib", y: "esperanza_vida". Campos: ${fields.join(', ')}.`
+    );
+  }
   const keys = series ? uniq(pts.map((p) => p.k)) : [''];
   const cmap = colorMap(keys, theme, spec.colors);
   const hl = spec.highlight === undefined ? null : new Set([].concat(spec.highlight).map(String));
@@ -41,27 +60,43 @@ export function scatter(spec, theme) {
   const frame = createFrame(spec, theme, { height: 460 });
   const area = frame.layout(legend);
 
-  const xLog = spec.xScale === 'log', yLog = spec.yScale === 'log';
-  const ex = [Math.min(...pts.map((p) => p.x)), Math.max(...pts.map((p) => p.x))];
-  const ey = [Math.min(...pts.map((p) => p.y)), Math.max(...pts.map((p) => p.y))];
+  const ex = extent(pts.map((p) => p.x));
+  const ey = extent(pts.map((p) => p.y));
   if (spec.xDomain) ex.splice(0, 2, ...spec.xDomain);
   if (spec.yDomain) ey.splice(0, 2, ...spec.yDomain);
   const dx = xLog ? logDomain(...ex) : spec.xDomain ? { min: ex[0], max: ex[1], step: niceStep(ex[1] - ex[0], Math.max(3, Math.round(area.w / 110))) } : niceDomain(ex[0], ex[1], Math.max(3, Math.round(area.w / 110)));
   const dy = yLog ? logDomain(...ey) : spec.yDomain ? { min: ey[0], max: ey[1], step: niceStep(ey[1] - ey[0], Math.max(3, Math.round(area.h / 70))) } : niceDomain(ey[0], ey[1], Math.max(3, Math.round(area.h / 70)));
   if (spec._domains) { spec._domains.x = [dx.min, dx.max]; spec._domains.y = [dy.min, dy.max]; }
-  const ytf = yLog ? fy : fy.tick(dy.step);
-  const xtf = xLog ? fx : fx.tick(dx.step);
   const yTicks = (yLog ? log(dy.min, dy.max, 0, 1) : linear(dy.min, dy.max, 0, 1)).ticks(dy.step);
+  const ytf = yLog ? fy : fy.tick(dy.step, yTicks);
+  const xtf = xLog ? fx : fx.tick(dx.step, linear(dx.min, dx.max, 0, 1).ticks(dx.step));
   const leftM = yAxisMargin(yTicks, ytf, theme);
   const top = area.y + 18 + yAxisTop(theme);
   const inner = { x: area.x + leftM, y: top, w: area.w - leftM - 8, h: area.y + area.h - top - 44 };
-  const maxS = Math.max(...pts.map((p) => p.s));
+  const maxS = extent(pts.map((p) => p.s))[1];
   const rMax = spec.maxRadius ?? Math.min(30, Math.max(12, Math.sqrt((inner.w * inner.h) / Math.max(1, pts.length)) / 3));
   // Las burbujas no se salen del área: margen interno del radio máximo.
   const bp = size ? rMax * 0.75 : 6;
-  const xS = (xLog ? log : linear)(dx.min, dx.max, inner.x + bp, inner.x + inner.w - bp);
   const yS = (yLog ? log : linear)(dy.min, dy.max, inner.y + inner.h - bp, inner.y + bp);
   const rOf = (p) => (size ? Math.max(2.5, Math.sqrt(Math.max(0, p.s) / (maxS || 1)) * rMax) : spec.radius ?? (pts.length > 300 ? 3 : 5));
+  // Eje y por dentro: si un punto pegado a la izquierda choca con una etiqueta
+  // de marca, el rango x arranca pasado la etiqueta más ancha.
+  let xPad = 0;
+  if (isInside(theme, undefined) && !spec.xDomain) {
+    const axisSize = SIZES.axis;
+    const kk = 5 * Math.max(1, ctx.textScale * 0.8);
+    const yT = yS.ticks(dy.step);
+    const boxes = yT.map((t) => { const base = Math.round(yS(t)) + 0.5 - kk; return { w: ticksWidth([t], ytf, theme.type?.axis ?? axisSize), y0: base - (theme.type?.axis ?? axisSize) * 0.75, y1: base + 1 }; });
+    const xS0 = (xLog ? log : linear)(dx.min, dx.max, inner.x + bp, inner.x + inner.w - bp);
+    const wMax = Math.max(0, ...boxes.map((b) => b.w));
+    for (const p of pts) {
+      const r = rOf(p), px = xS0(p.x);
+      if (px - r > inner.x + wMax + 1) continue;
+      const py = yS(p.y);
+      if (boxes.some((b) => px - r < inner.x + b.w + 1 && py + r > b.y0 && py - r < b.y1)) { xPad = Math.min(Math.max(0, wMax + 6 - bp + r), inner.w * 0.2); if (xPad >= inner.w * 0.2) break; }
+    }
+  }
+  const xS = (xLog ? log : linear)(dx.min, dx.max, inner.x + bp + xPad, inner.x + inner.w - bp);
 
   const body = [];
   body.push(yGrid(yS.ticks(dy.step), yS, inner, theme, { baseline: NaN }));
@@ -71,6 +106,7 @@ export function scatter(spec, theme) {
   body.push(text(area.x, area.y + 10, spec.yLabel ?? humanize(y), { fill: theme.lede, fontSize: SIZES.axis, fontWeight: 500 }));
   body.push(text(inner.x + inner.w, inner.y + inner.h + 40, spec.xLabel ?? humanize(x), { fill: theme.lede, fontSize: SIZES.axis, fontWeight: 500, textAnchor: 'end' }));
 
+  const taken = []; // zonas ocupadas por rótulos (R²), para la clave de tamaños
   // Tendencia lineal (mínimos cuadrados)
   if (spec.trend) {
     const tx = pts.map((p) => (xLog ? Math.log10(p.x) : p.x)), ty = pts.map((p) => (yLog ? Math.log10(p.y) : p.y));
@@ -82,12 +118,16 @@ export function scatter(spec, theme) {
     const lx0 = xLog ? Math.log10(dx.min) : dx.min, lx1 = xLog ? Math.log10(dx.max) : dx.max;
     const P = (lx) => [xS(xLog ? 10 ** lx : lx), yS(yLog ? 10 ** (a + b * lx) : a + b * lx)];
     const [ax, ay] = P(lx0), [bx, by] = P(lx1);
-    body.push(el('clipPath', { id: 'pa-clip-trend' }, el('rect', { x: inner.x, y: inner.y, width: inner.w, height: inner.h })));
-    body.push(el('line', { x1: ax, y1: ay, x2: bx, y2: by, stroke: theme.ink, strokeWidth: 1.5, opacity: 0.55, clipPath: 'url(#pa-clip-trend)' }));
+    // id único por gráfico: varios SVG en una página no comparten el recorte.
+    const clipId = 'pa-clip-trend-' + Math.abs(hash(String(spec.title) + x + y + inner.w + pts.length)).toString(36);
+    body.push(el('clipPath', { id: clipId }, el('rect', { x: inner.x, y: inner.y, width: inner.w, height: inner.h })));
+    body.push(el('line', { x1: ax, y1: ay, x2: bx, y2: by, stroke: theme.ink, strokeWidth: 1.5, opacity: 0.55, clipPath: `url(#${clipId})` }));
     const r2s = `R² = ${r2v.toFixed(2).replace('.', String(locale).startsWith('en') ? '.' : ',')}`;
     const occ = pts.map((p) => [xS(p.x), yS(p.y)]);
     for (let i = 0; i <= 24; i++) occ.push([ax + ((bx - ax) * i) / 24, ay + ((by - ay) * i) / 24]);
     const qc = quietCorner(occ, inner, measure(r2s, 11.5) + 4, 16);
+    const r2w = measure(r2s, 11.5) + 4, r2x0 = qc.anchor === 'end' ? qc.x - r2w : qc.x;
+    for (let i = 0; i <= 8; i++) for (const dy of [-12, -6, 0]) taken.push([r2x0 + (r2w * i) / 8, qc.y + dy]);
     body.push(text(qc.x, qc.y, r2s, { fill: theme.lede, fontSize: 11.5, textAnchor: qc.anchor, stroke: theme.surface, strokeWidth: 3, paintOrder: 'stroke' }));
   }
   body.push(refLinesY(spec.refLines || [], yS, inner, theme, fy));
@@ -95,13 +135,54 @@ export function scatter(spec, theme) {
 
   // Burbujas grandes debajo, chicas arriba; anillo del color de fondo.
   const sorted = [...pts].sort((a, b) => (focus(a) - focus(b)) || b.s - a.s);
-  const circles = sorted.map((p) => {
-    const lines = [p.name || '', `${humanize(x)}: ${fx(p.x)}`, `${humanize(y)}: ${fy(p.y)}`];
-    if (size) lines.push(`${humanize(size)}: ${fs(p.s)}`);
-    if (series) lines.splice(1, 0, p.k);
-    return { class: 'pa-m', cx: xS(p.x), cy: yS(p.y), r: rOf(p), fill: colorOf(p), fillOpacity: size ? 0.78 : 0.9, stroke: theme.surface, strokeWidth: size ? 1.5 : pts.length > 400 ? 1 : 2, 'data-tip': tip(...lines) };
+  // Tooltips: la capa densa guarda a lo más MAX_TIPS; no se arman los que se descartan.
+  const MAX_TIPS = 20000;
+  const hx = humanize(x), hy = humanize(y), hs = size ? humanize(size) : '';
+  // Con xDomain/yDomain, los puntos fuera del rango no se dibujan fuera del área.
+  const vis = (p) => { const cx = xS(p.x), cy = yS(p.y); return cx >= inner.x - 1 && cx <= inner.x + inner.w + 1 && cy >= inner.y - 1 && cy <= inner.y + inner.h + 1; };
+  const circles = sorted.filter(vis).map((p, i) => {
+    let t = '';
+    if (i < MAX_TIPS || sorted.length <= 1500) {
+      const lines = [p.name || '', `${hx}: ${fx(p.x)}`, `${hy}: ${fy(p.y)}`];
+      if (size) lines.push(`${hs}: ${fs(p.s)}`);
+      if (series) lines.splice(1, 0, p.k);
+      t = tip(...lines);
+    }
+    return { class: 'pa-m', cx: xS(p.x), cy: yS(p.y), r: rOf(p), fill: colorOf(p), fillOpacity: size ? 0.78 : 0.9, stroke: theme.surface, strokeWidth: size ? 1.5 : pts.length > 400 ? 1 : 2, 'data-tip': t };
   });
-  body.push(dotLayer(circles));
+  body.push(dotLayer(circles, { maxTips: MAX_TIPS }));
+
+  // Clave de tamaños (burbujas): 2–3 círculos de referencia anidados en una esquina libre.
+  if (size && spec.sizeKey !== false && maxS > 0) {
+    const nice = (v) => { const e = 10 ** Math.floor(Math.log10(v)); const m = v / e; return (m >= 5 ? 5 : m >= 2 ? 2 : 1) * e; };
+    const v1 = nice(maxS);
+    const vals = [v1, nice(v1 / 4), nice(v1 / 16)].filter((v, i, a) => a.indexOf(v) === i && Math.sqrt(v / maxS) * rMax >= 4);
+    if (vals.length >= 2) {
+      const radii = vals.map((v) => Math.sqrt(v / maxS) * rMax);
+      const R = radii[0];
+      const labs = vals.map((v) => fs(v));
+      const lw = Math.max(...labs.map((l) => measure(l, 10.5)));
+      const kw = 2 * R + 8 + lw, kh = 2 * R + 16;
+      const occ = sorted.map((p) => [xS(p.x), yS(p.y)]);
+      // Lo ya ocupado (R²) pesa como muchos puntos: la clave nunca lo tapa.
+      for (const q of taken) for (let i = 0; i < 50; i++) occ.push(q);
+      const qc = quietCorner(occ, inner, kw, kh);
+      const left = qc.anchor === 'end' ? qc.x - kw : qc.x;
+      const y0 = qc.y - kh + 3; // borde superior de la caja elegida
+      const cx = left + R, cy0 = y0 + kh - 1;
+      const parts = [text(left, y0 + 10, hs, { fill: theme.muted, fontSize: 10.5, fontWeight: 500 })];
+      let prevY = -Infinity;
+      radii.forEach((r, i) => {
+        const top = cy0 - 2 * r;
+        const ly = Math.max(top, prevY + 11); // rótulos separados aunque los círculos se acerquen
+        prevY = ly;
+        parts.push(el('circle', { cx, cy: cy0 - r, r, fill: 'none', stroke: theme.muted, strokeWidth: 1, opacity: 0.8 }));
+        parts.push(el('path', { d: `M${cx.toFixed(1)},${top.toFixed(1)}H${(cx + R + 1).toFixed(1)}L${(cx + R + 4).toFixed(1)},${ly.toFixed(1)}`, fill: 'none', stroke: theme.muted, strokeWidth: 0.75, opacity: 0.6 }));
+        parts.push(text(cx + R + 6, ly + 3.5, labs[i], { fill: theme.muted, fontSize: 10.5 }));
+      });
+      body.push(g({ class: 'pa-sizekey' }, parts));
+    }
+  }
 
   body.push(yTickLabels(yS.ticks(dy.step), yS, inner, theme, ytf));
 
@@ -116,7 +197,7 @@ export function scatter(spec, theme) {
     }
     const placed = [];
     for (const p of chosen) {
-      if (!p.name) continue;
+      if (!p.name || !vis(p)) continue;
       const w = measure(p.name, 12, 500);
       const r = rOf(p);
       let lx = xS(p.x) + r + 4, ly = yS(p.y) + 4, anchor = 'start';
@@ -128,7 +209,6 @@ export function scatter(spec, theme) {
     }
   }
 
-  const en = String(locale).startsWith('en');
   const desc = en
     ? `Scatter plot of ${humanize(y)} vs ${humanize(x)} with ${pts.length} points.`
     : `Gráfico de dispersión de ${humanize(y)} versus ${humanize(x)} con ${pts.length} puntos.`;

package/src/charts/sunburst.js

@@ -7,7 +7,7 @@ import { makeFormat } from '../format.js';
 import { textOn } from '../theme.js';
 import { humanize } from '../data.js';
 import { createFrame } from '../frame.js';
-import { buildHierarchy, findNode, assignColors, shareFmt, breadcrumb, height, SEP } from '../hierarchy.js';
+import { buildHierarchy, focusNode, assignColors, shareFmt, breadcrumb, height, SEP } from '../hierarchy.js';
 
 const TAU = Math.PI * 2;
 const f = (n) => n.toFixed(2);
@@ -24,7 +24,7 @@ export function sunburst(spec, theme) {
   const locale = spec.locale || 'es';
   const en = String(locale).startsWith('en');
   const { root, fields, valueField } = buildHierarchy(spec);
-  const focus = findNode(root, spec.focus);
+  const focus = focusNode(root, spec.focus);
   const levels = Math.max(1, height(focus));
   assignColors(root, theme, spec); // colores estables al navegar
   const vals = [];
@@ -34,9 +34,10 @@ export function sunburst(spec, theme) {
   const hl = spec.highlight === undefined ? null : new Set([].concat(spec.highlight).map(String));
   const dim = (n) => hl && !n.path.some((p) => hl.has(p));
 
-  const top = focus.children;
-  const legend = top.length > 1 && spec.legend !== false && !focus.path.length
-    ? [...top.filter((c) => !c.folded).map((c) => ({ label: c.name, color: c.color, shape: 'square' })), ...(top.some((c) => c.folded) ? [{ label: en ? 'Other' : 'Otros', color: theme.other, shape: 'square' }] : [])]
+  const top = root.children;
+  const active = focus.path[0];
+  const legend = top.length > 1 && spec.legend !== false
+    ? [...top.filter((c) => !c.folded).map((c) => ({ label: c.name, value: c.name, color: c.color, shape: 'square', active: active === undefined ? undefined : active === c.name })), ...(top.some((c) => c.folded) ? [{ label: en ? 'Other' : 'Otros', color: theme.other, shape: 'square' }] : [])]
     : [];
 
   const frame = createFrame(spec, theme, { height: (spec.width || 720) < 560 ? Math.round((spec.width || 720) + 190) : Math.min(560, Math.max(380, (spec.width || 720) * 0.7)) });
@@ -126,7 +127,7 @@ export function sunburst(spec, theme) {
     measure(small, 11.5) <= r0 * 1.7 ? text(cx, cy + bigSize * 0.3 + 16, small, { fill: theme.lede, fontSize: 11.5, textAnchor: 'middle' }) : '',
   ]));
 
-  const top3 = top.slice(0, 3).map((c) => `${c.name} ${share(c.value, total)}`).join(', ');
+  const top3 = focus.children.slice(0, 3).map((c) => `${c.name} ${share(c.value, total)}`).join(', ');
   const what = humanize(valueField);
   const desc = en
     ? `Sunburst of ${what} in ${fields.length} levels, total ${fmt(total)}. Largest groups: ${top3}.`