diff --git a/test/output/youngAdults.html b/test/output/youngAdults.html
new file mode 100644
index 0000000000..336d07e429
--- /dev/null
+++ b/test/output/youngAdults.html
@@ -0,0 +1,449 @@
+
+ Share of young adults living with their parents (%)
+ …by age and sex. Data: Eurostat
+
+ Y16-19Y20-24Y25-29
+
+
\ No newline at end of file
diff --git a/test/plots/difference.ts b/test/plots/difference.ts
index c0c659c288..5ee4ea3690 100644
--- a/test/plots/difference.ts
+++ b/test/plots/difference.ts
@@ -73,11 +73,66 @@ export async function differenceYVariable() {
});
}
+export async function differenceYClip() {
+ const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);
+ return Plot.differenceY(gistemp, Plot.windowY(28, {x: "Date", y: "Anomaly", clip: "frame"})).plot({
+ x: {insetLeft: -50}
+ });
+}
+
+export async function differenceYClipVariable() {
+ const stocks = await readStocks();
+ return Plot.plot({
+ marks: [
+ Plot.differenceY(
+ stocks,
+ Plot.normalizeY(
+ Plot.groupX(
+ {y1: Plot.find((d) => d.Symbol === "GOOG"), y2: Plot.find((d) => d.Symbol === "AAPL")},
+ {x: "Date", y: "Close", negativeFill: "#eee", positiveFill: ([d]) => d.Date.getUTCFullYear(), clip: true}
+ )
+ )
+ )
+ ]
+ });
+}
+
export async function differenceYConstant() {
const aapl = await d3.csv("data/aapl.csv", d3.autoType);
return Plot.differenceY(aapl, {x: "Date", y1: 115, y2: "Close"}).plot();
}
+export async function differenceYOrdinal() {
+ const random = d3.randomLcg(42);
+ return Plot.plot({
+ marks: [
+ Plot.differenceY(
+ {length: 30},
+ {
+ y1: () => "ABCDE"[(random() * 5) | 0],
+ y2: () => "ABCDE"[(random() * 5) | 0]
+ }
+ )
+ ]
+ });
+}
+
+export async function differenceYOrdinalFlip() {
+ const random = d3.randomLcg(42);
+ return Plot.plot({
+ y: {reverse: true},
+ marks: [
+ Plot.differenceY(
+ {length: 30},
+ {
+ y1: () => "ABCDE"[(random() * 5) | 0],
+ y2: () => "ABCDE"[(random() * 5) | 0]
+ }
+ )
+ ]
+ });
+}
+
export async function differenceYReverse() {
const gistemp = await d3.csv("data/gistemp.csv", d3.autoType);
return Plot.differenceY(gistemp, Plot.windowY(28, {x: "Date", y: "Anomaly"})).plot({y: {reverse: true}});
diff --git a/test/plots/index.ts b/test/plots/index.ts
index 2b202b065f..3eb5b5de2a 100644
--- a/test/plots/index.ts
+++ b/test/plots/index.ts
@@ -338,3 +338,4 @@ export * from "./word-length-moby-dick.js";
export * from "./yearly-requests-dot.js";
export * from "./yearly-requests-line.js";
export * from "./yearly-requests.js";
+export * from "./young-adults.js";
diff --git a/test/plots/young-adults.ts b/test/plots/young-adults.ts
new file mode 100644
index 0000000000..9d6f50dd18
--- /dev/null
+++ b/test/plots/young-adults.ts
@@ -0,0 +1,44 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export async function youngAdults() {
+ const ages = ["Y16-19", "Y20-24", "Y25-29"];
+ const geos = ["SE", "FR", "DE", "TR", "IT"];
+ const ilc_lvps08 = await d3.csv("data/ilc_lvps08.csv", (d) =>
+ ages.includes(d.age) && geos.includes(d.geo) ? d3.autoType(d) : null
+ );
+ return Plot.plot({
+ title: "Share of young adults living with their parents (%)",
+ subtitle: "…by age and sex. Data: Eurostat",
+ width: 928,
+ color: {legend: true},
+ style: `max-width:${4000}px; overflow-y: visible;`,
+ x: {ticks: 4, tickFormat: "d"},
+ y: {grid: true, nice: true},
+ marks: [
+ Plot.frame(),
+ Plot.differenceY(
+ ilc_lvps08,
+ Plot.groupX(
+ {
+ y1: Plot.find((d) => d.sex === "F"),
+ y2: Plot.find((d) => d.sex === "M"),
+ positiveFill: "first"
+ },
+ {
+ x: "TIME_PERIOD",
+ y: "OBS_VALUE",
+ negativeFill: "grey",
+ positiveFill: "age",
+ z: "age",
+ sort: {fx: {value: "y", reduce: "mean"}},
+ fillOpacity: 0.5,
+ fx: "geo",
+ curve: "basis",
+ tip: true
+ }
+ )
+ )
+ ]
+ });
+}