@opendata-ai/openchart-engine 7.4.1 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.4.1",
+  "version": "7.5.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.4.1",
+    "@opendata-ai/openchart-core": "7.5.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/charts/scatter/__tests__/compute.test.ts

@@ -179,6 +179,40 @@ describe('computeScatterMarks', () => {
 
       expect(marks[0].aria.label).toContain('population=');
     });
+
+    it('explicit size domain keeps the largest datum below the max radius', () => {
+      const base = makeBubbleSpec();
+      // Widen the domain past the data max (8000) so nothing reaches radius 30.
+      const spec: NormalizedChartSpec = {
+        ...base,
+        encoding: {
+          ...base.encoding,
+          size: { field: 'population', type: 'quantitative', scale: { domain: [0, 32000] } },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeScatterMarks(spec, scales, chartArea, fullStrategy);
+
+      const largest = marks.find((m) => m.data.population === 8000)!;
+      // sqrt(8000/32000) * 30 = 0.5 * 30 = 15, well under the 30px cap.
+      expect(largest.r).toBeLessThan(20);
+    });
+
+    it('explicit size range caps the radii', () => {
+      const base = makeBubbleSpec();
+      const spec: NormalizedChartSpec = {
+        ...base,
+        encoding: {
+          ...base.encoding,
+          size: { field: 'population', type: 'quantitative', scale: { range: [2, 12] } },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeScatterMarks(spec, scales, chartArea, fullStrategy);
+
+      const maxRadius = Math.max(...marks.map((m) => m.r));
+      expect(maxRadius).toBeLessThanOrEqual(12);
+    });
   });
 
   describe('color encoding', () => {

package/src/charts/scatter/compute.ts

@@ -113,19 +113,24 @@ export function computeScatterMarks(
   const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
   const isSequentialColor = colorEnc?.type === 'quantitative';
   const colorField = colorEnc?.field;
-  const sizeField = encoding.size && 'field' in encoding.size ? encoding.size.field : undefined;
+  const sizeEnc = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
+  const sizeField = sizeEnc?.field;
 
-  // Build a size scale for bubble variant
+  // Build a size scale for bubble variant. Domain and radius range are
+  // author-overridable via `encoding.size.scale.{domain,range}`: an explicit
+  // domain (e.g. [0, 900]) keeps the largest datum below the max radius so
+  // dense clusters don't blob together, and an explicit range caps the radii.
   let sizeScale: ((v: number) => number) | undefined;
   if (sizeField) {
     const sizeValues = spec.data.map((d) => Number(d[sizeField])).filter((v) => Number.isFinite(v));
 
-    const sizeMin = min(sizeValues) ?? 0;
-    const sizeMax = max(sizeValues) ?? 1;
+    const explicitDomain = sizeEnc?.scale?.domain as [number, number] | undefined;
+    const [sizeMin, sizeMax] = explicitDomain ?? [min(sizeValues) ?? 0, max(sizeValues) ?? 1];
 
-    sizeScale = scaleSqrt()
-      .domain([sizeMin, sizeMax])
-      .range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS]);
+    const explicitRange = sizeEnc?.scale?.range as [number, number] | undefined;
+    const [radiusMin, radiusMax] = explicitRange ?? [MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS];
+
+    sizeScale = scaleSqrt().domain([sizeMin, sizeMax]).range([radiusMin, radiusMax]).clamp(true);
   }
 
   const marks: PointMark[] = [];