fix the dx/dy mixup

simpler _store
simpler w0

Author: Fil

src/transforms/hexbin.js

@@ -13,18 +13,19 @@ const defaults = {
 };
 
 // width factor (allows the hexbin transform to work with circular dots!)
-const w0 = 1 / Math.sin(Math.PI / 3);
+const w0 = Math.sin(Math.PI / 3);
 
 function hbin(I, X, Y, r) {
-  const dx = r * 2 / w0;
+  const dx = r * 2 * w0;
   const dy = r * 1.5;
+  const keys = new Map();
   return groups(I, i => {
-    let px = X[i] / dy;
-    let py = Y[i] / dx;
+    let px = X[i] / dx;
+    let py = Y[i] / dy;
     if (isNaN(px) || isNaN(py)) return;
     let pj = Math.round(py),
-    pi = Math.round(px - (pj & 1) / 2),
-    py1 = py - pj;
+        pi = Math.round(px = px - (pj & 1) / 2),
+        py1 = py - pj;
     if (Math.abs(py1) * 3 > 1) {
       let px1 = px - pi,
         pi2 = pi + (px < pi ? -1 : 1) / 2,
@@ -33,30 +34,32 @@ function hbin(I, X, Y, r) {
         py2 = py - pj2;
       if (px1 * px1 + py1 * py1 > px2 * px2 + py2 * py2) pi = pi2 + (pj & 1 ? 1 : -1) / 2, pj = pj2;
     }
-    return `${pi}|${pj}`;
+    const key = `${pi}|${pj}`;
+    keys.set(key, [pi, pj]);
+    return key;
   })
   .filter(([p]) => p)
   .map(([p, bin]) => {
-    const [pi, pj] = p.split("|");
-    bin.x = (+pi + (pj & 1) / 2) * dx;
-    bin.y = +pj * dy;
+    const [pi, pj] = keys.get(p);
+    bin.x = (pi + (pj & 1) / 2) * dx;
+    bin.y = pj * dy;
     return bin;
   });
 }
 
-function hexbinLayout({_store, radius, r: _r, opacity: _o, fill: _f, text: _t, title: _l, value: _v}, options) {
+function hexbinLayout(_store, {radius, r: _r, opacity: _o, fill: _f, text: _t, title: _l, value: _v}, options) {
   radius = +radius;
   _r = !!_r;
   _o = !!_o;
   _f = !!_f;
-  return layout({_store, ...options}, function(I, {r, color, opacity}, {x: X, y: Y}) {
+  return layout(options, function(I, {r, color, opacity}, {x: X, y: Y}) {
     if (!_store.channels) {
       const bins = _store.facets.map(I => hbin(I, X, Y, radius));
       const values = bins.map(b => valueof(b, _v));
       const maxValue = max(values.flat());
       color = _f && color.copy().domain([1, maxValue]);
       opacity = _o && opacity.copy().domain([1, maxValue]);
-      r = _r && r && r.copy().domain([0, maxValue]).range([0, radius / w0]);
+      r = _r && r && r.copy().domain([0, maxValue]).range([0, radius * w0]);
       const {data} = this;
       _store.channels = Array.from(bins, (bin, i) => ({
         x: valueof(bin, "x"),
@@ -87,7 +90,7 @@ function hexbinLayout({_store, radius, r: _r, opacity: _o, fill: _f, text: _t, t
 // going to splice them
 export function hexbinTransform(hexbinOptions, options) {
   const _store = {};
-  return basic(hexbinLayout({_store, ...hexbinOptions}, options), (data, facets) => {
+  return basic(hexbinLayout(_store, hexbinOptions, options), (data, facets) => {
     facets = Array.from(facets, facet => Array.from(facet));
     _store.facets = facets;
     return {data, facets};