one-dimensional vectors (#782)

* one-dimensional vectors

* documentation and (slightly contrived) test plot for vectorX/Y (#783)

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

README.md

@@ -1227,6 +1227,14 @@ Plot.vector(wind, {x: "longitude", y: "latitude", length: "speed", rotate: "dire
 
 Returns a new vector with the given *data* and *options*. If neither the **x** nor **y** options are specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** = [*y₀*, *y₁*, *y₂*, …].
 
+#### Plot.vectorX(*data*, *options*)
+
+Equivalent to Plot.vector except that if the **x** option is not specified, it defaults to the identity function and assumes that *data* = [*x₀*, *x₁*, *x₂*, …].
+
+#### Plot.vectorY(*data*, *options*)
+
+Equivalent to Plot.vector except that if the **y** option is not specified, it defaults to the identity function and assumes that *data* = [*y₀*, *y₁*, *y₂*, …].
+
 ## Decorations
 
 Decorations are static marks that do not represent data. Currently this includes only [Plot.frame](#frame), although internally Plot’s axes are implemented as decorations and may in the future be exposed here for more flexible configuration.

src/index.js

@@ -13,7 +13,7 @@ export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
-export {Vector, vector} from "./marks/vector.js";
+export {Vector, vector, vectorX, vectorY} from "./marks/vector.js";
 export {valueof} from "./options.js";
 export {filter, reverse, sort, shuffle} from "./transforms/basic.js";
 export {bin, binX, binY} from "./transforms/bin.js";

src/marks/vector.js

@@ -1,6 +1,6 @@
 import {create} from "d3";
 import {radians} from "../math.js";
-import {maybeFrameAnchor, maybeNumberChannel, maybeTuple, keyword} from "../options.js";
+import {maybeFrameAnchor, maybeNumberChannel, maybeTuple, keyword, identity} from "../options.js";
 import {Mark} from "../plot.js";
 import {applyChannelStyles, applyDirectStyles, applyFrameAnchor, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
@@ -65,3 +65,11 @@ export function vector(data, {x, y, ...options} = {}) {
   if (options.frameAnchor === undefined) ([x, y] = maybeTuple(x, y));
   return new Vector(data, {...options, x, y});
 }
+
+export function vectorX(data, {x = identity, ...options} = {}) {
+  return new Vector(data, {...options, x});
+}
+
+export function vectorY(data, {y = identity, ...options} = {}) {
+  return new Vector(data, {...options, y});
+}

test/output/caltrainDirection.svg

@@ -0,0 +1,27 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const caltrain = await d3.csv("data/caltrain.csv");
+  return Plot.plot({
+    x: {
+      tickFormat: "%I %p"
+    },
+    color: {
+      domain: "NLB",
+      range: ["currentColor", "peru", "brown"]
+    },
+    facet: {
+      data: caltrain,
+      label: null,
+      y: "type"
+    },
+    marks: [
+      Plot.vectorX(caltrain, {
+        x: d => new Date(Date.UTC(2000, 0, 1, d.hours, d.minutes)),
+        stroke: "type",
+        rotate: d => d.orientation === "N" ? 0 : 180
+      })
+    ]
+  });
+}

test/plots/caltrain-direction.js

@@ -25,6 +25,7 @@ export {default as ballotStatusRace} from "./ballot-status-race.js";
 export {default as beckerBarley} from "./becker-barley.js";
 export {default as boxplot} from "./boxplot.js";
 export {default as caltrain} from "./caltrain.js";
+export {default as caltrainDirection} from "./caltrain-direction.js";
 export {default as carsMpg} from "./cars-mpg.js";
 export {default as carsParcoords} from "./cars-parcoords.js";
 export {default as clamp} from "./clamp.js";