diff --git a/docs/marks/rect.md b/docs/marks/rect.md index 676e8a781c..adabe46f7d 100644 --- a/docs/marks/rect.md +++ b/docs/marks/rect.md @@ -196,7 +196,7 @@ To round corners, use the **r** option. If the combined corner radii exceed the

-:::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}, diff --git a/docs/marks/waffle.md b/docs/marks/waffle.md index 84be6e66a0..ddb9591d62 100644 --- a/docs/marks/waffle.md +++ b/docs/marks/waffle.md @@ -29,7 +29,7 @@ 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}) ``` @@ -37,7 +37,7 @@ Plot.waffleY([212, 207, 315, 11], {x: ["apples", "bananas", "oranges", "pears"]} 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

-:::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,7 +76,7 @@ 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}}) ``` @@ -84,7 +84,7 @@ Plot.waffleY(olympians, Plot.groupZ({y: "count"}, {fill: "sex", sort: "sex", fx: 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,