tests

Author: Fil

test/plots/aapl-close.ts

@@ -6,8 +6,7 @@ export async function aaplClose() {
   return Plot.plot({
     y: {grid: true},
     marks: [
-      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
-      Plot.lineY(aapl, {x: "Date", y: "Close"}),
+      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1, line: true}),
       Plot.ruleY([0])
     ]
   });
@@ -28,8 +27,7 @@ export async function aaplCloseClip() {
     x: {domain: [new Date(Date.UTC(2015, 0, 1)), new Date(Date.UTC(2015, 3, 1))]},
     y: {grid: true},
     marks: [
-      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
-      Plot.lineY(aapl, {x: "Date", y: "Close"}),
+      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1, line: true}),
       Plot.ruleY([0], {clip: false})
     ]
   });

test/plots/availability.ts

@@ -3,25 +3,10 @@ import * as d3 from "d3";
 
 export async function availability() {
   const data = await d3.csv<any>("data/availability.csv", d3.autoType);
-  const sum = (d) => (d.length ? d3.sum(d) : NaN); // force gaps
   return Plot.plot({
     height: 180,
     marks: [
-      Plot.areaY(data, {
-        x: "date",
-        y: "value",
-        interval: "day",
-        reduce: sum,
-        curve: "step",
-        fill: "#f2f2fe"
-      }),
-      Plot.lineY(data, {
-        x: "date",
-        y: "value",
-        interval: "day",
-        reduce: sum,
-        curve: "step"
-      }),
+      Plot.areaY(data, {x: "date", y: "value", interval: "day", curve: "step", fill: "#f2f2fe", line: true}),
       Plot.ruleY([0])
     ]
   });

test/plots/downloads.ts

@@ -5,9 +5,8 @@ export async function downloads() {
   const downloads = (await d3.csv<any>("data/downloads.csv", d3.autoType)).filter((d) => d.downloads > 0);
   return Plot.plot({
     marks: [
-      Plot.areaY(downloads, {x: "date", interval: "day", y: "downloads", curve: "step", fill: "#ccc"}),
       Plot.ruleY([0]),
-      Plot.lineY(downloads, {x: "date", interval: "day", y: "downloads", curve: "step", strokeWidth: 1})
+      Plot.areaY(downloads, {x: "date", interval: "day", y: "downloads", curve: "step", fill: "#ccc", line: true, strokeWidth: 1})
     ]
   });
 }

test/plots/music-revenue.ts

@@ -3,21 +3,14 @@ import * as d3 from "d3";
 
 export async function musicRevenue() {
   const riaa = await d3.csv<any>("data/riaa-us-revenue.csv", d3.autoType);
-  const stack: Plot.AreaYOptions = {
-    x: "year",
-    y: "revenue",
-    z: "format",
-    order: "-appearance"
-  };
   return Plot.plot({
     y: {
       grid: true,
       label: "Annual revenue (billions, adj.)",
       transform: (d) => d / 1000
     },
     marks: [
-      Plot.areaY(riaa, Plot.stackY({...stack, fill: "group", title: (d) => `${d.format}\n${d.group}`})),
-      Plot.lineY(riaa, Plot.stackY2({...stack, stroke: "white", strokeWidth: 1})),
+      Plot.areaY(riaa, {x: "year", y: "revenue", z: "format", order: "-appearance", fill: "group", title: (d: any) => `${d.format}\n${d.group}`, line: true, stroke: "white", strokeWidth: 1}),
       Plot.ruleY([0])
     ]
   });

test/plots/ridgeline.ts

@@ -20,7 +20,8 @@ export async function ridgeline() {
         curve: "basis",
         sort: "date",
         fill: "color-mix(in oklab, var(--plot-background), currentColor 20%)",
-        line: true
+        line: true,
+        strokeWidth: 1
       })
     ]
   });