Better screen real estate for ScatterWidget

- Remove point counters to save vertical space
- Compact single-row controls layout
- Smaller dots (radius 3) for finer detail
- Fix SVG zoom issue with max-width constraint
- Scale brush size relative to canvas dimensions
- Remove X/Y axis labels (keep grid)
- Default height now 400px
- Pastel button backgrounds for better color dot visibility
- Bump version to 0.4.0

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: koaning

drawdata/static/scatter_widget.js

@@ -9536,6 +9536,12 @@ var d3 = __toESM(require_d3_v7());
 function render({ model, el }) {
   const colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728"];
   const color_map = { "#1f77b4": "a", "#ff7f0e": "b", "#2ca02c": "c", "#d62728": "d" };
+  function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
   const height = model.get("height") || 400;
   const width = model.get("width") || 800;
   const brushScale = width / 800;
@@ -9587,9 +9593,9 @@ function render({ model, el }) {
       }
       selectedClassButton = button;
       selectedColor = colors[i];
-      button.style.backgroundColor = colors[i];
+      button.style.backgroundColor = hexToRgba(colors[i], 0.25);
       button.style.borderColor = colors[i];
-      button.style.color = "white";
+      button.style.color = "var(--dd-text-color)";
       circle_brush.style("fill", selectedColor).style("fill-opacity", 0.3).style("stroke", selectedColor).style("stroke-width", 2);
     };
     controls.appendChild(button);

js/scatter_widget.js

@@ -4,6 +4,14 @@ function render({ model, el }) {
   // Use fixed color values that match the original for API compatibility
   const colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728"];
   const color_map = {"#1f77b4": "a", "#ff7f0e": "b", "#2ca02c": "c", "#d62728": "d"};
+
+  // Helper to convert hex to rgba for pastel backgrounds
+  function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
 
   // Get dimensions with fallbacks
   const height = model.get("height") || 400;
@@ -72,9 +80,10 @@ function render({ model, el }) {
       }
       selectedClassButton = button;
       selectedColor = colors[i];
-      button.style.backgroundColor = colors[i];
+      // Use pastel background so the colored dot stands out
+      button.style.backgroundColor = hexToRgba(colors[i], 0.25);
       button.style.borderColor = colors[i];
-      button.style.color = "white";
+      button.style.color = "var(--dd-text-color)";
 
       circle_brush
         .style("fill", selectedColor)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "drawdata"
-version = "0.3.9"
+version = "0.4.0"
 description = "draw a dataset from inside Jupyter"
 readme = "readme.md"
 license = {text = "MIT"}