统计图背景改为透明；取消散点聚合，改为截断10000 token以内；移动平均窗口改为32

client/src/css/start.scss

@@ -18,7 +18,6 @@ $breakpoint-tablet: 768px;
   --text-color: #333;
   --text-muted: #777;
   --panel-bg: #fafafa;
-  --hist-bg: #e2e2e2;
   --border-color: #ddd;
   --button-bg: #f8f8f8;
   --button-hover-bg: #f0f0f0;
@@ -74,7 +73,6 @@ html {
   --text-color: var(--text-color-light);
   --text-muted: #888;
   --panel-bg: #2d2d2d;
-  --hist-bg: #282828;
   --border-color: #444;
   --button-bg: #353535;
   --button-hover-bg: #454545;

client/src/css/violin.scss

@@ -44,6 +44,6 @@
 }
 
 .HistogramX {
-  background-color: var(--hist-bg);
+  background-color: transparent;
   border-radius: 6px;
 }

client/src/ts/compare.ts

@@ -396,8 +396,6 @@ window.onload = () => {
         if (stats.tokenSurprisals && stats.tokenSurprisals.length > 0) {
             columnData.histograms.stats_surprisal_progress.update({
                 data: stats.tokenSurprisals,
-                maxPoints: 1000,
-                movingAverageWindow: 20,
                 xLabel: 'token index',
                 yLabel: 'surprisal (bits)'
             });

client/src/ts/utils/visualizationUpdater.ts

@@ -133,8 +133,6 @@ export class VisualizationUpdater {
         if (currentSurprisals && currentSurprisals.length > 0) {
             this.deps.stats_surprisal_progress.update({
                 data: currentSurprisals,
-                maxPoints: 1000,
-                movingAverageWindow: 20,  // 基于token的窗口大小
                 xLabel: 'token index',
                 yLabel: 'surprisal (bits)'
             });

client/src/ts/vis/Histogram.ts

@@ -70,7 +70,7 @@ export class Histogram extends VComponent<HistogramData> {
             .attr('height', op.height)
             .attr('rx', 6)
             .attr('ry', 6)
-            .style('fill', 'var(--hist-bg)');
+            .style('fill', 'transparent');
 
         this.layers.bg.append('g')
             .attr('class', 'x-axis')

client/src/ts/vis/ScatterPlot.ts

@@ -8,8 +8,6 @@ export type ScatterPlotData = {
     xLabel?: string,
     yLabel?: string,
     extent?: { x?: [number, number], y?: [number, number] },
-    maxPoints?: number,  // 最高绘制点数阈值（默认1000）
-    movingAverageWindow?: number,  // 移动平均窗口（基于token，默认10）
     scatterColor?: string,  // 散点颜色（默认主题色）
     lineColor?: string  // 移动平均线颜色（默认不同颜色）
 }
@@ -67,7 +65,7 @@ export class ScatterPlot extends VComponent<ScatterPlotData> {
             .attr('height', op.height)
             .attr('rx', 6)
             .attr('ry', 6)
-            .style('fill', 'var(--hist-bg)');
+            .style('fill', 'transparent');
 
         // Y轴
         this.layers.bg.append('g')
@@ -97,30 +95,25 @@ export class ScatterPlot extends VComponent<ScatterPlotData> {
             };
         }
 
-        const maxPoints = data.maxPoints ?? 1000;
+        const maxPoints = 10000;
+        // 移动平均窗口大小，反映了语义趋势粒度。
+        // 32个token的粒度大致相当于句子到段落之间。
+        const movingAverageWindow = 32;
         
-        // 计算采样粒度
-        const N = Math.max(1, Math.ceil(T / maxPoints));
-        const M = Math.ceil(T / N);
-        
-        // 聚合数据：每N个token的平均值，X坐标为真实token索引
-        const aggregatedPoints: Point[] = [];
-        for (let i = 0; i < M; i++) {
-            const startTokenIdx = i * N;  // 真实token索引
-            const endTokenIdx = Math.min(startTokenIdx + N, T);
-            const group = rawSurprisals.slice(startTokenIdx, endTokenIdx);
-            const avgSurprisal = group.reduce((sum, val) => sum + val, 0) / group.length;
-            aggregatedPoints.push({ 
-                x: startTokenIdx,  // 真实token索引
-                y: avgSurprisal 
+        // 直接取前maxPoints个点，超出部分丢掉
+        const scatterPointsCount = Math.min(T, maxPoints);
+        const scatterPoints: Point[] = [];
+        for (let i = 0; i < scatterPointsCount; i++) {
+            scatterPoints.push({
+                x: i,  // token索引
+                y: rawSurprisals[i]
             });
         }
         
-        // 计算移动平均（基于原始token数据，窗口单位为token）
-        const window = data.movingAverageWindow ?? 10;
+        // 计算移动平均
         const movingAverage: Point[] = [];
         for (let i = 0; i < T; i++) {
-            const halfWindow = Math.floor(window / 2);
+            const halfWindow = Math.floor(movingAverageWindow / 2);
             const startTokenIdx = Math.max(0, i - halfWindow);
             const endTokenIdx = Math.min(T, i + halfWindow + 1);
             const windowTokens = rawSurprisals.slice(startTokenIdx, endTokenIdx);
@@ -132,7 +125,7 @@ export class ScatterPlot extends VComponent<ScatterPlotData> {
         }
         
         return {
-            scatterPoints: aggregatedPoints,
+            scatterPoints: scatterPoints,
             movingAverageLine: movingAverage,
             extent: data.extent,
             xLabel: data.xLabel,
@@ -188,9 +181,9 @@ export class ScatterPlot extends VComponent<ScatterPlotData> {
             .attr('d', line)
             .style('fill', 'none')
             .style('stroke', rd.lineColor || '#ff6b6b')
-            .style('stroke-width', 2);
+            .style('stroke-width', 2)
 
-        // 渲染散点
+        // 渲染散点（后渲染，在线上方）
         this.layers.main.selectAll('.scatter-point')
             .data(rd.scatterPoints)
             .join('circle')
@@ -199,7 +192,7 @@ export class ScatterPlot extends VComponent<ScatterPlotData> {
             .attr('cy', d => yScale(d.y))
             .attr('r', 1.5)
             .style('fill', rd.scatterColor || '#70b0ff')
-            .style('opacity', 0.6);
+            .style('opacity', 0.5)
 
         // 渲染X轴
         const xAxis = d3.axisBottom(xScale)