nicer colors

dist/index.html

@@ -164,7 +164,7 @@
     <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="assets/images/banner.png" alt="FineWeb">
+            <img src="assets/images/clusters.png" alt="FineWeb">
         </figure>
         <div id="clusters-plot">
             <img src="assets/images/clusters.png" alt="Clusters">

src/clusters.js

@@ -76,7 +76,7 @@ const addStylingToAnnotations = (annotations) => {
                 color: "black",
                 weight: "bold",
             },
-            bgcolor: getColor(annotation.label, 0.9),
+            bgcolor: getColor(annotation.label, 0.6),
             borderpad: 2, // Add padding around the text
             ...annotation,
         };
@@ -113,19 +113,6 @@ const readData = async () => {
     }));
 };
 
-const restyleTraces = (traces, zoomLevel) => {
-    const res = [
-        {
-            ...traces[0],
-            marker: {
-                ...traces[0].marker,
-                size: BASE_SIZE * zoomLevel,
-            },
-        },
-    ];
-    return res;
-};
-
 // The cluster is pretty big, so takes time to donwload
 // In the meantime we put there a placeholder image
 const destroyPlaceholderImage = (parent) => {
@@ -160,9 +147,8 @@ export async function plotClusters() {
             x: data.map((row) => row.x),
             y: data.map((row) => row.y),
             marker: {
-                color: data.map((row) => getColor(row.label, 1.0)),
+                color: data.map((row) => getColor(row.label, 0.4)),
                 size: BASE_SIZE,
-                opacity: 8,
             },
             hoverinfo: "text",
             hovertext: data.map((row) => getLabelHoverFormat(row, labelIDToName)),

src/colors.mjs

@@ -30,23 +30,22 @@ const COLORS = [
     ["46", "145", "229"], // Sky Blue
     ["225", "95", "153"], // Soft Magenta
     ["28", "167", "28"], // Bright Green
-    ["108", "69", "22"], // Dark Brown
-    ["251", "13", "13"], // Vivid Red
-    ["81", "28", "251"], // Royal Blue
+    // ["108", "69", "22"], // Dark Brown
+    ["167", "119", "241"], // Lavender
+    ["182", "129", "0"], // Mustard Yellow
+    ["134", "42", "22"], // Brick Red
+    ["0", "160", "139"], // Teal
     ["175", "0", "56"], // Crimson
     ["108", "124", "50"], // Olive Green
+    ["81", "28", "251"], // Royal Blue
+    ["218", "22", "255"], // Electric Purple
+    ["98", "0", "66"], // Dark Magenta
     // ['34', '42', '42'], Black, which makes the text unreadable
-    ["182", "129", "0"], // Mustard Yellow
-    ["117", "13", "134"], // Deep Magenta
-    ["0", "160", "139"], // Teal
+    // ["117", "13", "134"], // Deep Magenta
     ["251", "0", "209"], // Hot Pink
     ["252", "0", "128"], // Bright Pink
-    ["178", "130", "141"], // Dusty Pink
-    ["218", "22", "255"], // Electric Purple
+    // ["178", "130", "141"], // Dusty Pink
     ["119", "138", "174"], // Slate Blue
-    ["134", "42", "22"], // Brick Red
-    ["167", "119", "241"], // Lavender
-    ["98", "0", "66"], // Dark Magenta
     ["22", "22", "167"], // Deep Blue
     ["218", "96", "202"], // Orchid
     // ['13', '42', '99'], Black
@@ -56,7 +55,7 @@ const COLORS = [
 
 
 export const NAMED_COLORS = {
-    "red": ["251", "13", "13"]
+    "red": ["251", "13", "13"], // Vivid Red
 };
 
 export const getColor = (i, opacity=1) => {

src/index.html

@@ -164,7 +164,7 @@
     <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="assets/images/banner.png" alt="FineWeb">
+            <img src="assets/images/clusters.png" alt="FineWeb">
         </figure>
         <div id="clusters-plot">
             <img src="assets/images/clusters.png" alt="Clusters">