size is a linear scale denoting (square pixel) area

The default value is 27, and the formula to compute the radius is sqrt(area/3), corresponding to a circle radius of 3.

Author: Fil

src/marks/dot.js

@@ -19,7 +19,7 @@ export class Dot extends Mark {
       ...style
     } = {}
   ) {
-    const [vsize, csize = vsize == null ? 3 : undefined] = maybeNumber(size);
+    const [vsize, csize = vsize == null ? 27 : undefined] = maybeNumber(size);
     const [vfill, cfill = vfill == null ? "none" : undefined] = maybeColor(fill);
     const [vstroke, cstroke = vstroke == null && cfill === "none" ? "currentColor" : undefined] = maybeColor(stroke);
     super(
@@ -46,10 +46,10 @@ export class Dot extends Mark {
   render(
     I,
     {x, y, size, color},
-    {x: X, y: Y, z: Z, size: R, title: L, fill: F, stroke: S}
+    {x: X, y: Y, z: Z, size: A, title: L, fill: F, stroke: S}
   ) {
     let index = filter(I, X, Y, F, S);
-    if (R) index = index.filter(i => positive(R[i]));
+    if (A) index = index.filter(i => positive(A[i]));
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
@@ -60,7 +60,7 @@ export class Dot extends Mark {
             .call(applyDirectStyles, this)
             .attr("cx", i => x(X[i]))
             .attr("cy", i => y(Y[i]))
-            .attr("r", R ? i => size(R[i]) : this.size)
+            .attr("r", A ? i => radius(size(A[i])) : radius(this.size))
             .attr("fill", F && (i => color(F[i])))
             .attr("stroke", S && (i => color(S[i])))
             .call(L ? text => text
@@ -71,6 +71,10 @@ export class Dot extends Mark {
   }
 }
 
+function radius(area) {
+  return Math.sqrt(area / 3);
+}
+
 export function dot(data, options) {
   return new Dot(data, options);
 }

src/scales.js

@@ -1,4 +1,4 @@
-import {registry, position, radius} from "./scales/index.js";
+import {registry, position, size} from "./scales/index.js";
 import {ScaleDiverging, ScaleLinear, ScalePow, ScaleLog, ScaleSymlog} from "./scales/quantitative.js";
 import {ScaleTime, ScaleUtc} from "./scales/temporal.js";
 import {ScaleOrdinal, ScalePoint, ScaleBand} from "./scales/ordinal.js";
@@ -57,7 +57,7 @@ function inferScaleType(key, channels, {type, domain, range}) {
     }
     return type;
   }
-  if (registry.get(key) === radius) return "sqrt";
+  if (registry.get(key) === size) return "linear";
   for (const {type} of channels) if (type !== undefined) return type;
   if ((domain || range || []).length > 2) return inferOrdinalType(key);
   if (domain !== undefined) {

src/scales/index.js

@@ -7,9 +7,9 @@ export const position = Symbol("position");
 // have an associated legend.
 export const color = Symbol("color");
 
-// Radius scales default to the sqrt type, have a default range of [0, 3], and a
+// Size scales default to the linear type, have a default range of [0, 27], and a
 // default domain from 0 to the median first quartile of associated channels.
-export const radius = Symbol("radius");
+export const size = Symbol("size");
 
 // TODO Rather than hard-coding the list of known scale names, collect the names
 // and categories for each plot specification, so that custom marks can register
@@ -19,7 +19,7 @@ export const registry = new Map([
   ["y", position],
   ["fx", position],
   ["fy", position],
-  ["size", radius],
+  ["size", size],
   ["z", null],
   ["color", color]
 ]);

src/scales/quantitative.js

@@ -49,7 +49,7 @@ import {
   interpolateYlOrRd
 } from "d3-scale-chromatic";
 import {scaleDiverging, scaleLinear, scaleLog, scalePow, scaleSymlog} from "d3-scale";
-import {registry, radius, color} from "./index.js";
+import {registry, size, color} from "./index.js";
 import {positive} from "../defined.js";
 
 const constant = x => () => x;
@@ -135,9 +135,9 @@ function Scheme(scheme) {
 export function ScaleQ(key, scale, channels, {
   nice,
   clamp,
-  domain = (registry.get(key) === radius ? inferRadialDomain : inferDomain)(channels),
+  domain = (registry.get(key) === size ? inferRadialDomain : inferDomain)(channels),
   round,
-  range = registry.get(key) === radius ? [0, 3] : undefined, // see inferRadialDomain
+  range = registry.get(key) === size ? [0, 27] : undefined, // see inferRadialDomain
   scheme,
   interpolate = registry.get(key) === color ? (range !== undefined ? interpolateRgb : scheme !== undefined ? Scheme(scheme) : interpolateTurbo) : round ? interpolateRound : undefined,
   invert,