arealine mark

src/index.d.ts

@@ -10,6 +10,7 @@ export * from "./legends.js";
 export * from "./mark.js";
 export * from "./marker.js";
 export * from "./marks/area.js";
+export * from "./marks/areaLine.js";
 export * from "./marks/arrow.js";
 export * from "./marks/auto.js";
 export * from "./marks/axis.js";

src/index.js

@@ -9,6 +9,7 @@ Mark.prototype.plot = function ({marks = [], ...options} = {}) {
 export {plot} from "./plot.js";
 export {Mark, marks} from "./mark.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
+export {AreaLine, areaLineX, areaLineY} from "./marks/areaLine.js";
 export {Arrow, arrow} from "./marks/arrow.js";
 export {auto, autoSpec} from "./marks/auto.js";
 export {axisX, axisY, axisFx, axisFy, gridX, gridY, gridFx, gridFy} from "./marks/axis.js";

src/mark.d.ts

@@ -473,6 +473,11 @@ export interface MarkOptions {
   channels?: Record<string, Channel | ChannelValue>;
 }
 
+export interface ColorOptions {
+  /** Shorthand for setting both the fill and the stroke. */
+  color?: ChannelValueSpec;
+}
+
 /** The abstract base class for Mark implementations. */
 export class Mark {
   /**

src/marks/area.js

@@ -8,7 +8,7 @@ import {groupIndex} from "../style.js";
 import {maybeDenseIntervalX, maybeDenseIntervalY} from "../transforms/bin.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
-const defaults = {
+const areaDefaults = {
   ariaLabel: "area",
   strokeWidth: 1,
   strokeLinecap: "round",
@@ -17,7 +17,7 @@ const defaults = {
 };
 
 export class Area extends Mark {
-  constructor(data, options = {}) {
+  constructor(data, options = {}, defaults = areaDefaults) {
     const {x1, y1, x2, y2, z, curve, tension} = options;
     super(
       data,

src/marks/areaLine.d.ts

@@ -0,0 +1,40 @@
+import type {ColorOptions, Data} from "../mark.js";
+import {MarkerOptions} from "../marker.js";
+import {Area, AreaXOptions, AreaYOptions} from "./area.js";
+
+/** Options for the areaLineX mark. */
+export interface AreaLineXOptions extends AreaXOptions, ColorOptions, MarkerOptions {}
+
+/** Options for the areaLineY mark. */
+export interface AreaLineYOptions extends AreaYOptions, ColorOptions, MarkerOptions {}
+
+/**
+ * Returns a new vertically-oriented arealine mark for the given *data* and
+ * *options*, where the baseline and topline share **y** values, as in a
+ * time-series area chart where time goes up↑. For example, to plot Apple’s
+ * daily stock price:
+ *
+ * ```js
+ * Plot.areaLineX(aapl, {y: "Date", x: "Close"})
+ * ```
+ *
+ * See Plot.areaX for more details.
+ */
+export function areaLineX(data?: Data, options?: AreaLineXOptions): AreaLine;
+
+/**
+ * Returns a new horizontally-oriented arealine mark for the given *data* and
+ * *options*, where the baseline and topline share **x** values, as in a
+ * time-series area chart where time goes right→. For example, to plot Apple’s
+ * daily stock price:
+ *
+ * ```js
+ * Plot.areaLineY(aapl, {x: "Date", y: "Close"})
+ * ```
+ *
+ * See Plot.areaLineY for more details.
+ */
+export function areaLineY(data?: Data, options?: AreaLineYOptions): AreaLine;
+
+/** The arealine mark. */
+export class AreaLine extends Area {}

src/marks/areaLine.js

@@ -0,0 +1,80 @@
+import {area as shapeArea, line as shapeLine} from "d3";
+import {Area} from "./area.js";
+import {create} from "../context.js";
+import {applyGroupedMarkers, markers} from "../marker.js";
+import {applyDirectStyles, applyIndirectStyles, applyTransform, applyGroupedChannelStyles} from "../style.js";
+import {groupIndex} from "../style.js";
+import {maybeDenseIntervalX, maybeDenseIntervalY} from "../transforms/bin.js";
+import {maybeStackX, maybeStackY} from "../transforms/stack.js";
+
+const defaults = {
+  ariaLabel: "area-line",
+  fillOpacity: 0.1,
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeMiterlimit: 1
+};
+
+export class AreaLine extends Area {
+  constructor(data, options = {}) {
+    super(data, options, defaults);
+    markers(this, options);
+  }
+  render(index, scales, channels, dimensions, context) {
+    const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
+    return create("svg:g", context)
+      .call(applyIndirectStyles, this, dimensions, context)
+      .call(applyTransform, this, scales, 0, 0)
+      .call((g) =>
+        g
+          .selectAll()
+          .data(groupIndex(index, [X1, Y1, X2, Y2], this, channels))
+          .enter()
+          .append("g")
+          .call(applyDirectStyles, this)
+          .call(applyGroupedChannelStyles, this, channels)
+          .call((e) =>
+            e
+              .append("path")
+              .attr("stroke", "none")
+              .attr(
+                "d",
+                shapeArea()
+                  .curve(this.curve)
+                  .defined((i) => i >= 0)
+                  .x0((i) => X1[i])
+                  .y0((i) => Y1[i])
+                  .x1((i) => X2[i])
+                  .y1((i) => Y2[i])
+              )
+          )
+          .call((e) =>
+            e
+              .append("path")
+              .call(applyGroupedMarkers, this, channels, context)
+              .attr("fill", "none")
+              .attr(
+                "d",
+                shapeLine()
+                  .curve(this.curve)
+                  .defined((i) => i >= 0)
+                  .x((i) => X2[i])
+                  .y((i) => Y2[i])
+              )
+          )
+      )
+      .node();
+  }
+}
+
+export function areaLineX(data, options) {
+  const {x, y, color, stroke = color, fill = color, z = x === fill || x === stroke ? null : undefined, ...rest} = maybeDenseIntervalY(options); // prettier-ignore
+  return new AreaLine(data, maybeStackX({...rest, x, y1: y, y2: undefined, z, fill, stroke}));
+}
+
+export function areaLineY(data, options) {
+  const {x, y, color, stroke = color, fill = color, z = y === fill || y === stroke ? null : undefined, ...rest} = maybeDenseIntervalX(options); // prettier-ignore
+  return new AreaLine(data, maybeStackY({...rest, x1: x, x2: undefined, y, z, fill, stroke}));
+}

test/plots/aapl-close.ts

@@ -7,8 +7,7 @@ test(async function aaplClose() {
   return Plot.plot({
     y: {grid: true},
     marks: [
-      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
-      Plot.lineY(aapl, {x: "Date", y: "Close"}),
+      Plot.areaLineY(aapl, {x: "Date", y: "Close"}),
       Plot.ruleY([0])
     ]
   });