remove transform marks (observablehq#208)

README.md

@@ -120,7 +120,7 @@ It’s not just line charts, of course. Here’s another useful chart type, the
 Plot.plot({
   height: 240,
   marks: [
-    Plot.binRectY(data, {x: "Volume"}),
+    Plot.rectY(data, Plot.binX({x: "Volume"})),
     Plot.ruleY([0]) // add a rule at y = 0
   ]
 })

src/index.js

@@ -4,20 +4,17 @@ export {plot} from "./plot.js";
 export {Mark} from "./mark.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";
-export {binDot, binRect, binRectX, binRectY} from "./marks/bin.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 {groupCell, groupDot, groupBarX, groupBarY} from "./marks/group.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";
 export {Link, link} from "./marks/link.js";
 export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
-export {stackAreaX, stackAreaY, stackBarX, stackBarY} from "./marks/stack.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
-export {bin, binX, binY, binR} from "./transforms/bin.js";
-export {group, groupX, groupY} from "./transforms/group.js";
+export {bin, binX, binY, binR, binFill} from "./transforms/bin.js";
+export {group, groupX, groupY, groupR, groupFill} from "./transforms/group.js";
 export {normalizeX, normalizeY} from "./transforms/normalize.js";
 export {movingAverageX, movingAverageY} from "./transforms/movingAverage.js";
 export {selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY} from "./transforms/select.js";

src/transforms/bin.js

@@ -16,6 +16,10 @@ export function binR({x, y, ...options} = {}) {
   return {x: mid(x1, x2), y: mid(y1, y2), r, ...transform, z, fill, stroke};
 }
 
+export function binFill(options) {
+  return bin({...options, out: "fill"});
+}
+
 export function bin({x, y, insetLeft = 1, insetTop = 1, out, ...options} = {}) {
   const [transform, x1, x2, y1, y2, l, z, fill, stroke] = bin2(x, y, options);
   return {x1, x2, y1, y2, ...transform, z, fill, stroke, insetLeft, insetTop, [out]: l};

src/transforms/group.js

@@ -12,6 +12,14 @@ export function groupY({y, ...options} = {}) {
   return {y: Y, x, ...transform, z, fill, stroke};
 }
 
+export function groupR(options) {
+  return group({...options, out: "r"});
+}
+
+export function groupFill(options) {
+  return group({...options, out: "fill"});
+}
+
 export function group({x, y, out, ...options} = {}) {
   const [transform, X, Y, L, z, fill, stroke] = group2(x, y, options);
   return {x: X, y: Y, ...transform, z, fill, stroke, [out]: L};

test/plots/aapl-volume.js

@@ -12,7 +12,7 @@ export default async function() {
       grid: true
     },
     marks: [
-      Plot.binRectY(data, {x: d => Math.log10(d.Volume), normalize: true}),
+      Plot.rectY(data, Plot.binX({x: d => Math.log10(d.Volume), normalize: true})),
       Plot.ruleY([0])
     ]
   });

test/plots/diamonds-carat-price-dots.js

@@ -16,7 +16,7 @@ export default async function() {
       domain: [0, 100]
     },
     marks: [
-      Plot.binDot(data, {x: "carat", y: "price", thresholds: 100})
+      Plot.dot(data, Plot.binR({x: "carat", y: "price", thresholds: 100}))
     ]
   });
 }

test/plots/diamonds-carat-price.js

@@ -10,7 +10,7 @@ export default async function() {
       type: "symlog"
     },
     marks: [
-      Plot.binRect(data, {x: "carat", y: "price", thresholds: 100})
+      Plot.rect(data, Plot.binFill({x: "carat", y: "price", thresholds: 100}))
     ]
   });
 }

test/plots/industry-unemployment-share.js

@@ -9,13 +9,13 @@ export default async function() {
       tickFormat: "%"
     },
     marks: [
-      Plot.stackAreaY(data, {
+      Plot.areaY(data, Plot.stackY({
         x: "date",
         y: "unemployed",
         fill: "industry",
         offset: "expand",
         title: "industry"
-      }),
+      })),
       Plot.ruleY([0])
     ]
   });

test/plots/industry-unemployment-stream.js

@@ -8,13 +8,13 @@ export default async function() {
       axis: null
     },
     marks: [
-      Plot.stackAreaY(data, {
+      Plot.areaY(data, Plot.stackY({
         x: "date",
         y: "unemployed",
         fill: "industry",
         title: "industry",
         offset: "wiggle"
-      })
+      }))
     ]
   });
 }

test/plots/industry-unemployment.js

@@ -8,7 +8,12 @@ export default async function() {
       grid: true
     },
     marks: [
-      Plot.stackAreaY(data, {x: "date", y: "unemployed", fill: "industry", title: "industry"}),
+      Plot.areaY(data, Plot.stackY({
+        x: "date",
+        y: "unemployed",
+        fill: "industry",
+        title: "industry"
+      })),
       Plot.ruleY([0])
     ]
   });

test/plots/learning-poverty.js

@@ -27,11 +27,11 @@ export default async function() {
       range: ["#aed9e0", "#edd382", "#ffa69e"]
     },
     marks: [
-      Plot.stackBarX(values, {
+      Plot.barX(values, Plot.stackX({
         x: d => (d.type === "ok" ? -1 : 1) * d.share, // diverging bars
         y: "Country Name",
         fill: "type"
-      }),
+      })),
       Plot.ruleX([0])
     ]
   });

test/plots/moby-dick-faceted.js

@@ -17,7 +17,7 @@ export default async function() {
       y: cases
     },
     marks: [
-      Plot.groupBarY(letters, {x: uppers}),
+      Plot.barY(letters, Plot.groupX({x: uppers})),
       Plot.ruleY([0])
     ]
   });

test/plots/moby-dick-letter-frequency.js

@@ -3,14 +3,13 @@ import * as d3 from "d3";
 
 export default async function() {
   const mobydick = await d3.text("data/moby-dick-chapter-1.txt");
+  const letters = [...mobydick].filter(c => /[a-z]/i.test(c)).map(c => c.toUpperCase());
   return Plot.plot({
     y: {
       grid: true
     },
     marks: [
-      Plot.groupBarY([...mobydick]
-        .filter(c => /[a-z]/i.test(c))
-        .map(c => c.toUpperCase())),
+      Plot.barY(letters, Plot.groupX()),
       Plot.ruleY([0])
     ]
   });

test/plots/moby-dick-letter-position.js

@@ -30,7 +30,7 @@ export default async function() {
       scheme: "blues"
     },
     marks: [
-      Plot.groupCell(positions, {insetTop: 1, insetLeft: 1})
+      Plot.cell(positions, Plot.groupFill({insetTop: 1, insetLeft: 1}))
     ]
   });
 }

test/plots/music-revenue.js

@@ -11,7 +11,7 @@ export default async function() {
       transform: d => d / 1000
     },
     marks: [
-      Plot.stackAreaY(data, {...stack, fill: "group", title: d => `${d.format}\n${d.group}`}),
+      Plot.areaY(data, Plot.stackY({...stack, fill: "group", title: d => `${d.format}\n${d.group}`})),
       Plot.lineY(data, Plot.stackY2({...stack, stroke: "white", strokeWidth: 1})),
       Plot.ruleY([0])
     ]

test/plots/penguin-mass-sex-species.js

@@ -15,7 +15,7 @@ export default async function() {
       marginRight: 70
     },
     marks: [
-      Plot.binRectY(data, {x: "body_mass_g"}),
+      Plot.rectY(data, Plot.binX({x: "body_mass_g"})),
       Plot.ruleY([0])
     ]
   });

test/plots/penguin-mass-sex.js

@@ -14,7 +14,7 @@ export default async function() {
       marginRight: 70
     },
     marks: [
-      Plot.binRectY(data, {x: "body_mass_g"}),
+      Plot.rectY(data, Plot.binX({x: "body_mass_g"})),
       Plot.ruleY([0])
     ]
   });

test/plots/penguin-mass.js

@@ -12,7 +12,7 @@ export default async function() {
       grid: true
     },
     marks: [
-      Plot.binRectY(data, {x: "body_mass_g"}),
+      Plot.rectY(data, Plot.binX({x: "body_mass_g"})),
       Plot.ruleY([0])
     ]
   });

test/plots/police-deaths.js

@@ -20,12 +20,12 @@ export default async function() {
       axis: null
     },
     marks: [
-      Plot.stackAreaY(data, {
+      Plot.areaY(data, Plot.stackY({
         ...stack,
         curve: curveLinkHorizontal,
         fill: "race",
         stroke: "white"
-      }),
+      })),
       Plot.text(
         data.filter(d => d.type === "police"),
         Plot.stackYMid({

test/plots/stacked-bar.js

@@ -6,7 +6,12 @@ export default async function() {
       tickFormat: "%"
     },
     marks: [
-      Plot.stackBarX({length: 20}, {x: (d, i) => i, fill: (d, i) => i, insetLeft: 1, offset: "expand"})
+      Plot.barX({length: 20}, Plot.stackX({
+        x: (d, i) => i,
+        fill: (d, i) => i,
+        insetLeft: 1,
+        offset: "expand"
+      }))
     ]
   });
 }

test/plots/uniform-random-difference.js

@@ -13,7 +13,7 @@ export default async function() {
       grid: true
     },
     marks: [
-      Plot.binRectY({length: 10000}, {x: () => random() - random(), normalize: true}),
+      Plot.rectY({length: 10000}, Plot.binX({x: () => random() - random(), normalize: true})),
       Plot.ruleY([0])
     ]
   });

test/plots/word-length-moby-dick.js

@@ -20,7 +20,7 @@ export default async function() {
       grid: true
     },
     marks: [
-      Plot.groupBarY(words, {x: d => d.length, normalize: true})
+      Plot.barY(words, Plot.groupX({x: d => d.length, normalize: true}))
     ]
   });
 }