in stackY, return y = (y1+y2)/2

Author: Fil

src/marks/stack.js

@@ -20,17 +20,17 @@ export function stackBarY(data, options) {
 }
 
 export function stackLineX(data, {position, ...options}) {
-  const s = stackX(data, options);
-  s[1].x = position === "center" ? s[1].xm
-    : position === "left" ? s[1].x1
-    : s[1].x2;
-  return line(...s);
+  [data, options] = stackY(data, options);
+  options.x = position === "center" ? options.x
+    : position === "bottom" ? options.x1
+    : options.x2;
+  return line(data, options);
 }
 
 export function stackLineY(data, {position, ...options}) {
-  const s = stackY(data, options);
-  s[1].y = position === "center" ? s[1].ym
-    : position === "bottom" ? s[1].y1
-    : s[1].y2;
-  return line(...s);
+  [data, options] = stackY(data, options);
+  options.y = position === "center" ? options.y
+    : position === "bottom" ? options.y1
+    : options.y2;
+  return line(data, options);
 }

src/transforms/stack.js

@@ -2,8 +2,8 @@ import {InternMap, ascending, range} from "d3-array";
 import {valueof} from "../mark";
 
 export function stackX(data, {x, y, z, ...options}) {
-  const [, {x: y_, y1: x1, y2: x2, ym: xm, ...rest}] = stackY(data, {x: y, y: x, z, ...options});
-  return [data, {...rest, x1, x2, xm, y: y_, z}];
+  const [, {x: y_, y1: x1, y2: x2, y: x_, ...rest}] = stackY(data, {x: y, y: x, z, ...options});
+  return [data, {...rest, x1, x2, x: x_, y: y_, z}];
 }
 
 export function stackY(data, {x, y, z, zOrder, offset, ...options}) {
@@ -66,14 +66,13 @@ export function stackY(data, {x, y, z, zOrder, offset, ...options}) {
     return {index: facets === undefined ? I : index, data};
   };
 
-  const ym = Y1.map((y1, i) => (y1 + Y2[i]) / 2);
   return [data, {
     ...options,
     transform,
     x: maybeLabel(X, x),
     y1: maybeLabel(Y1, y),
     y2: Y2,
-    ym,
+    y: (_,i) => (Y1[i] + Y2[i]) / 2,
     z
   }];
 }

test/output/industryUnemploymentSilhouette.svg

@@ -8,10 +8,10 @@ export default async function() {
     "B": "rgba(196,62,29,1)",
     "N": "rgba(34,34,34,1)"
   });
-
+  
   return Plot.plot({
     marks: [
-      Plot.text([{label: "Northbound", x: -2.2}, {label: "Southbound", x: 2.2}], {
+      Plot.text([{label: "Northbound", x: -1.65}, {label: "Southbound", x: 1.65}], {
         x: "x", text: "label", y: () => 3
       }),
       Plot.text(
@@ -20,20 +20,16 @@ export default async function() {
           x: () => 0, y: h => h,
           text: h => `${(h - 1) % 12 + 1}${(h % 24) >= 12 ? "p": "a"}`
         }),
-      Plot.text(data, {
-        x: Plot.stackX(data, {
-          x: d => d.orientation === "N" ? -1 : 1,
-          y: "hours",
-          type: "diverging"
-        })[1].xm.map(d => d + 0.55 * Math.sign(d)),
+      Plot.text(...Plot.stackX(data, {
+        x: d => d.orientation === "N" ? -1 : 1,
         y: "hours",
         text: "minutes",
         fill: "type"
-      }),
-      Plot.ruleX([-.55, .55], { strokeWidth: 0.5, stroke: "#666" })
+      })),
+      Plot.ruleX([-.001, .001], { strokeWidth: 0.5, stroke: "#666" })
     ],
     style: { fontSize: "12px" },
-    x: { axis: null, domain: [-7, 7] },
+    x: { axis: null, domain: [-7, 7], transform: d => d + 0.55 * Math.sign(d) },
     width: 340,
     y: { domain: Array.from({length: 23}, (_,i) => i + 3), axis: null },
     height: 400,

test/output/policeDeaths.svg

@@ -34,11 +34,20 @@ export default async function() {
         z: "race", zOrder
       }),
 
+      // dashed lines
+      Plot.stackLineY(data.flatMap(d => d.type === "police" ? [{...d, type:"-"}, d] : [d, {...d, type:"+"}]), {
+        x: "type", y: "value",
+        z: "race", zOrder,
+        stroke: "black", curve: "monotone-x", strokeWidth: 0.5,
+        position: "center",
+        strokeDasharray: [5, 5]
+      }),
+      
       // top black lines
       Plot.stackLineY(data.flatMap(d => d.type === "police" ? [{...d, type:"---"}, d] : [d, {...d, type:"+++"}]), {
         x: "type", y: "value",
         z: "race", zOrder,
-        stroke:"black", curve: "monotone-x", strokeWidth: 2
+        stroke: "black", curve: "monotone-x", strokeWidth: 2
       }),
 
       // bottom black line
@@ -49,10 +58,16 @@ export default async function() {
       }),
 
       // text
-      Plot.text(data.map(d => ({...d, type: d.type === "police" ? "--" : "++"})), {
-        x: "type", y: Plot.stackY(data, {x: "type", y: "value", z: "race", zOrder})[1].ym,
-        text: d => `${d.race} ${d.value}%`
-      })
+      Plot.text(...Plot.stackY(
+        data.map(d => ({...d, type: d.type === "police" ? "--" : "++"})),
+        {
+          x: "type",
+          y: "value",
+          z: "race",
+          zOrder,
+          text: d => `${d.race} ${d.value}%`
+        }
+      ))
 
     ],
     marginBottom: 12