Salebarn
diff --git a/‎src/index.js‎
Lines changed: 1 addition & 0 deletions b/‎src/index.js‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/marks/facet.js‎
Lines changed: 50 additions & 0 deletions b/‎src/marks/facet.js‎
Lines changed: 50 additions & 0 deletions
diff --git a/‎src/plot.js‎
Lines changed: 3 additions & 3 deletions b/‎src/plot.js‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎src/scales.js‎
Lines changed: 3 additions & 1 deletion b/‎src/scales.js‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎test/facet.html‎
Lines changed: 19 additions & 16 deletions b/‎test/facet.html‎
Lines changed: 19 additions & 16 deletions
@@ -4,6 +4,7 @@ export {AreaX, AreaY} from "./marks/area.js";
 export {AxisX, AxisY} from "./marks/axis.js";
 export {BarX, BarY} from "./marks/bar.js";
 export {DotXY} from "./marks/dot.js";
+export {FacetY} from "./marks/facet.js";
 export {LineX, LineY} from "./marks/line.js";
 export {RectX, RectY, RectXY} from "./marks/rect.js";
 export {RuleX, RuleY} from "./marks/rule.js";
@@ -0,0 +1,50 @@
+import {group} from "d3-array";
+import {create} from "d3-selection";
+import {Mark, indexOf} from "../mark.js";
+import {Channels} from "../plot.js";
+import {Scales, autoScaleRange} from "../scales.js";
+
+export class FacetY extends Mark {
+  constructor(
+    data,
+    {
+      x,
+      y
+    } = {},
+    options = {}
+  ) {
+    super(
+      data,
+      {
+        x: {value: x, scale: "x"},
+        y: {value: y, scale: "y", type: "band"}
+      }
+    );
+    this.options = options;
+  }
+  render(I, {y: {scale: y}, ...scales}, dimensions) {
+    const {data, options, channels: {y: {value: Y}}} = this;
+    const {marks: submarks = []} = options;
+    const subchannels = Channels(submarks);
+    const subscales = {...Scales(subchannels, options.scales), ...scales};
+    const subdimensions = {...dimensions, marginTop: 0, marginBottom: 0, height: y.bandwidth()};
+
+    autoScaleRange(subscales, subdimensions);
+
+    return create("svg:g")
+        .call(g => g.selectAll()
+          .data(group(I, i => Y[i]))
+          .join("g")
+            .attr("transform", ([key]) => `translate(0,${y(key)})`)
+            .each(function([, I]) {
+              for (const mark of submarks) {
+                const index = mark.data === data ? I
+                  : mark.data === undefined ? undefined
+                  : Array.from(mark.data, indexOf);
+                const node = mark.render(index, subscales, subdimensions);
+                if (node != null) this.appendChild(node);
+              }
+            }))
+      .node();
+  }
+}
@@ -28,13 +28,13 @@ export function plot(options = {}) {
   for (const mark of marks) {
     const index = mark.data === undefined ? undefined : Array.from(mark.data, indexOf);
     const node = mark.render(index, scales, dimensions);
-    if (node !== null) svg.append(() => node);
+    if (node != null) svg.append(() => node);
   }
 
   return svg.node();
 }
 
-function Dimensions({y}, {x: xAxis, y: yAxis}, {
+export function Dimensions({y}, {x: xAxis, y: yAxis}, {
   width = 640,
   height = y ? 396 : 60,
   marginTop = !yAxis ? 0 : xAxis && xAxis.anchor === "top" ? 30 : 20,
@@ -45,7 +45,7 @@ function Dimensions({y}, {x: xAxis, y: yAxis}, {
   return {width, height, marginTop, marginRight, marginBottom, marginLeft};
 }
 
-function Channels(marks) {
+export function Channels(marks) {
   return group(
     marks.flatMap(m => Object.values(m.channels).filter(({scale}) => scale)),
     ({scale}) => scale
 
@@ -17,7 +17,9 @@ export function autoScaleRange(scales, dimensions) {
   }
   if (scales.y && scales.y.range === undefined) {
     const {height, marginTop, marginBottom} = dimensions;
-    scales.y.scale.range([height - marginBottom, marginTop]);
+    const range = [height - marginBottom, marginTop];
+    if (scales.y.type === "ordinal") range.reverse();
+    scales.y.scale.range(range);
   }
 }
 
 
@@ -7,23 +7,26 @@
 
 d3.csv("data/bls-metro-unemployment.csv", d3.autoType).then(data => {
   document.body.appendChild(Plot.plot({
-    scales: {
-      x: {
-        type: "utc",
-        domain: d3.extent(data, d => d.date)
-      },
-      y: {
-        type: "band",
-        domain: data.map(d => d.division)
-      }
-    },
     marks: [
-      // new Plot.RuleY({y: [0]}),
-      // new Plot.LineY({
-      //   x: "date",
-      //   y: "unemployment",
-      //   z: "division" // TODO y-facet
-      // })
+      new Plot.FacetY(
+        data,
+        {
+          x: "date",
+          y: "division"
+        },
+        {
+          scales: {
+            y: {
+              range: [20, -40]
+            }
+          },
+          marks: [
+            new Plot.RuleY([0]),
+            new Plot.AreaY(data, {x: "date", y: "unemployment"}, {fill: "#eee"}),
+            new Plot.LineY(data, {x: "date", y: "unemployment"})
+          ]
+        }
+      )
     ],
     width: 960,
     height: 1080,
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,9 @@ export function autoScaleRange(scales, dimensions) {`
`17`	`17`	`}`
`18`	`18`	`if (scales.y && scales.y.range === undefined) {`
`19`	`19`	`const {height, marginTop, marginBottom} = dimensions;`
`20`		`- scales.y.scale.range([height - marginBottom, marginTop]);`
	`20`	`+ const range = [height - marginBottom, marginTop];`
	`21`	`+ if (scales.y.type === "ordinal") range.reverse();`
	`22`	`+ scales.y.scale.range(range);`
`21`	`23`	`}`
`22`	`24`	`}`
`23`	`25`