line & area sort by z

observablehq · Mar 9, 2021 · 54e79fc · 54e79fc
1 parent 0edb9b7
commit 54e79fc
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 138 deletions.
diff --git a/src/group.js b/src/group.js
diff --git a/src/marks/area.js b/src/marks/area.js
@@ -1,9 +1,9 @@
+import {group, sort} from "d3-array";
 import {create} from "d3-selection";
 import {area as shapeArea} from "d3-shape";
 import {Curve} from "../curve.js";
 import {defined} from "../defined.js";
-import {group} from "../group.js";
-import {Mark, indexOf, maybeColor, maybeZero, maybeSort, titleGroup} from "../mark.js";
+import {Mark, indexOf, maybeColor, maybeZero, maybeSort, first, second, titleGroup} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 
 export class Area extends Mark {
@@ -56,7 +56,7 @@ export class Area extends Mark {
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y)
         .call(g => g.selectAll()
-          .data(Z ? group(I, Z) : [I])
+          .data(Z ? sort(group(I, i => Z[i]), first).map(second) : [I])
           .join("path")
             .call(applyDirectStyles, this)
             .attr("fill", F && (([i]) => color(F[i])))

diff --git a/src/marks/line.js b/src/marks/line.js
@@ -1,8 +1,8 @@
+import {group, sort} from "d3-array";
 import {create} from "d3-selection";
 import {line as shapeLine} from "d3-shape";
 import {Curve} from "../curve.js";
 import {defined} from "../defined.js";
-import {group} from "../group.js";
 import {Mark, indexOf, identity, first, second, maybeColor, maybeSort, titleGroup} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 
@@ -53,7 +53,7 @@ export class Line extends Mark {
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, 0.5, 0.5)
         .call(g => g.selectAll()
-          .data(Z ? group(I, Z) : [I])
+          .data(Z ? sort(group(I, i => Z[i]), first).map(second) : [I])
           .join("path")
             .call(applyDirectStyles, this)
             .attr("fill", F && (([i]) => color(F[i])))

diff --git a/test/output/carsParcoords.svg b/test/output/carsParcoords.svg
diff --git a/test/output/industryUnemployment.svg b/test/output/industryUnemployment.svg
diff --git a/test/output/industryUnemploymentShare.svg b/test/output/industryUnemploymentShare.svg
diff --git a/test/output/industryUnemploymentStream.svg b/test/output/industryUnemploymentStream.svg
diff --git a/test/output/metroUnemploymentHighlight.svg b/test/output/metroUnemploymentHighlight.svg
diff --git a/test/output/policeDeaths.svg b/test/output/policeDeaths.svg
diff --git a/test/plots/index.js b/test/plots/index.js
@@ -28,6 +28,7 @@ export {default as letterFrequencyLollipop} from "./letter-frequency-lollipop.js
 export {default as metroInequalityChange} from "./metro-inequality-change.js";
 export {default as metroInequality} from "./metro-inequality.js";
 export {default as metroUnemploymentIndex} from "./metro-unemployment-index.js";
+export {default as metroUnemploymentHighlight} from "./metro-unemployment-highlight.js";
 export {default as metroUnemploymentMoving} from "./metro-unemployment-moving.js";
 export {default as metroUnemploymentRidgeline} from "./metro-unemployment-ridgeline.js";
 export {default as metroUnemployment} from "./metro-unemployment.js";

diff --git a/test/plots/metro-unemployment-highlight.js b/test/plots/metro-unemployment-highlight.js
@@ -0,0 +1,26 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const bls = await d3.csv("data/bls-metro-unemployment.csv", d3.autoType);
+  const highlight = d => /, MI /.test(d.division);
+  return Plot.plot({
+    y: {
+      grid: true,
+      label: "↑ Unemployment (%)"
+    },
+    color: {
+      domain: [false, true],
+      range: ["#ccc", "red"]
+    },
+    marks: [
+      Plot.ruleY([0]),
+      Plot.line(bls, {
+        x: "date",
+        y: "unemployment",
+        z: d => `${highlight(d)}/${d.division}`,
+        stroke: highlight
+      })
+    ]
+  });
+}