boxX, boxY (#777)

* boxX, boxY

* Fil/box (#778)

* default options: Plot.boxX(values)

* Use the definition where the whiskers connect existing data points

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

src/index.js

@@ -2,6 +2,7 @@ export {plot, Mark, marks} from "./plot.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {Arrow, arrow} from "./marks/arrow.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";
+export {boxX, boxY} from "./marks/box.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
 export {Dot, dot, dotX, dotY} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";

src/marks/box.js

@@ -0,0 +1,75 @@
+import {min, max, quantile} from "d3";
+import {marks} from "../plot.js";
+import {groupX, groupY, groupZ} from "../transforms/group.js";
+import {map} from "../transforms/map.js";
+import {barX, barY} from "./bar.js";
+import {dot} from "./dot.js";
+import {ruleX, ruleY} from "./rule.js";
+import {tickX, tickY} from "./tick.js";
+
+// Returns a composite mark for producing a horizontal box plot, applying the
+// necessary statistical transforms. The boxes are grouped by y, if present.
+export function boxX(data, {
+  x = {transform: x => x},
+  y = null,
+  fill = "#ccc",
+  fillOpacity,
+  stroke = "currentColor",
+  strokeOpacity,
+  strokeWidth = 2,
+  ...options
+} = {}) {
+  const group = y != null ? groupY : groupZ;
+  return marks(
+    ruleY(data, group({x1: loqr1, x2: hiqr2}, {x, y, stroke, strokeOpacity, ...options})),
+    barX(data, group({x1: "p25", x2: "p75"}, {x, y, fill, fillOpacity, ...options})),
+    tickX(data, group({x: "p50"}, {x, y, stroke, strokeOpacity, strokeWidth, ...options})),
+    dot(data, map({x: oqr}, {x, y, z: y, stroke, strokeOpacity, ...options}))
+  );
+}
+
+// Returns a composite mark for producing a vertical box plot, applying the
+// necessary statistical transforms. The boxes are grouped by x, if present.
+export function boxY(data, {
+  y = {transform: y => y},
+  x = null,
+  fill = "#ccc",
+  fillOpacity,
+  stroke = "currentColor",
+  strokeOpacity,
+  strokeWidth = 2,
+  ...options
+} = {}) {
+  const group = x != null ? groupX : groupZ;
+  return marks(
+    ruleX(data, group({y1: loqr1, y2: hiqr2}, {x, y, stroke, strokeOpacity, ...options})),
+    barY(data, group({y1: "p25", y2: "p75"}, {x, y, fill, fillOpacity, ...options})),
+    tickY(data, group({y: "p50"}, {x, y, stroke, strokeOpacity, strokeWidth, ...options})),
+    dot(data, map({y: oqr}, {x, y, z: x, stroke, strokeOpacity, ...options}))
+  );
+}
+
+// A map function that returns only outliers, returning NaN for non-outliers
+function oqr(values) {
+  const r1 = loqr1(values);
+  const r2 = hiqr2(values);
+  return values.map(v => v < r1 || v > r2 ? v : NaN);
+}
+
+function loqr1(values, value) {
+  const lo = quartile1(values, value) * 2.5 - quartile3(values, value) * 1.5;
+  return min(values, d => d >= lo ? d : NaN);
+}
+
+function hiqr2(values, value) {
+  const hi = quartile3(values, value) * 2.5 - quartile1(values, value) * 1.5;
+  return max(values, d => d <= hi ? d : NaN);
+}
+
+function quartile1(values, value) {
+  return quantile(values, 0.25, value);
+}
+
+function quartile3(values, value) {
+  return quantile(values, 0.75, value);
+}

test/output/boxplot.svg

@@ -0,0 +1,5 @@
+import * as Plot from "@observablehq/plot";
+
+export default async function() {
+  return Plot.boxX([0, 3, 4.4, 4.5, 4.6, 5, 7]).plot();
+}

test/output/morleyBoxplot.svg

@@ -23,6 +23,7 @@ export {default as athletesWeightCumulative} from "./athletes-weight-cumulative.
 export {default as availability} from "./availability.js";
 export {default as ballotStatusRace} from "./ballot-status-race.js";
 export {default as beckerBarley} from "./becker-barley.js";
+export {default as boxplot} from "./boxplot.js";
 export {default as caltrain} from "./caltrain.js";
 export {default as carsMpg} from "./cars-mpg.js";
 export {default as carsParcoords} from "./cars-parcoords.js";

test/plots/boxplot.js

@@ -3,46 +3,5 @@ import * as d3 from "d3";
 
 export default async function() {
   const morley = await d3.csv("data/morley.csv", d3.autoType);
-  return boxX(morley, {x: "Speed", y: "Expt"}).plot({x: {grid: true, inset: 6}});
-}
-
-// Returns a composite mark for producing a box plot, applying the necessary
-// statistical transforms. The boxes are grouped by y, if present.
-function boxX(data, {
-  x = x => x,
-  y = null,
-  fill = "#ccc",
-  stroke = "currentColor",
-  ...options
-} = {}) {
-  return Plot.marks(
-    Plot.ruleY(data, Plot.groupY({x1: iqr1, x2: iqr2}, {x, y, stroke, ...options})),
-    Plot.barX(data, Plot.groupY({x1: "p25", x2: "p75"}, {x, y, fill, ...options})),
-    Plot.tickX(data, Plot.groupY({x: "p50"}, {x, y, stroke, strokeWidth: 2, ...options})),
-    Plot.dot(data, Plot.map({x: outliers}, {x, y, z: y, stroke, ...options}))
-  );
-}
-
-// A map function that returns only outliers, returning NaN for non-outliers
-// (values within 1.5× of the interquartile range).
-function outliers(values) {
-  const r1 = iqr1(values);
-  const r2 = iqr2(values);
-  return values.map(v => v < r1 || v > r2 ? v : NaN);
-}
-
-function iqr1(values, value) {
-  return Math.max(d3.min(values, value), quartile1(values, value) * 2.5 - quartile3(values, value) * 1.5);
-}
-
-function iqr2(values, value) {
-  return Math.min(d3.max(values, value), quartile3(values, value) * 2.5 - quartile1(values, value) * 1.5);
-}
-
-function quartile1(values, value) {
-  return d3.quantile(values, 0.25, value);
-}
-
-function quartile3(values, value) {
-  return d3.quantile(values, 0.75, value);
+  return Plot.boxX(morley, {x: "Speed", y: "Expt"}).plot({x: {grid: true, inset: 6}});
 }