Improving charts

app/src/content/article.mdx

@@ -516,6 +516,12 @@ This investigation opens several avenues for future work, that could only help f
 
 ---
 
+**Code** is available [here](https://github.com/scienceetonnante/eiffel-tower-llama)
+
+**Thanks** to the NDIF team and especially Jaden Fiotto-Kaufman for help using `nnsight`, to Thom Wolf and Leandro von Werra for useful discussions, and to Thibaud Frere for help using his fabulous [Bringing Paper To Life](https://huggingface.co/spaces/tfrere/research-article-template) blog post template.
+
+---
+
 ## Appendix
 
 ### nnsight code

app/src/content/embeds/d3-correlation-matrix.html

@@ -121,18 +121,18 @@
         'LLM score\ninstruction',
         'LLM score\nfluency',
         'Explicit\nconcept\ninclusion',
-        'Log Prob',
+        'Surprise',
         '3-gram\nrepetition'
       ];
 
       // Correlation matrix (exact values from the image)
       const correlationMatrix = [
-        [1.00, -0.28, -0.37,  0.45, -0.57,  0.00],
-        [-0.28,  1.00,  0.80,  0.068, 0.45, -0.90],
-        [-0.37,  0.80,  1.00,  0.015, 0.67, -0.90],
-        [0.45,  0.068, 0.015, 1.00, -0.10, -0.093],
-        [-0.57,  0.45,  0.67, -0.10, 1.00, -0.53],
-        [0.00, -0.90, -0.90, -0.093, -0.53, 1.00]
+        [1.00, -0.28, -0.37,  0.45,  0.57,  0.00],
+        [-0.28,  1.00,  0.80,  0.068, -0.45, -0.90],
+        [-0.37,  0.80,  1.00,  0.015, -0.67, -0.90],
+        [0.45,  0.068, 0.015, 1.00,  0.10, -0.093],
+        [0.57, -0.45, -0.67,  0.10, 1.00,  0.53],
+        [0.00, -0.90, -0.90, -0.093,  0.53, 1.00]
       ];
 
       // Colors: diverging palette via window.ColorPalettes

app/src/content/embeds/d3-harmonic-mean.html

@@ -461,7 +461,7 @@
               .x(d => newXScale(d.x))
               .y0(d => newYScale(d.yLower))
               .y1(d => newYScale(d.yUpper))
-              .curve(d3.curveMonotoneX);
+              .curve(d3.curveLinear);
 
             gPlot.selectAll('path.uncertainty-band')
               .attr('d', area(dataPoints));
@@ -471,11 +471,23 @@
           const line = d3.line()
             .x(d => newXScale(d.x))
             .y(d => newYScale(d.y))
-            .curve(d3.curveMonotoneX);
+            .curve(d3.curveLinear);
 
           gPlot.selectAll('path.main-line')
             .attr('d', line(dataPoints));
 
+          // Update markers
+          gPlot.selectAll('circle.data-marker')
+            .data(dataPoints)
+            .join('circle')
+            .attr('class', 'data-marker')
+            .attr('cx', d => newXScale(d.x))
+            .attr('cy', d => newYScale(d.y))
+            .attr('r', 3)
+            .attr('fill', CONFIG.lineColor)
+            .attr('stroke', 'var(--page-bg)')
+            .attr('stroke-width', 1.5);
+
           // Update axes
           gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
           gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
@@ -599,7 +611,7 @@
               .x(d => xScale(d.x))
               .y0(d => yScale(d.yLower))
               .y1(d => yScale(d.yUpper))
-              .curve(d3.curveMonotoneX);
+              .curve(d3.curveLinear);
 
             gPlot.selectAll('path.uncertainty-band').data([dataPoints]).join('path')
               .attr('class', 'uncertainty-band')
@@ -610,7 +622,7 @@
           const mainLine = d3.line()
             .x(d => xScale(d.x))
             .y(d => yScale(d.y))
-            .curve(d3.curveMonotoneX);
+            .curve(d3.curveLinear);
 
           gPlot.selectAll('path.main-line').data([dataPoints]).join('path')
             .attr('class', 'main-line')
@@ -620,6 +632,18 @@
             .attr('opacity', 0.85)
             .attr('d', mainLine);
 
+          // Markers
+          gPlot.selectAll('circle.data-marker')
+            .data(dataPoints)
+            .join('circle')
+            .attr('class', 'data-marker')
+            .attr('cx', d => xScale(d.x))
+            .attr('cy', d => yScale(d.y))
+            .attr('r', 3)
+            .attr('fill', CONFIG.lineColor)
+            .attr('stroke', 'var(--page-bg)')
+            .attr('stroke-width', 1.5);
+
           // Hover
           setupHover(innerWidth, innerHeight);
         }

app/src/content/embeds/d3-sweep-1d-metrics.html

@@ -477,7 +477,7 @@
               .x(d => newXScale(d.x))
               .y0(d => newYScale(d.yLower))
               .y1(d => newYScale(d.yUpper))
-              .curve(d3.curveMonotoneX);
+              .curve(d3.curveLinear);
 
             gPlot.selectAll('path.uncertainty-band')
               .attr('d', area(dataPoints));
@@ -487,11 +487,23 @@
           const line = d3.line()
             .x(d => newXScale(d.x))
             .y(d => newYScale(d.y))
-            .curve(d3.curveMonotoneX);
+            .curve(d3.curveLinear);
 
           gPlot.selectAll('path.main-line')
             .attr('d', line(dataPoints));
 
+          // Update markers
+          gPlot.selectAll('circle.data-marker')
+            .data(dataPoints)
+            .join('circle')
+            .attr('class', 'data-marker')
+            .attr('cx', d => newXScale(d.x))
+            .attr('cy', d => newYScale(d.y))
+            .attr('r', 3)
+            .attr('fill', CONFIG.lineColor)
+            .attr('stroke', 'var(--page-bg)')
+            .attr('stroke-width', 1.5);
+
           // Update axes
           gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
           gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
@@ -615,7 +627,7 @@
               .x(d => xScale(d.x))
               .y0(d => yScale(d.yLower))
               .y1(d => yScale(d.yUpper))
-              .curve(d3.curveMonotoneX);
+              .curve(d3.curveLinear);
 
             gPlot.selectAll('path.uncertainty-band').data([dataPoints]).join('path')
               .attr('class', 'uncertainty-band')
@@ -626,7 +638,7 @@
           const mainLine = d3.line()
             .x(d => xScale(d.x))
             .y(d => yScale(d.y))
-            .curve(d3.curveMonotoneX);
+            .curve(d3.curveLinear);
 
           gPlot.selectAll('path.main-line').data([dataPoints]).join('path')
             .attr('class', 'main-line')
@@ -636,6 +648,18 @@
             .attr('opacity', 0.85)
             .attr('d', mainLine);
 
+          // Markers
+          gPlot.selectAll('circle.data-marker')
+            .data(dataPoints)
+            .join('circle')
+            .attr('class', 'data-marker')
+            .attr('cx', d => xScale(d.x))
+            .attr('cy', d => yScale(d.y))
+            .attr('r', 3)
+            .attr('fill', CONFIG.lineColor)
+            .attr('stroke', 'var(--page-bg)')
+            .attr('stroke-width', 1.5);
+
           // Hover
           setupHover(innerWidth, innerHeight);
         }