Back to skills
SKILL.md
2269 Waffle 14a30c5a
ASecurityThe waffle mark displays quantities using subdivided cells, making exact counts easier to read than bars.
- 9 stars
- 0 votes
- 0 copies
- 1 view
- Added May 31, 2026
Security analysis
100/100Pro scans all 2 files and shows the line behind each finding
npx -y skills add tools-only/X-Skills --skill 2269-waffle_14a30c5a --agent claude-codeAre you the author of 2269 Waffle 14a30c5a?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-2269-waffle-14a30c5a)# Waffle Mark
The waffle mark displays quantities using subdivided cells, making exact counts easier to read than bars.
## Constructors
```javascript
Plot.waffleX(data, options) // Horizontal waffle (→)
Plot.waffleY(data, options) // Vertical waffle (↑)
```
## Channels
| Channel | Description |
|---------|-------------|
| `x` (waffleY) | Ordinal grouping |
| `y` (waffleY) | Quantitative value |
| `x` (waffleX) | Quantitative value |
| `y` (waffleX) | Ordinal grouping |
| `fill` | Cell color |
## Examples
### Basic Waffle Chart
```javascript
Plot.waffleY([212, 207, 315, 11], {
x: ["apples", "bananas", "oranges", "pears"]
}).plot({height: 420})
```
### Stacked Waffle
```javascript
Plot.waffleY(data, {
x: "category",
y: "value",
fill: "subcategory"
}).plot()
```
### Counting Items
```javascript
Plot.waffleY(data, Plot.groupX({y: "count"}, {
x: "category",
fill: "subcategory"
})).plot()
```
### Scaled Units
```javascript
Plot.waffleY(data, {
x: "country",
y: "population",
unit: 1000000, // Each cell = 1 million
fill: "country"
}).plot()
```
### Horizontal Waffle
```javascript
Plot.waffleX(data, {
y: "category",
x: "value"
}).plot()
```
### Custom Cell Layout
```javascript
Plot.waffleY(data, {
x: "category",
y: "value",
multiple: 10, // 10 cells per row
gap: 2
}).plot()
```
## Options
| Option | Default | Description |
|--------|---------|-------------|
| `unit` | 1 | Quantity each cell represents |
| `multiple` | auto | Cells per row/column |
| `gap` | 1 | Space between cells in pixels |
| `round` | false | Avoid partial cells |
| `fill` | currentColor | Cell color |
| `stroke` | none | Cell border |
## Round Options
- `false` - Allow partial cells (default)
- `true` - Round to nearest integer
- Function - Custom rounding (e.g., `Math.floor`, `Math.ceil`)
## Notes
- Rendered using SVG patterns for performance
- Ideal for counting discrete items (people, days, units)
- Supports fractional values via partial cells
- Implicit stack transform applies when using single value channel
- Better for exact quantity reading than bar charts
Files in this skill
- README.md
- skill.md
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.