Skip to content

link new chart examples to forkable notebooks #2123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/marks/rect.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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},
Expand All @@ -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},
Expand Down
10 changes: 5 additions & 5 deletions docs/marks/waffle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}})
```
Expand All @@ -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}})
```
Expand All @@ -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,
Expand Down