tick marker (#1892)

* tick marker

* tick marker documentation

Author: mbostock

docs/features/markers.md

@@ -23,6 +23,9 @@ A **marker** defines a graphic drawn on vertices of a [line](../marks/line.md) o
       <option>dot</option>
       <option>circle</option>
       <option>circle-stroke</option>
+      <option>tick</option>
+      <option>tick-x</option>
+      <option>tick-y</option>
     </select>
   </label>
 </p>
@@ -53,6 +56,9 @@ The following named markers are supported:
 * *dot* - a filled *circle* without a stroke and 2.5px radius
 * *circle*, equivalent to *circle-fill* - a filled circle with a white stroke and 3px radius
 * *circle-stroke* - a hollow circle with a colored stroke and a white fill and 3px radius
+* *tick* - a small opposing line
+* *tick-x* - a small horizontal line
+* *tick-y* - a small vertical line
 
 If **marker** is true, it defaults to *circle*. If **marker** is a function, it will be called with a given *color* and must return an [SVG marker element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker).
 

docs/marks/rule.md

@@ -120,16 +120,31 @@ Plot.plot({
 ```
 :::
 
-Rules can also be a stylistic choice, as in the lollipop 🍭 chart below, serving the role of a skinny [bar](./bar.md) topped with a [dot](./dot.md).
+Rules can indicate uncertainty or error by setting the [**marker** option](../features/markers.md) to *tick*; this draws a small perpendicular line at the start and end of the rule. For example, to simulate ±10% error:
+
+:::plot
+```js
+Plot.plot({
+  x: {label: null},
+  y: {percent: true},
+  marks: [
+    Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "blue"}),
+    Plot.ruleX(alphabet, {x: "letter", y1: (d) => d.frequency * 0.9, y2: (d) => d.frequency * 1.1, marker: "tick"}),
+    Plot.ruleY([0])
+  ]
+})
+```
+:::
+
+Rules can also be a stylistic choice, as in the lollipop 🍭 chart below, serving the role of a skinny [bar](./bar.md) topped with a [*dot* marker](../features/markers.md).
 
 :::plot https://observablehq.com/@observablehq/plot-lollipop
 ```js
 Plot.plot({
   x: {label: null, tickPadding: 6, tickSize: 0},
   y: {percent: true},
   marks: [
-    Plot.ruleX(alphabet, {x: "letter", y: "frequency", strokeWidth: 2}),
-    Plot.dot(alphabet, {x: "letter", y: "frequency", fill: "currentColor", r: 4})
+    Plot.ruleX(alphabet, {x: "letter", y: "frequency", strokeWidth: 2, markerEnd: "dot"})
   ]
 })
 ```

src/marker.d.ts

@@ -7,8 +7,20 @@
  * - *circle-fill* - a filled circle with a white stroke and 3px radius
  * - *circle-stroke* - a stroked circle with a white fill and 3px radius
  * - *circle* - alias for *circle-fill*
+ * - *tick* - a small opposing line
+ * - *tick-x* - a small horizontal line
+ * - *tick-y* - a small vertical line
  */
-export type MarkerName = "arrow" | "arrow-reverse" | "dot" | "circle" | "circle-fill" | "circle-stroke";
+export type MarkerName =
+  | "arrow"
+  | "arrow-reverse"
+  | "dot"
+  | "circle"
+  | "circle-fill"
+  | "circle-stroke"
+  | "tick"
+  | "tick-x"
+  | "tick-y";
 
 /** A custom marker implementation. */
 export type MarkerFunction = (color: string, context: {document: Document}) => SVGMarkerElement;

src/marker.js

@@ -24,6 +24,12 @@ function maybeMarker(marker) {
       return markerCircleFill;
     case "circle-stroke":
       return markerCircleStroke;
+    case "tick":
+      return markerTick("auto");
+    case "tick-x":
+      return markerTick(90);
+    case "tick-y":
+      return markerTick(0);
   }
   throw new Error(`invalid marker: ${marker}`);
 }
@@ -79,6 +85,18 @@ function markerCircleStroke(color, context) {
     .node();
 }
 
+function markerTick(orient) {
+  return (color, context) =>
+    create("svg:marker", context)
+      .attr("viewBox", "-3 -3 6 6")
+      .attr("markerWidth", 6)
+      .attr("markerHeight", 6)
+      .attr("orient", orient)
+      .attr("stroke", color)
+      .call((marker) => marker.append("path").attr("d", "M0,-3v6"))
+      .node();
+}
+
 let nextMarkerId = 0;
 
 export function applyMarkers(path, mark, {stroke: S}, context) {