plot3 0.6.3__tar.gz → 0.6.5__tar.gz

{plot3-0.6.3 → plot3-0.6.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plot3
-Version: 0.6.3
+Version: 0.6.5
 Summary: ggplot2 grammar of graphics for Python: interactive WebGL figures and journal-ready PNG, SVG, and PDF
 Author: Rigoberto Leyva Salmeron
 License-Expression: MIT
@@ -130,6 +130,10 @@ gapminder = pd.read_csv("https://raw.githubusercontent.com/kirenz/datasets/maste
 `{frame_time}` in the title shows the current year as it plays.
 `transition_states("phase")` steps through categories instead of time.
 
+Click a bubble to trace it: its path through every frame appears, with
+the years along it and its name (from `group=`) riding beside it as it
+plays. Click it again, or empty space, to clear it. This works in 3D too.
+
 <details>
 <summary>Run this without downloading anything (made-up gapminder-shaped data)</summary>
 

{plot3-0.6.3 → plot3-0.6.5}/README.md

@@ -103,6 +103,10 @@ gapminder = pd.read_csv("https://raw.githubusercontent.com/kirenz/datasets/maste
 `{frame_time}` in the title shows the current year as it plays.
 `transition_states("phase")` steps through categories instead of time.
 
+Click a bubble to trace it: its path through every frame appears, with
+the years along it and its name (from `group=`) riding beside it as it
+plays. Click it again, or empty space, to clear it. This works in 3D too.
+
 <details>
 <summary>Run this without downloading anything (made-up gapminder-shaped data)</summary>
 

plot3-0.6.5/plot3/__version__.py

@@ -0,0 +1 @@
+__version__ = "0.6.5"

{plot3-0.6.3 → plot3-0.6.5}/plot3/viewer.py

@@ -55,6 +55,9 @@ body{display:flex;flex-direction:column}
 #legend .sz-block{clear:both;padding-top:6px}
 #legend .bub{display:inline-block;border-radius:50%;box-sizing:border-box;flex:none;
   border:1px solid rgba(0,0,0,.35)}
+#legend.docked{display:flex!important;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:0;line-height:1.5}
+#legend.docked .sz-block{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;padding-top:0;clear:none}
+#legend.docked .sz{margin:0}
 #player{display:none;flex:none;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 10px 8px;max-width:100%;box-sizing:border-box}
 #player button{font:inherit;padding:3px 10px;border-radius:5px;cursor:pointer}
 #player #play-range{flex:1;min-width:80px}
@@ -345,19 +348,25 @@ function showLegendBox() {
   legEl.style.border = '1px solid ' + T.grid;
   legEl.style.color = T.ink2;
 }
+// Height the docked legend takes at the bottom; the plot shrinks by it.
+let legendReserve = 0;
 function placeLegend() {
-  if (!legEl || legEl.style.display === 'none' || legEl.dataset.docked === '1') return;
+  legendReserve = 0;
+  if (!legEl || legEl.style.display === 'none') return;
   const figH = figEl.clientHeight || 0;
   if (figH < 40) return;
-  // A key taller than the panel covers the curve. Sit it under the axes.
-  if (legEl.offsetHeight > figH * 0.40) {
+  // A key taller than the panel covers the data (a short notebook output).
+  // Lay it out in rows under the axes, and keep that room free.
+  if (legEl.dataset.docked !== '1' && legEl.offsetHeight > figH * 0.40) {
     legEl.dataset.docked = '1';
+    legEl.classList.add('docked');
     legEl.style.top = 'auto';
-    legEl.style.bottom = '8px';
+    legEl.style.bottom = '6px';
     legEl.style.left = '8px';
     legEl.style.right = '8px';
     legEl.style.maxWidth = 'none';
   }
+  if (legEl.dataset.docked === '1') legendReserve = legEl.offsetHeight + 8;
 }
 const LEGEND_GLYPH = { circle: '●', triangle: '▲', square: '■', diamond: '◆', plus: '+', cross: '×' };
 // Legend keys: a square, the point's symbol, or a short (dashed) line.
@@ -693,6 +702,26 @@ const stepEntries = [];
 let hoverHold = false;
 let trail = null;
 let trailId = null;
+// The clicked bubble's path: points with their frame, its name and colour.
+let trailInfo = null;
+// A click toggles a bubble's path only on the bubble itself (a little
+// slack for tiny dots), so a stray click near one draws nothing.
+function clickRadius(L, i, minimum) {
+  return L._size ? Math.max(minimum, L._size[i] * 0.55) : minimum;
+}
+function trailKey(L, i) { return String(i) + '|' + (L.ids ? L.ids[i] : ''); }
+function trailHint(L, i) {
+  return '<br><span style="opacity:.6;font-size:10px">click to ' +
+    (trailId === trailKey(L, i) ? 'hide' : 'show') + ' its path</span>';
+}
+// The frame's value (the year) for a point on the path, or '' if unknown.
+function trailYear(f) {
+  const tr = S.transition;
+  if (!tr || !tr.times || !trailInfo || tr.times.length !== trailInfo.nF) return '';
+  const v = tr.times[f];
+  if (tr.integer) return String(Math.round(+v));
+  return typeof v === 'number' ? fmt(v) : String(v);
+}
 function framePresent(F, i) {
   if (!F.x || !F.x.maskData || !F.x.maskData[i]) return false;
   if (!F.y || !F.y.maskData || !F.y.maskData[i]) return false;
@@ -1158,6 +1187,7 @@ function clearTrail() {
     trail = null;
   }
   trailId = null;
+  trailInfo = null;
 }
 function setTrail(L, obj) {
   clearTrail();
@@ -1199,7 +1229,18 @@ function setTrail(L, obj) {
   }
   scene.add(group);
   trail = group;
-  trailId = String(obj) + '|' + (L.ids ? L.ids[obj] : '');
+  trailId = trailKey(L, obj);
+  const pts = [];
+  for (let f = 0; f < nF; f++) {
+    const i = obj * nF + f;
+    if (!framePresent(F, i)) continue;
+    pts.push({ x: F.x.data[i], y: F.y.data[i], z: F.z ? F.z.data[i] : 0, f: f });
+  }
+  trailInfo = {
+    L: L, obj: obj, nF: nF, ext: ext, pts: pts,
+    name: L.ids && L.ids[obj] != null ? String(L.ids[obj]) : '',
+    color: 'rgb(' + rgb.map(c => Math.round(c * 255)).join(',') + ')',
+  };
 }
 let frameLabel = '';
 const axisTitleSprites = [];
@@ -2029,14 +2070,52 @@ if (!S.is3d) {
       const AY = Math.min(Math.max(Y, M.t + 12), M.t + H - 10);
       s += '<text x="' + AX + '" y="' + AY + '" fill="' + T.ink + '" text-anchor="middle" dominant-baseline="middle" font-size="12" font-weight="600" paint-order="stroke" stroke="' + T.surface + '" stroke-width="4" stroke-linejoin="round">' + plot3Esc(ann.text) + '</text>';
     }
+    if (trailInfo) s += trailLabels2D();
     svg.innerHTML = s;
     if (gridSvg) gridSvg.innerHTML = grid;
   }
 
+  // The clicked bubble's name rides beside it; years mark its path,
+  // spaced so they do not overlap (the first and last always show).
+  function trailLabels2D() {
+    const t = trailInfo, ext = t.ext;
+    const inside = (X, Y) => X >= M.l && X <= M.l + W && Y >= M.t && Y <= M.t + H;
+    const halo = ' paint-order="stroke" stroke="' + T.surface + '" stroke-width="3" stroke-linejoin="round"';
+    // The name sits right of the bubble's current position; years keep clear.
+    const L = t.L, i = t.obj;
+    let nameBox = null, nameSvg = '';
+    if (t.name && L._x && L._y) {
+      const X = M.l + screenX(L._x[i] * ext[0]), Y = M.t + screenY(L._y[i] * ext[1]);
+      if (inside(X, Y)) {
+        const x0 = X + (L._size ? L._size[i] * 0.5 : 4) + 4;
+        nameBox = [x0 - 4, Y - 9, x0 + 7.2 * t.name.length + 4, Y + 9];
+        nameSvg = '<text x="' + x0 + '" y="' + Y + '" fill="' + t.color +
+          '" font-size="12" font-weight="700" dominant-baseline="middle"' + halo + '>' +
+          plot3Esc(t.name) + '</text>';
+      }
+    }
+    const underName = (X, Y) => nameBox && X + 5 + 26 > nameBox[0] && X + 5 < nameBox[2] &&
+      Y - 5 > nameBox[1] - 6 && Y - 5 - 10 < nameBox[3];
+    const kept = [];
+    t.pts.forEach((p, k) => {
+      const X = M.l + screenX(p.x * ext[0]), Y = M.t + screenY(p.y * ext[1]);
+      const label = trailYear(p.f);
+      if (!label || !inside(X, Y) || underName(X, Y)) return;
+      const prev = kept[kept.length - 1];
+      const near = prev && Math.hypot(X - prev.X, Y - prev.Y) < 34;
+      if (near && k !== t.pts.length - 1) return;
+      if (near && kept.length > 1) kept.pop();   // the last year wins a crowded end
+      else if (near) return;
+      kept.push({ X, Y, label });
+    });
+    return kept.map(k => '<text x="' + (k.X + 5) + '" y="' + (k.Y - 5) + '" fill="' + T.muted +
+      '" font-size="10"' + halo + '>' + plot3Esc(k.label) + '</text>').join('') + nameSvg;
+  }
+
   function layout() {
     placeLegend();
     W = Math.max(50, figEl.clientWidth - M.l - M.r);
-    H = Math.max(50, figEl.clientHeight - M.t - M.b);
+    H = Math.max(50, figEl.clientHeight - M.t - M.b - legendReserve);
     if (equalAspect) applyEqual();
     host.style.left = M.l + 'px'; host.style.top = M.t + 'px';
     renderer.setSize(W, H);
@@ -2274,7 +2353,9 @@ if (!S.is3d) {
               : head
                 + fmtSpan('x', xv, xSpan) + ', '
                 + fmtSpan('y', yv, ySpan) + sizeBit;
-            consider(d, sx, sy, html, !!(L.kind === 'point' && L.frames && S.transition));
+            const moving = L.kind === 'point' && L.frames && S.transition;
+            const cr = clickRadius(L, i, 6);
+            consider(d, sx, sy, html + (moving && d <= cr * cr ? trailHint(L, i) : ''), !!moving);
           }
         }
       }
@@ -2302,14 +2383,14 @@ if (!S.is3d) {
       for (let i = 0; i < L.n; i++) {
         if (L._alpha && L._alpha[i] <= 0.04) continue;
         const sx = screenX(L._x[i]), sy = screenY(L._y[i]);
-        const rad = L._size ? Math.max(10, L._size[i] * 0.55) : 12;
+        const rad = clickRadius(L, i, 6);
         const d = (sx - mx) * (sx - mx) + (sy - my) * (sy - my);
         if (d <= rad * rad && d < hitD) { hitD = d; hit = { L, i }; }
       }
     }
+    tip.style.display = 'none';
     if (!hit) { clearTrail(); draw(); return; }
-    const key = String(hit.i) + '|' + (hit.L.ids ? hit.L.ids[hit.i] : '');
-    if (trailId === key) { clearTrail(); draw(); return; }
+    if (trailId === trailKey(hit.L, hit.i)) { clearTrail(); draw(); return; }
     setTrail(hit.L, hit.i);
     draw();
   });
@@ -2651,6 +2732,7 @@ if (!S.is3d) {
       }
     }
     hoverHold = !!(best && best[0].kind === 'point' && best[0].frames && S.transition);
+    const hoverD = bestD;
     if (!best) { tip3.style.display = 'none'; return; }
     const [L, i, sx, sy, xn, yn, zn] = best;
     const xv = fromScale('x', xn);
@@ -2678,6 +2760,10 @@ if (!S.is3d) {
         + axisPair('y', fmt(yv)) + ', '
         + axisPair('z', fmt(zv)) + sizeBit
       : head + fmt(xv) + ', ' + fmt(yv) + ', ' + fmt(zv) + sizeBit;
+    if (hoverHold) {
+      const cr = sizeAtten ? 8 : clickRadius(L, i, 8);
+      if (hoverD <= cr * cr) tip3.innerHTML += trailHint(L, i);
+    }
     plot3Typeset(tip3);
     tip3.style.left = Math.min(w - 8, sx + 12) + 'px';
     tip3.style.top = Math.max(8, sy - 10) + 'px';
@@ -2728,20 +2814,41 @@ if (!S.is3d) {
         v.project(cam);
         const sx = (v.x * 0.5 + 0.5) * w;
         const sy = (-v.y * 0.5 + 0.5) * h;
-        const rad = (L._size && !sizeAtten) ? Math.max(16, L._size[i] * 0.55) : 16;
+        const rad = sizeAtten ? 8 : clickRadius(L, i, 8);
         const d = (sx - mx) * (sx - mx) + (sy - my) * (sy - my);
         if (d <= rad * rad && d < hitD) { hitD = d; hit = { L, i }; }
       }
     }
+    tip3.style.display = 'none';
     if (!hit) { clearTrail(); return; }
-    const key = String(hit.i) + '|' + (hit.L.ids ? hit.L.ids[hit.i] : '');
-    if (trailId === key) { clearTrail(); return; }
+    if (trailId === trailKey(hit.L, hit.i)) { clearTrail(); return; }
     setTrail(hit.L, hit.i);
+    // The scene cannot move text every frame cheaply: label the path's
+    // ends, the first year, and the name with the last year.
+    if (trail && trailInfo && trailInfo.pts.length) {
+      const t = trailInfo;
+      const at = p => new THREE.Vector3(p.x * t.ext[0], p.y * t.ext[1], p.z * t.ext[2]);
+      const first = t.pts[0], last = t.pts[t.pts.length - 1];
+      const startText = trailYear(first.f);
+      if (startText) {
+        const sp = sprite(startText, true);
+        sp.center.set(-0.1, -0.2);
+        sp.position.copy(at(first));
+        trail.add(sp);
+      }
+      const endText = [t.name, trailYear(last.f)].filter(Boolean).join(' ');
+      if (endText) {
+        const sp = sprite(endText, false);
+        sp.center.set(-0.1, -0.2);
+        sp.position.copy(at(last));
+        trail.add(sp);
+      }
+    }
   });
 
   function layout() {
     placeLegend();
-    const w = Math.max(figEl.clientWidth, 1), h = Math.max(figEl.clientHeight, 1);
+    const w = Math.max(figEl.clientWidth, 1), h = Math.max(figEl.clientHeight - legendReserve, 1);
     renderer.setSize(w, h);
     cam.aspect = w / h;
     cam.updateProjectionMatrix();
@@ -2763,7 +2870,7 @@ if (!S.is3d) {
   const touches = (a, b, air) => a[0] - air < b[0] + b[2] && b[0] - air < a[0] + a[2] &&
     a[1] - air < b[1] + b[3] && b[1] - air < a[1] + a[3];
   function declutterTicks() {
-    const w = Math.max(figEl.clientWidth, 1), h = Math.max(figEl.clientHeight, 1);
+    const w = Math.max(figEl.clientWidth, 1), h = Math.max(figEl.clientHeight - legendReserve, 1);
     const placed = [];
     for (const marks of tickSprites) {
       if (!marks.length) continue;

{plot3-0.6.3 → plot3-0.6.5}/plot3.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plot3
-Version: 0.6.3
+Version: 0.6.5
 Summary: ggplot2 grammar of graphics for Python: interactive WebGL figures and journal-ready PNG, SVG, and PDF
 Author: Rigoberto Leyva Salmeron
 License-Expression: MIT
@@ -130,6 +130,10 @@ gapminder = pd.read_csv("https://raw.githubusercontent.com/kirenz/datasets/maste
 `{frame_time}` in the title shows the current year as it plays.
 `transition_states("phase")` steps through categories instead of time.
 
+Click a bubble to trace it: its path through every frame appears, with
+the years along it and its name (from `group=`) riding beside it as it
+plays. Click it again, or empty space, to clear it. This works in 3D too.
+
 <details>
 <summary>Run this without downloading anything (made-up gapminder-shaped data)</summary>
 

plot3-0.6.3/plot3/__version__.py

@@ -1 +0,0 @@
-__version__ = "0.6.3"