diff --git a/tutorials/progressive_globe.qmd b/tutorials/progressive_globe.qmd index 26f5bd7..63780fc 100644 --- a/tutorials/progressive_globe.qmd +++ b/tutorials/progressive_globe.qmd @@ -99,8 +99,8 @@ Circle size = log(sample count). Color = dominant data source.
Loading...Resolution
-
0Clusters
-
0Samples
+
0Clusters Loaded
+
0Samples Loaded
-Load Time
@@ -195,13 +195,14 @@ function buildHash(v) { } // === Helpers: update DOM imperatively (no OJS reactivity) === -function updateStats(phase, points, samples, time, pointsLabel) { +function updateStats(phase, points, samples, time, pointsLabel, samplesLabel) { const s = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; }; s('sPhase', phase); s('sPoints', typeof points === 'string' ? points : points.toLocaleString()); s('sSamples', typeof samples === 'string' ? samples : samples.toLocaleString()); if (time != null) s('sTime', time); if (pointsLabel) s('sPointsLbl', pointsLabel); + if (samplesLabel) s('sSamplesLbl', samplesLabel); } function updatePhaseMsg(text, type) { @@ -494,7 +495,7 @@ phase1 = { performance.measure('p1', 'p1-start', 'p1-end'); const elapsed = performance.getEntriesByName('p1').pop().duration; - updateStats('H3 Res4', data.length, totalSamples, `${(elapsed/1000).toFixed(1)}s`, 'Global Clusters'); + updateStats('H3 Res4', data.length, totalSamples, `${(elapsed/1000).toFixed(1)}s`, 'Clusters Loaded', 'Samples Loaded'); updatePhaseMsg(`${data.length.toLocaleString()} clusters, ${totalSamples.toLocaleString()} samples. Zoom in for finer detail.`, 'done'); console.log(`Phase 1: ${data.length} clusters in ${elapsed.toFixed(0)}ms`); @@ -567,7 +568,7 @@ zoomWatcher = { // Show viewport count immediately const bounds = getViewportBounds(); const inView = countInViewport(bounds); - updateStats(`H3 Res${res}`, `${inView.clusters.toLocaleString()} / ${data.length.toLocaleString()}`, inView.samples.toLocaleString(), `${(elapsed/1000).toFixed(1)}s`, 'In View / Total'); + updateStats(`H3 Res${res}`, `${inView.clusters.toLocaleString()} / ${data.length.toLocaleString()}`, inView.samples.toLocaleString(), `${(elapsed/1000).toFixed(1)}s`, 'Clusters in View / Loaded', 'Samples in View'); updatePhaseMsg(`${data.length.toLocaleString()} clusters, ${total.toLocaleString()} samples. ${res < 8 ? 'Zoom in for finer detail.' : 'Zoom closer for individual samples.'}`, 'done'); currentRes = res; @@ -667,7 +668,7 @@ zoomWatcher = { renderSamplePoints(cachedData, bounds); - updateStats('Samples', cachedData.length, cachedData.length, `${(elapsed/1000).toFixed(1)}s`, 'In View'); + updateStats('Samples', cachedData.length, cachedData.length, `${(elapsed/1000).toFixed(1)}s`, 'Samples in View', 'Samples in View'); updatePhaseMsg(`${cachedData.length.toLocaleString()} individual samples. Click one for details.`, 'done'); console.log(`Point mode: ${cachedData.length} samples in ${elapsed.toFixed(0)}ms`); @@ -730,9 +731,9 @@ zoomWatcher = { const inView = countInViewport(bounds); const total = viewer._clusterTotal; if (total) { - updateStats(`H3 Res${currentRes}`, `${inView.clusters.toLocaleString()} / ${total.clusters.toLocaleString()}`, inView.samples.toLocaleString(), '—', 'In View / Total'); + updateStats(`H3 Res${currentRes}`, `${inView.clusters.toLocaleString()} / ${total.clusters.toLocaleString()}`, inView.samples.toLocaleString(), '—', 'Clusters in View / Loaded', 'Samples in View'); } else { - updateStats(`H3 Res${currentRes}`, viewer.h3Points.length, '—', '—', 'Global Clusters'); + updateStats(`H3 Res${currentRes}`, viewer.h3Points.length, '—', '—', 'Clusters Loaded', 'Samples Loaded'); } updatePhaseMsg(`${inView.clusters.toLocaleString()} clusters in view. Zoom closer for individual samples.`, 'done'); console.log('Exited point mode'); @@ -780,7 +781,7 @@ zoomWatcher = { const inView = countInViewport(bounds); const total = viewer._clusterTotal; if (total) { - updateStats(`H3 Res${currentRes}`, `${inView.clusters.toLocaleString()} / ${total.clusters.toLocaleString()}`, inView.samples.toLocaleString(), null, 'In View / Total'); + updateStats(`H3 Res${currentRes}`, `${inView.clusters.toLocaleString()} / ${total.clusters.toLocaleString()}`, inView.samples.toLocaleString(), null, 'Clusters in View / Loaded', 'Samples in View'); } }