Merge branch 'main' into fil/strokewidth-channel

Author: Fil

README.md

@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/plot",
   "description": "A JavaScript library for exploratory data visualization.",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"
@@ -50,8 +50,5 @@
   "dependencies": {
     "d3": "^6.7.0",
     "isoformat": "^0.1.0"
-  },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
   }
 }

img/bin.png

@@ -1,5 +1,6 @@
 import {color} from "d3";
 import {ascendingDefined, nonempty} from "./defined.js";
+import {plot} from "./plot.js";
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
 const TypedArray = Object.getPrototypeOf(Uint8Array);
@@ -9,7 +10,8 @@ export class Mark {
   constructor(data, channels = [], options = {}) {
     const names = new Set();
     this.data = data;
-    this.transform = maybeTransform(options);
+    const {transform} = maybeTransform(options);
+    this.transform = transform;
     this.channels = channels.filter(channel => {
       const {name, value, optional} = channel;
       if (value == null) {
@@ -45,6 +47,9 @@ export class Mark {
       })
     };
   }
+  plot({marks = [], ...options} = {}) {
+    return plot({...options, marks: [...marks, this]});
+  }
 }
 
 // TODO Type coercion?
@@ -62,6 +67,7 @@ export function valueof(data, value, type) {
   const array = type === undefined ? Array : type;
   return typeof value === "string" ? array.from(data, field(value))
     : typeof value === "function" ? array.from(data, value)
+    : typeof value === "number" || value instanceof Date ? array.from(data, constant(value))
     : value && typeof value.transform === "function" ? arrayify(value.transform(data), type)
     : arrayify(value, type); // preserve undefined type
 }
@@ -136,11 +142,11 @@ export function arrayify(data, type) {
 // For marks specified either as [0, x] or [x1, x2], such as areas and bars.
 export function maybeZero(x, x1, x2, x3 = identity) {
   if (x1 === undefined && x2 === undefined) { // {x} or {}
-    x1 = zero, x2 = x === undefined ? x3 : x;
+    x1 = 0, x2 = x === undefined ? x3 : x;
   } else if (x1 === undefined) { // {x, x2} or {x2}
-    x1 = x === undefined ? zero : x;
+    x1 = x === undefined ? 0 : x;
   } else if (x2 === undefined) { // {x, x1} or {x1}
-    x2 = x === undefined ? zero : x;
+    x2 = x === undefined ? 0 : x;
   }
   return [x1, x2];
 }
@@ -220,13 +226,19 @@ export function maybeLazyChannel(source) {
 
 // If both t1 and t2 are defined, returns a composite transform that first
 // applies t1 and then applies t2.
-export function maybeTransform({filter: f1, sort: s1, reverse: r1, transform: t1} = {}, t2) {
+export function maybeTransform({
+  filter: f1,
+  sort: s1,
+  reverse: r1,
+  transform: t1,
+  ...options
+} = {}, t2) {
   if (t1 === undefined) {
     if (f1 != null) t1 = filter(f1);
     if (s1 != null) t1 = compose(t1, sort(s1));
     if (r1) t1 = compose(t1, reverse);
   }
-  return compose(t1, t2);
+  return {...options, transform: compose(t1, t2)};
 }
 
 // Assuming that both x1 and x2 and lazy channels (per above), this derives a

img/frame.png

@@ -3,8 +3,9 @@ import {create} from "d3";
 import {area as shapeArea} from "d3";
 import {Curve} from "../curve.js";
 import {defined} from "../defined.js";
-import {Mark, indexOf, maybeColor, maybeZero, titleGroup, maybeNumber} from "../mark.js";
+import {Mark, indexOf, maybeColor, titleGroup, maybeNumber} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 export class Area extends Mark {
   constructor(
@@ -85,12 +86,10 @@ export function area(data, options) {
   return new Area(data, options);
 }
 
-export function areaX(data, {x, x1, x2, y = indexOf, ...options} = {}) {
-  ([x1, x2] = maybeZero(x, x1, x2));
-  return new Area(data, {...options, x1, x2, y1: y, y2: undefined});
+export function areaX(data, {y = indexOf, ...options} = {}) {
+  return new Area(data, maybeStackX({...options, y1: y, y2: undefined}));
 }
 
-export function areaY(data, {x = indexOf, y, y1, y2, ...options} = {}) {
-  ([y1, y2] = maybeZero(y, y1, y2));
-  return new Area(data, {...options, x1: x, x2: undefined, y1, y2});
+export function areaY(data, {x = indexOf, ...options} = {}) {
+  return new Area(data, maybeStackY({...options, x1: x, x2: undefined}));
 }

img/group.png

@@ -1,15 +1,14 @@
-import {ascending} from "d3";
 import {create} from "d3";
 import {filter} from "../defined.js";
-import {Mark, number, maybeColor, maybeZero, title, maybeNumber} from "../mark.js";
+import {Mark, number, maybeColor, title, maybeNumber} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr} from "../style.js";
+import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 export class AbstractBar extends Mark {
   constructor(
     data,
     channels,
     {
-      z,
       title,
       fill,
       fillOpacity,
@@ -33,7 +32,6 @@ export class AbstractBar extends Mark {
       data,
       [
         ...channels,
-        {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
         {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
@@ -58,9 +56,8 @@ export class AbstractBar extends Mark {
   }
   render(I, scales, channels, dimensions) {
     const {rx, ry} = this;
-    const {z: Z, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO} = channels;
+    const {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO} = channels;
     const index = filter(I, ...this._positions(channels), F, FO, S, SO);
-    if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(this._transform, scales)
@@ -157,12 +154,10 @@ export class BarY extends AbstractBar {
   }
 }
 
-export function barX(data, {x, x1, x2, ...options} = {}) {
-  ([x1, x2] = maybeZero(x, x1, x2));
-  return new BarX(data, {...options, x1, x2});
+export function barX(data, options) {
+  return new BarX(data, maybeStackX(options));
 }
 
-export function barY(data, {y, y1, y2, ...options} = {}) {
-  ([y1, y2] = maybeZero(y, y1, y2));
-  return new BarY(data, {...options, y1, y2});
+export function barY(data, options) {
+  return new BarY(data, maybeStackY(options));
 }

img/select.png

@@ -1,4 +1,4 @@
-import {identity, maybeTuple} from "../mark.js";
+import {identity, indexOf, maybeColor, maybeTuple} from "../mark.js";
 import {AbstractBar} from "./bar.js";
 
 export class Cell extends AbstractBar {
@@ -25,10 +25,12 @@ export function cell(data, {x, y, ...options} = {}) {
   return new Cell(data, {...options, x, y});
 }
 
-export function cellX(data, {x = identity, ...options} = {}) {
-  return new Cell(data, {...options, x});
+export function cellX(data, {x = indexOf, fill, stroke, ...options} = {}) {
+  if (fill === undefined && maybeColor(stroke)[0] === undefined) fill = identity;
+  return new Cell(data, {...options, x, fill, stroke});
 }
 
-export function cellY(data, {y = identity, ...options} = {}) {
-  return new Cell(data, {...options, y});
+export function cellY(data, {y = indexOf, fill, stroke, ...options} = {}) {
+  if (fill === undefined && maybeColor(stroke)[0] === undefined) fill = identity;
+  return new Cell(data, {...options, y, fill, stroke});
 }

img/stack.png

@@ -1,4 +1,3 @@
-import {ascending} from "d3";
 import {create} from "d3";
 import {filter, positive} from "../defined.js";
 import {Mark, identity, maybeColor, maybeNumber, maybeTuple, title} from "../mark.js";
@@ -10,7 +9,6 @@ export class Dot extends Mark {
     {
       x,
       y,
-      z,
       r,
       title,
       fill,
@@ -30,7 +28,6 @@ export class Dot extends Mark {
       [
         {name: "x", value: x, scale: "x", optional: true},
         {name: "y", value: y, scale: "y", optional: true},
-        {name: "z", value: z, optional: true},
         {name: "r", value: vr, scale: "r", optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
@@ -53,12 +50,11 @@ export class Dot extends Mark {
   render(
     I,
     {x, y},
-    {x: X, y: Y, z: Z, r: R, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO},
+    {x: X, y: Y, r: R, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO},
     {width, height, marginTop, marginRight, marginBottom, marginLeft}
   ) {
     let index = filter(I, X, Y, F, FO, S, SO);
     if (R) index = index.filter(i => positive(R[i]));
-    if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, 0.5, 0.5)

img/window.png

@@ -1,7 +1,7 @@
-import {ascending} from "d3";
-import {create} from "d3";
+import {create, path} from "d3";
 import {filter} from "../defined.js";
 import {Mark, maybeColor, maybeNumber, title} from "../mark.js";
+import {Curve} from "../curve.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
 
 export class Link extends Mark {
@@ -12,14 +12,18 @@ export class Link extends Mark {
       y1,
       x2,
       y2,
-      z,
       title,
+      fill,
+      fillOpacity,
       stroke,
       strokeOpacity,
       strokeWidth,
+      curve,
       ...options
     } = {}
   ) {
+    const [vfill, cfill] = maybeColor(fill, "none");
+    const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
     const [vstroke, cstroke] = maybeColor(stroke, "currentColor");
     const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
     const [vstrokeWidth, cstrokeWidth] = maybeNumber(strokeWidth, 1);
@@ -30,16 +34,21 @@ export class Link extends Mark {
         {name: "y1", value: y1, scale: "y"},
         {name: "x2", value: x2, scale: "x"},
         {name: "y2", value: y2, scale: "y"},
-        {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
+        {name: "fill", value: vfill, scale: "color", optional: true},
+        {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
         {name: "stroke", value: vstroke, scale: "color", optional: true},
         {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true},
         {name: "strokeWidth", value: vstrokeWidth, optional: true}
       ],
       options
     );
+    this.curve = Curve(curve);
     Style(this, {
+      fill: cfill,
+      fillOpacity: cfillOpacity,
       stroke: cstroke,
+      strokeMiterlimit: cstroke === "none" ? undefined : 1,
       strokeOpacity: cstrokeOpacity,
       strokeWidth: cstrokeWidth,
       ...options
@@ -49,20 +58,25 @@ export class Link extends Mark {
     I,
     {x, y},
     {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, stroke: S, strokeOpacity: SO, strokeWidth: SW}
+    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, stroke: S, strokeOpacity: SO}
   ) {
     const index = filter(I, X1, Y1, X2, Y2, S, SO);
-    if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, 0.5, 0.5)
         .call(g => g.selectAll()
           .data(index)
-          .join("line")
+          .join("path")
             .call(applyDirectStyles, this)
-            .attr("x1", i => X1[i])
-            .attr("y1", i => Y1[i])
-            .attr("x2", i => X2[i])
-            .attr("y2", i => Y2[i])
+            .attr("d", i => {
+              const p = path();
+              const c = this.curve(p);
+              c.lineStart();
+              c.point(X1[i], Y1[i]);
+              c.point(X2[i], Y2[i]);
+              c.lineEnd();
+              return p + "";
+            })
             .call(applyAttr, "stroke", S && (i => S[i]))
             .call(applyAttr, "stroke-opacity", SO && (i => SO[i]))
             .call(applyAttr, "stroke-width", SW && (i => SW[i]))

package.json

@@ -1,8 +1,8 @@
-import {ascending} from "d3";
 import {create} from "d3";
 import {filter} from "../defined.js";
-import {Mark, number, maybeColor, maybeZero, title, maybeNumber} from "../mark.js";
+import {Mark, number, maybeColor, title, maybeNumber} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr} from "../style.js";
+import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 export class Rect extends Mark {
   constructor(
@@ -12,7 +12,6 @@ export class Rect extends Mark {
       y1,
       x2,
       y2,
-      z,
       title,
       fill,
       fillOpacity,
@@ -39,7 +38,6 @@ export class Rect extends Mark {
         {name: "y1", value: y1, scale: "y"},
         {name: "x2", value: x2, scale: "x"},
         {name: "y2", value: y2, scale: "y"},
-        {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
         {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
@@ -65,11 +63,10 @@ export class Rect extends Mark {
   render(
     I,
     {x, y},
-    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}
+    {x1: X1, y1: Y1, x2: X2, y2: Y2, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}
   ) {
     const {rx, ry} = this;
     const index = filter(I, X1, Y2, X2, Y2, F, FO, S, SO);
-    if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y)
@@ -96,12 +93,10 @@ export function rect(data, options) {
   return new Rect(data, options);
 }
 
-export function rectX(data, {x, x1, x2, y1, y2, ...options} = {}) {
-  ([x1, x2] = maybeZero(x, x1, x2));
-  return new Rect(data, {...options, x1, x2, y1, y2});
+export function rectX(data, options) {
+  return new Rect(data, maybeStackX(options));
 }
 
-export function rectY(data, {x1, x2, y, y1, y2, ...options} = {}) {
-  ([y1, y2] = maybeZero(y, y1, y2));
-  return new Rect(data, {...options, x1, x2, y1, y2});
+export function rectY(data, options) {
+  return new Rect(data, maybeStackY(options));
 }