binWidth instead of radius

Author: Fil

src/marks/hexgrid.js

@@ -17,15 +17,15 @@ export function hexgrid(options) {
 }
 
 export class Hexgrid extends Mark {
-  constructor({radius = 10, clip = true, ...options} = {}) {
+  constructor({binWidth = 20, clip = true, ...options} = {}) {
     super(undefined, undefined, {clip, ...options}, defaults);
-    this.radius = number(radius);
+    this.binWidth = number(binWidth);
   }
   render(index, scales, channels, dimensions) {
-    const {dx, dy, radius: rx} = this;
+    const {dx, dy, binWidth} = this;
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
     const x0 = marginLeft - ox, x1 = width - marginRight - ox, y0 = marginTop - oy, y1 = height - marginBottom - oy;
-    const ry = rx * sqrt4_3, hy = ry / 2, wx = rx * 2, wy = ry * 1.5;
+    const rx = binWidth / 2, ry = rx * sqrt4_3, hy = ry / 2, wx = rx * 2, wy = ry * 1.5;
     const path = `m0,${-ry}l${rx},${hy}v${ry}l${-rx},${hy}`;
     const i0 = Math.floor(x0 / wx), i1 = Math.ceil(x1 / wx);
     const j0 = Math.floor((y0 + hy) / wy), j1 = Math.ceil((y1 - hy) / wy) + 1;

src/transforms/hexbin.js

@@ -11,14 +11,14 @@ import {hasOutput, maybeOutputs} from "./group.js";
 export const ox = 0.5, oy = 0;
 
 export function hexbin(outputs = {fill: "count"}, options = {}) {
-  const {radius, ...rest} = outputs;
-  return hexbinn(rest, {radius, ...options});
+  const {binWidth, ...rest} = outputs;
+  return hexbinn(rest, {binWidth, ...options});
 }
 
 // TODO filter e.g. to show empty hexbins?
 // TODO disallow x, x1, x2, y, y1, y2 reducers?
-function hexbinn(outputs, {radius = 10, fill, stroke, z, ...options}) {
-  radius = +radius;
+function hexbinn(outputs, {binWidth = 20, fill, stroke, z, ...options}) {
+  binWidth = +binWidth;
   const [GZ, setGZ] = maybeChannel(z);
   const [vfill] = maybeColorChannel(fill);
   const [vstroke] = maybeColorChannel(stroke);
@@ -31,7 +31,7 @@ function hexbinn(outputs, {radius = 10, fill, stroke, z, ...options}) {
   }, {fill, stroke, ...options});
   return {
     symbol: "hexagon",
-    ...!hasOutput(outputs, "r") && {r: radius},
+    ...!hasOutput(outputs, "r") && {r: binWidth / 2},
     ...!setGF && {fill},
     ...((hasOutput(outputs, "fill") || setGF) && stroke === undefined) ? {stroke: "none"} : {stroke},
     ...options,
@@ -55,7 +55,7 @@ function hexbinn(outputs, {radius = 10, fill, stroke, z, ...options}) {
         const binFacet = [];
         for (const o of outputs) o.scope("facet", facet);
         for (const index of Z ? group(facet, i => Z[i]).values() : [facet]) {
-          for (const bin of hbin(index, X, Y, radius)) {
+          for (const bin of hbin(index, X, Y, binWidth)) {
             binFacet.push(++i);
             BX.push(bin.x);
             BY.push(bin.y);
@@ -67,7 +67,7 @@ function hexbinn(outputs, {radius = 10, fill, stroke, z, ...options}) {
       const channels = {
         x: {value: BX},
         y: {value: BY},
-        ...Object.fromEntries(outputs.map(({name, output}) => [name, {scale: true, radius: name === "r" ? radius : undefined, value: output.transform()}]))
+        ...Object.fromEntries(outputs.map(({name, output}) => [name, {scale: true, binWidth: name === "r" ? binWidth : undefined, value: output.transform()}]))
       };
       if ("r" in channels) {
         const R = channels.r.value;
@@ -78,9 +78,8 @@ function hexbinn(outputs, {radius = 10, fill, stroke, z, ...options}) {
   };
 }
 
-function hbin(I, X, Y, r) {
-  const dx = r * 2;
-  const dy = r * sqrt3;
+function hbin(I, X, Y, dx) {
+  const dy = dx * sqrt3 / 2;
   const bins = new Map();
   for (const i of I) {
     let px = X[i] / dx;