Merge branch 'main' into fil/default-margins

Author: Fil

docs/marks/rect.md

@@ -196,7 +196,7 @@ To round corners, use the **r** option. If the combined corner radii exceed the
   </label>
 </p>
 
-:::plot hidden defer
+:::plot hidden defer https://observablehq.com/@observablehq/plot-rounded-rects
 ```js
 Plot.plot({
   marks: [
@@ -218,7 +218,7 @@ Plot.plot({
 
 To round corners on a specific side, use the **rx1**, **ry1**, **rx2**, or **ry2** options. When stacking rounded rects vertically, use a positive **ry2** and a corresponding negative **ry1**; likewise for stacking rounded rects horizontally, use a positive **rx2** and a negative **rx1**. Use the **clip** option to hide the “wings” below zero.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-rounded-rects
 ```js
 Plot.plot({
   color: {legend: true},
@@ -232,7 +232,7 @@ Plot.plot({
 
 You can even round specific corners using the **rx1y1**, **rx2y1**, **rx2y2**, and **rx1y2** options.
 
-:::plot defer
+:::plot defer https://observablehq.com/@observablehq/plot-rounded-rects
 ```js
 Plot.plot({
   color: {legend: true},

docs/marks/waffle.md

@@ -29,15 +29,15 @@ onMounted(() => {
 
 The **waffle mark** is similar to the [bar mark](./bar.md) in that it displays a quantity (or quantitative extent) for a given category; but unlike a bar, a waffle is subdivided into square cells that allow easier counting. Waffles are useful for reading exact quantities. How quickly can you count the pears 🍐 below? How many more apples 🍎 are there than bananas 🍌?
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-simple-waffle
 ```js
 Plot.waffleY([212, 207, 315, 11], {x: ["apples", "bananas", "oranges", "pears"]}).plot({height: 420})
 ```
 :::
 
 The waffle mark is often used with the [group transform](../transforms/group.md) to compute counts. The chart below compares the number of female and male athletes in the 2012 Olympics.
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-waffle-group
 ```js
 Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sex"})).plot({x: {label: null}})
 ```
@@ -62,7 +62,7 @@ The **unit** option determines the quantity each waffle cell represents; it defa
   </span>
 </p>
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-waffle-unit
 ```js
 Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fx: "date_of_birth", unit})).plot({fx: {interval: "5 years", label: null}})
 ```
@@ -76,15 +76,15 @@ While waffles typically represent integer quantities, say to count people or day
 
 Like bars, waffles can be [stacked](../transforms/stack.md), and implicitly apply the stack transform when only a single quantitative channel is supplied.
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-stacked-waffles
 ```js
 Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fill: "sex", sort: "sex", fx: "weight", unit: 10})).plot({fx: {interval: 10}, color: {legend: true}})
 ```
 :::
 
 Waffles can also be used to highlight a proportion of the whole. The chart below recreates a graphic of survey responses from [“Teens in Syria”](https://www.economist.com/graphic-detail/2015/08/19/teens-in-syria) by _The Economist_ (August 19, 2015); positive responses are in orange, while negative responses are in gray. The **rx** option is used to produce circles instead of squares.
 
-:::plot
+:::plot https://observablehq.com/@observablehq/plot-survey-waffle
 ```js
 Plot.plot({
   axis: null,

src/mark.js

@@ -2,9 +2,9 @@ import {channelDomain, createChannels, valueObject} from "./channel.js";
 import {defined} from "./defined.js";
 import {maybeFacetAnchor} from "./facet.js";
 import {maybeClip, maybeNamed, maybeValue} from "./options.js";
-import {dataify, isDomainSort, isObject, isOptions, keyword, range, singleton} from "./options.js";
+import {dataify, isDomainSort, isObject, isOptions, keyword, range, singleton, string} from "./options.js";
 import {project} from "./projection.js";
-import {maybeClassName, styles} from "./style.js";
+import {styles} from "./style.js";
 import {basic, initializer} from "./transforms/basic.js";
 
 export class Mark {
@@ -72,7 +72,7 @@ export class Mark {
     this.marginLeft = +marginLeft;
     this.clip = maybeClip(clip);
     this.tip = maybeTip(tip);
-    this.className = className ? maybeClassName(className) : null;
+    this.className = string(className);
     // Super-faceting currently disallow position channels; in the future, we
     // could allow position to be specified in fx and fy in addition to (or
     // instead of) x and y.

test/output/classNameOnMarks.svg

@@ -12,7 +12,7 @@ export async function classNameOnMarks() {
     marks: [
       Plot.barX(
         sales,
-        Plot.groupY({x: "sum"}, {x: "units", y: "fruit", sort: {y: "x", reverse: true}, className: "fruitbars"})
+        Plot.groupY({x: "sum"}, {x: "units", y: "fruit", sort: {y: "x", reverse: true}, className: "fruit units"})
       ),
       Plot.ruleX([0])
     ]