Merge pull request #921 from nteract/clicktesting-fixes

Various fixes from click-testing

Author: emeeks

docs/public/llms.txt

@@ -72,7 +72,6 @@
 
 ## Optional
 
-- [Cookbook — Candlestick](/cookbook/candlestick-chart): Financial OHLC charts
 - [Cookbook — Radar](/cookbook/radar-plot): Radar/spider charts
 - [Cookbook — Timeline](/cookbook/timeline): Timeline visualizations
 - [Cookbook — Marginal Graphics](/cookbook/marginal-graphics): Distribution plots in scatter margins

docs/src/App.js

@@ -93,7 +93,6 @@ import PushApiPage from "./pages/features/PushApiPage"
 import CustomChartsPage from "./pages/features/CustomChartsPage"
 
 // New cookbook pages
-import CandlestickCookbookPage from "./pages/cookbook/CandlestickChartPage"
 import HomerunMapPage from "./pages/cookbook/HomerunMapPage"
 import CanvasInteractionPage from "./pages/cookbook/CanvasInteractionPage"
 import UncertaintyVisualizationPage from "./pages/cookbook/UncertaintyVisualizationPage"
@@ -312,7 +311,6 @@ export default function DocsApp() {
                   </>
                 }
               />
-              <Route path="candlestick-chart" element={<CandlestickCookbookPage />} />
               <Route path="homerun-map" element={<HomerunMapPage />} />
               <Route path="canvas-interaction" element={<CanvasInteractionPage />} />
               <Route path="uncertainty-visualization" element={<UncertaintyVisualizationPage />} />

docs/src/IndexPages.js

@@ -158,11 +158,6 @@ export function ExamplesIndex() {
       <div className="subpages">
         <div className="sub-header">StreamXYFrame</div>
 
-        <PageLink
-          href="/cookbook/candlestick-chart"
-          title="Candlestick Chart"
-          thumbnail={new URL("../public/assets/img/candlestick.png", import.meta.url)}
-        />
         <PageLink
           href="/cookbook/homerun-map"
           title="Homerun Map"

docs/src/components/navData.js

@@ -136,7 +136,6 @@ const navData = [
     title: "Cookbook",
     path: "/cookbook",
     children: [
-      { title: "Candlestick Chart", path: "/cookbook/candlestick-chart" },
       { title: "Homerun Map", path: "/cookbook/homerun-map" },
       { title: "Canvas Interaction", path: "/cookbook/canvas-interaction" },
       { title: "Uncertainty Visualization", path: "/cookbook/uncertainty-visualization" },

docs/src/examples/CandlestickChart.js

@@ -28,15 +28,35 @@ const StreamingMarginalGraphics = () => {
   const [containerRef, containerWidth] = useContainerWidth()
 
   useEffect(() => {
+    // Box-Muller transform: pulls a sample from a standard normal so the
+    // cloud has a natural Gaussian shape (dense in the middle, thinner
+    // tails) instead of the boxy uniform-noise look the previous data
+    // generator produced.
+    const gauss = () => {
+      const u = 1 - Math.random()
+      const v = Math.random()
+      return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v)
+    }
     const id = setInterval(() => {
-      if (chartRef.current) {
-        const i = indexRef.current++
-        // Simulate a bivariate stream: x drifts with noise, y is correlated + noise
-        const x = 50 + Math.sin(i * 0.03) * 30 + (Math.random() - 0.5) * 20
-        const y = x * 0.8 + (Math.random() - 0.5) * 25 + 20
-        chartRef.current.push({ time: i, x, y })
+      if (!chartRef.current) return
+      // Push three samples per tick — at the configured `windowSize` of
+      // 250 the chart keeps ~80 ticks of history (≈ 4s at the 50ms
+      // cadence below), enough motion to see the cluster slide while
+      // still looking like a populated cloud rather than a sparse
+      // trail.
+      const i = indexRef.current++
+      // Cluster mean drifts on a slow sine so the user can see the
+      // distribution moving while the marginals reshape in lockstep.
+      const cx = 50 + Math.sin(i * 0.04) * 25
+      const cy = 50 + Math.sin(i * 0.04 + Math.PI / 3) * 25
+      for (let k = 0; k < 3; k++) {
+        const x = cx + gauss() * 8
+        // Strong positive correlation between x and y, with a small
+        // independent residual so the cloud has visible spread.
+        const y = cy + (x - cx) * 0.7 + gauss() * 6
+        chartRef.current.push({ time: i * 3 + k, x, y })
       }
-    }, 80)
+    }, 50)
     return () => clearInterval(id)
   }, [])
 
@@ -67,7 +87,7 @@ The key is combining \`runtimeMode="streaming"\` with \`marginalGraphics\` on a
             size={[containerWidth, 400]}
             xAccessor="x"
             yAccessor="y"
-            windowSize={200}
+            windowSize={250}
             pointStyle={() => ({
               fill: theme[1],
               fillOpacity: 0.7,