bugfix: Plot.cell respects dx, dy (#956)

* bugfix: Plot.cell respects dx, dy
closes #955

Author: Fil

src/marks/cell.js

@@ -1,4 +1,5 @@
 import {identity, indexOf, maybeColorChannel, maybeTuple} from "../options.js";
+import {applyTransform} from "../style.js";
 import {AbstractBar} from "./bar.js";
 
 const defaults = {
@@ -17,8 +18,9 @@ export class Cell extends AbstractBar {
       defaults
     );
   }
-  _transform() {
-    // noop
+  _transform(selection, mark) {
+    // apply dx, dy
+    selection.call(applyTransform, mark, {}, 0, 0);
   }
 }
 

test/output/gridChoroplethDx.svg

@@ -0,0 +1,39 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const [grid, data] = await Promise.all([
+    await d3.csv("data/us-state-grid.csv", d3.autoType).then(gridmap),
+    await d3.csv("data/us-state-population-2010-2019.csv", d3.autoType)
+  ]);
+  const states = data
+    .filter(d => grid.has(d.State))
+    .map(d => ({...d, ...grid.get(d.State)}));
+  return Plot.plot({
+    height: 420,
+    x: {
+      axis: null
+    },
+    y: {
+      axis: null
+    },
+    color: {
+      type: "diverging-log",
+      scheme: "piyg"
+    },
+    marks: [
+      Plot.cell(states, {x: "x", y: "y", fill: change, dx: -1.5, dy: -1.5}),
+      Plot.cell(states, {x: "x", y: "y", stroke: "black", dx: 1.5, dy: 1.5}),
+      Plot.text(states, {x: "x", y: "y", text: "key", dy: -6}),
+      Plot.text(states, {x: "x", y: "y", text: (f => d => f(change(d) - 1))(d3.format("+.0%")), dy: 6, fillOpacity: 0.6})
+    ]
+  });
+}
+
+function gridmap(states) {
+  return new Map(states.map(state => [state.name, state]));
+}
+
+function change(d) {
+  return d["2019"] / d["2010"];
+}

test/plots/grid-choropleth-dx.js

@@ -80,6 +80,7 @@ export {default as gistempAnomalyTransform} from "./gistemp-anomaly-transform.js
 export {default as googleTrendsRidgeline} from "./google-trends-ridgeline.js";
 export {default as greekGods} from "./greek-gods.js";
 export {default as gridChoropleth} from "./grid-choropleth.js";
+export {default as gridChoroplethDx} from "./grid-choropleth-dx.js";
 export {default as groupedRects} from "./grouped-rects.js";
 export {default as hadcrutWarmingStripes} from "./hadcrut-warming-stripes.js";
 export {default as hexbin} from "./hexbin.js";