hexgrid

Author: mbostock

src/index.js

@@ -6,6 +6,7 @@ export {boxX, boxY} from "./marks/box.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
 export {Dot, dot, dotX, dotY} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";
+export {Hexgrid, hexgrid} from "./marks/hexgrid.js";
 export {Image, image} from "./marks/image.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";
 export {Link, link} from "./marks/link.js";

src/marks/hexgrid.js

@@ -0,0 +1,45 @@
+import {create} from "d3";
+import {Mark} from "../plot.js";
+import {number} from "../options.js";
+import {applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
+import {sqrt4_3} from "../symbols.js";
+
+const defaults = {
+  ariaLabel: "hexgrid",
+  fill: "none",
+  stroke: "currentColor",
+  strokeOpacity: 0.1
+};
+
+export function hexgrid(options) {
+  return new Hexgrid(options);
+}
+
+export class Hexgrid extends Mark {
+  constructor({radius = 10, clip = true, ...options} = {}) {
+    super(undefined, undefined, {clip, ...options}, defaults);
+    this.radius = number(radius);
+  }
+  render(index, scales, channels, dimensions) {
+    const {dx, dy, radius: rx} = this;
+    const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
+    const x0 = marginLeft, x1 = width - marginRight, y0 = marginTop, y1 = height - marginBottom;
+    const 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;
+    const m = [];
+    for (let j = j0; j < j1; ++j) {
+      for (let i = i0; i < i1; ++i) {
+        m.push(`M${i * wx + (j & 1) * rx},${j * wy}${path}`);
+      }
+    }
+    return create("svg:g")
+        .call(applyIndirectStyles, this, dimensions)
+        .call(g => g.append("path")
+          .call(applyDirectStyles, this)
+          .call(applyTransform, null, null, offset + dx, offset + dy)
+          .attr("d", m.join("")))
+      .node();
+  }
+}

src/symbols.js

@@ -1,17 +1,17 @@
 import {symbolAsterisk, symbolDiamond2, symbolPlus, symbolSquare2, symbolTriangle2, symbolX as symbolTimes} from "d3";
 import {symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "d3";
 
-const w = 2 / Math.sqrt(3);
+export const sqrt4_3 = 2 / Math.sqrt(3);
 
 const symbolHexagon = {
   draw(context, size) {
-    const s = Math.sqrt(size / Math.PI), t = s * w, h = t / 2;
-    context.moveTo(0, t);
-    context.lineTo(s, h);
-    context.lineTo(s, -h);
-    context.lineTo(0, -t);
-    context.lineTo(-s, -h);
-    context.lineTo(-s, h);
+    const rx = Math.sqrt(size / Math.PI), ry = rx * sqrt4_3, hy = ry / 2;
+    context.moveTo(0, ry);
+    context.lineTo(rx, hy);
+    context.lineTo(rx, -hy);
+    context.lineTo(0, -ry);
+    context.lineTo(-rx, -hy);
+    context.lineTo(-rx, hy);
     context.closePath();
   }
 };

test/output/hexbin.svg

@@ -4,15 +4,16 @@ import {hexbin as Hexbin} from "d3-hexbin";
 
 export default async function() {
   const penguins = await d3.csv("data/penguins.csv", d3.autoType);
+  const radius = 12;
   return Plot.plot({
-    grid: true,
     marks: [
+      Plot.frame(),
+      Plot.hexgrid({radius}),
       Plot.dot(penguins, {
         x: "culmen_depth_mm",
         y: "culmen_length_mm",
         symbol: "hexagon",
         initialize([index], {x: {value: X}, y: {value: Y}}, {x, y}) {
-          const radius = 12;
           const bins = Hexbin().x(i => x(X[i])).y(i => y(Y[i])).radius(radius * 2 / Math.sqrt(3))(index);
           return {
             facets: [d3.range(bins.length)],