only default to bar for x or y is zeroed (#1273)

* only default to bar for zeroed reducers

* default bar if x or y is zeroed

Author: mbostock

src/marks/auto.js

@@ -1,4 +1,4 @@
-import {InternSet} from "d3";
+import {ascending, InternSet} from "d3";
 import {isOrdinal, labelof, valueof, isOptions, isColor} from "../options.js";
 import {area, areaX, areaY} from "./area.js";
 import {dot} from "./dot.js";
@@ -11,7 +11,6 @@ import {frame} from "./frame.js";
 import {bin, binX, binY} from "../transforms/bin.js";
 import {group, groupX, groupY} from "../transforms/group.js";
 import {marks} from "../mark.js";
-import {ascending} from "d3";
 
 /** @jsdoc auto */
 export function auto(data, {x, y, color, size, fx, fy, mark} = {}) {
@@ -45,8 +44,8 @@ export function auto(data, {x, y, color, size, fx, fy, mark} = {}) {
   if (yReduce === undefined)
     yReduce = xReduce == null && yValue == null && sizeValue == null && xValue != null ? "count" : null;
 
-  let {zero: xZero} = x;
-  let {zero: yZero} = y;
+  let {zero: xZero = isZeroReducer(xReduce) ? true : undefined} = x;
+  let {zero: yZero = isZeroReducer(yReduce) ? true : undefined} = y;
 
   // TODO The line mark will need z?
   // TODO Limit and sort for bar charts (e.g. alphabet)?
@@ -98,17 +97,13 @@ export function auto(data, {x, y, color, size, fx, fy, mark} = {}) {
     mark =
       sizeValue != null || sizeReduce != null
         ? "dot"
-        : xReduce != null || yReduce != null || colorReduce != null
+        : xZero || yZero || colorReduce != null // histogram or heatmap
         ? "bar"
         : x && y
-        ? isContinuous(x) && isContinuous(y) && (isMonotonic(x) || isMonotonic(y))
+        ? isContinuous(x) && isContinuous(y) && (xReduce != null || yReduce != null || isMonotonic(x) || isMonotonic(y))
           ? "line"
-          : (isContinuous(x) && xZero) || (isContinuous(y) && yZero)
-          ? "bar"
           : "dot"
-        : x
-        ? "rule"
-        : y
+        : x || y
         ? "rule"
         : null;
   }
@@ -239,6 +234,10 @@ function makeOptions(value) {
   return isReducer(value) ? {reduce: value} : {value};
 }
 
+function isZeroReducer(reduce) {
+  return /^(?:distinct|count|sum|proportion)$/i.test(reduce);
+}
+
 // https://github.com/observablehq/plot/blob/818562649280e155136f730fc496e0b3d15ae464/src/transforms/group.js#L236
 function isReducer(reduce) {
   if (typeof reduce?.reduce === "function") return true;

test/output/autoBarMean.svg renamed to test/output/autoBarMeanZero.svg

@@ -187,11 +187,21 @@ export async function autoBarStackColorConstant() {
   return Plot.auto(athletes, {x: "height", color: "gold"}).plot();
 }
 
-export async function autoBarMean() {
+export async function autoBarMeanZero() {
+  const weather = await d3.csv("data/seattle-weather.csv", d3.autoType);
+  return Plot.auto(weather, {x: "date", y: {value: "temp_max", reduce: "mean", zero: true}}).plot();
+}
+
+export async function autoLineMean() {
   const weather = await d3.csv("data/seattle-weather.csv", d3.autoType);
   return Plot.auto(weather, {x: "date", y: {value: "temp_max", reduce: "mean"}}).plot();
 }
 
+export async function autoLineMeanColor() {
+  const athletes = await d3.csv("data/athletes.csv", d3.autoType);
+  return Plot.auto(athletes, {x: "date_of_birth", y: {value: "height", reduce: "mean"}, color: "sex"}).plot();
+}
+
 export async function autoLineFacet() {
   const industries = await d3.csv("data/bls-industry-unemployment.csv", d3.autoType);
   return Plot.auto(industries, {x: "date", y: "unemployed", fy: "industry"}).plot();