make the title nicer

index.html

@@ -166,7 +166,8 @@
     </script>
 </d-front-matter>
 <d-title>
-    <div id="title-plot" class="main-plot-container l-page">
+    <h1 class="l-page" style="text-align: center;">🍷 FineWeb: decanting the web for the finest text data at scale</h1>
+    <div id="title-plot" class="main-plot-container l-screen">
         <figure>
             <img src="banner.png" alt="FineWeb">
         </figure>

src/clusters.js

@@ -26,12 +26,33 @@ const COLORS = [
     ["175", "0", "56"],
 ];
 
-const BASE_SIZE = 5;
+const BASE_SIZE = 4;
+// x0, x1, y0, y1
+const DEFAULT_XAXIS = {
+    showticklabels: false,
+    showgrid: false,
+    zeroline: false,
+    title: {
+        text: "<a href='https://github.com/huggingface/text-clustering' target='_blank' style='color: inherit;'>Fineweb dataset</a>",
+        font: {
+            size: 16,
+            style: "italic",
+        },
+    },
+    range: [7.23943662773044, 13.605120929434547]
+}
+const DEFAULT_YAXIS = {
+    showticklabels: false,
+    showgrid: false,
+    zeroline: false,
+    range: [1.6774392919913423, 6.514440889610389],
+}
 
 const getLabelHoverFormat = (row, ) => {
     return `<b>Text</b>: ${row.text}<br><b>Label</b>: ${row.label}<br><b>Edu label</b>: ${row.eduScore}`;
 };
 
+
 // Number of annotations to display
 const K = 15;
 
@@ -155,7 +176,7 @@ async function plotClusters() {
             y: data.map((row) => row.y),
             marker: {
                 color: data.map((row) => getColor(row.label, 1.0)),
-                size: 5,
+                size: BASE_SIZE,
                 opacity: 8,
             },
             hoverinfo: "text",
@@ -170,31 +191,17 @@ async function plotClusters() {
     const layout = {
         height: 550,
         width: parent.clientWidth,
-        xaxis: {
-            showticklabels: false,
-            showgrid: false,
-            zeroline: false,
-            title: {
-                text: "Fineweb dataset (clustered using TODO and labeled using TODO),<br> zoom in to see more",
-                font: {
-                    size: 16,
-                    style: "italic",
-                },
-                // italic
-            },
-        },
-        yaxis: {
-            showticklabels: false,
-            showgrid: false,
-            zeroline: false,
-        },
-        annotations: getRelevantAnnotations(annotations, x0, x1, y0, y1),
+        xaxis: DEFAULT_XAXIS,
+        yaxis: DEFAULT_YAXIS,
+        annotations: getRelevantAnnotations(annotations, DEFAULT_XAXIS.range[0], DEFAULT_XAXIS.range[1], DEFAULT_YAXIS.range[0], DEFAULT_YAXIS.range[1]),
         font: {
             family: "apple-system, Arial, sans-serif",
         },
         margin: {
             t: 0,
-            b: 30,
+            b: 50,
+            l: 0,
+            r: 0,
         },
     };
 
@@ -220,20 +227,21 @@ async function plotClusters() {
                 newy0,
                 newy1
             );
+            console.log(x0, x1, y0, y1);
             // 1.8 otherwise it's too big
             const zoomLevel =
                 Math.min(
                     (x1 - x0) / (newx1 - newx0),
                     (y1 - y0) / (newy1 - newy0)
-                ) / 1.8;
+                ) / 1.2;
             Plotly.update(
                 parent,
                 { "marker.size": BASE_SIZE * zoomLevel },
                 { annotations: relevant_annotations },
             );
         }
-        // Zoom reset
-        else if (eventdata["xaxis.autorange"]) {
+        // Zoom reset to full outzoomed or to base range
+        else if (eventdata["xaxis.autorange"] || eventdata["xaxis.range"]) {
             const relevant_annotations = getRelevantAnnotations(
                 annotations,
                 x0,
@@ -241,13 +249,15 @@ async function plotClusters() {
                 y0,
                 y1
             );
+            // We wan to always fully zoomed out
+            const xaxis = _.merge({}, DEFAULT_XAXIS, { range: [x0, x1] });
+            const yaxis = _.merge({}, DEFAULT_YAXIS, { range: [y0, y1] });
             Plotly.update(
                 parent,
                 { "marker.size": BASE_SIZE },
-                { annotations: relevant_annotations }
+                { annotations: relevant_annotations, xaxis, yaxis }
             );
         }
-        // Otherwise it's just the relayout itself
     });
 
     window.addEventListener("resize", () => {
@@ -268,7 +278,7 @@ document.addEventListener("DOMContentLoaded", () => {
 const readCSV = async (file) => {
     const data = await fetch(file);
     const text = await data.text();
-    const csv = Papa.parse(text, { header: true });
+    const csv = Papa.parse(text, { header: true, skipEmptyLines: true });
     return csv.data;
 };