hermes-agent/optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md

# ML Benchmark Grouped Bar Chart with Dual Axis

A quantitative data visualization comparing LLM inference speed across quantization levels with dual Y-axes, threshold markers, and an inset accuracy table.

## Key Patterns Used

- **Grouped bars**: Min/max range pairs per category using semantic color pairs (lighter=min, darker=max)
- **Dual Y-axis**: Left axis for primary metric (tok/s), right axis for secondary metric (VRAM GB)
- **Overlay line graph**: `<polyline>` with labeled dots showing VRAM usage across categories
- **Threshold marker**: Dashed red horizontal line indicating hardware limit (24 GB GPU)
- **Zone annotations**: Subtle text labels above/below threshold for context
- **Inset data table**: Alternating row fills below chart with quantitative accuracy data
- **Semantic color coding**: Each quantization level gets its own color from the skill palette (red=OOM, amber=slow, teal=sweet spot, blue=fast)

## Diagram Type

This is a **quantitative data chart** with:
- **Grouped vertical bars**: Range bars showing min–max performance per category
- **Secondary axis line**: VRAM usage overlaid as a connected scatter plot
- **Threshold annotation**: Hardware constraint line
- **Inset table**: Supporting accuracy metrics

## Chart Layout Formula

```
Chart area:  x=90–590, y=70–410 (500px wide, 340px tall)
Left Y-axis: Primary metric (tok/s)
             y = 410 − (val / max_val) × 340
Right Y-axis: Secondary metric (VRAM GB)
              Same formula, different scale labels
Groups:       Divide width by number of categories
Bars:         Each group → min bar (34px) + 8px gap + max bar (34px)
Line overlay: <polyline> connecting data points across group centers
Threshold:    Horizontal dashed line at critical value
Table:        Below chart, alternating row fills
```

## Data Mapped

| Quantization | Model Size | Speed (tok/s) | VRAM (GB) | MMLU Pro | Status |
|-------------|-----------|---------------|-----------|----------|--------|
| FP16 | 62 GB | 0.5–2 | 62 | 75.2 | OOM / unusable |
| Q8_0 | 32 GB | 3–5 | 32 | 75.0 | Partial offload |
| Q4_K_M | 16.8 GB | 8–12 | 16.8 | 73.1 | Fits in VRAM ✓ |
| IQ3_M | 12 GB | 12–15 | 12 | 70.5 | Full GPU speed |

## Bar CSS Classes

```css
/* Light mode */
.bar-fp16-min { fill: #FCEBEB; stroke: #A32D2D; stroke-width: 0.75; }
.bar-fp16-max { fill: #F7C1C1; stroke: #A32D2D; stroke-width: 0.75; }
.bar-q8-min   { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.75; }
.bar-q8-max   { fill: #FAC775; stroke: #854F0B; stroke-width: 0.75; }
.bar-q4-min   { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.75; }
.bar-q4-max   { fill: #9FE1CB; stroke: #0F6E56; stroke-width: 0.75; }
.bar-iq3-min  { fill: #E6F1FB; stroke: #185FA5; stroke-width: 0.75; }
.bar-iq3-max  { fill: #B5D4F4; stroke: #185FA5; stroke-width: 0.75; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .bar-fp16-min { fill: #501313; stroke: #F09595; }
  .bar-fp16-max { fill: #791F1F; stroke: #F09595; }
  .bar-q8-min   { fill: #412402; stroke: #EF9F27; }
  .bar-q8-max   { fill: #633806; stroke: #EF9F27; }
  .bar-q4-min   { fill: #04342C; stroke: #5DCAA5; }
  .bar-q4-max   { fill: #085041; stroke: #5DCAA5; }
  .bar-iq3-min  { fill: #042C53; stroke: #85B7EB; }
  .bar-iq3-max  { fill: #0C447C; stroke: #85B7EB; }
}
```

## Overlay Line CSS

```css
.vram-line { stroke: #534AB7; stroke-width: 2.5; fill: none; }
.vram-dot  { fill: #534AB7; stroke: var(--bg-primary); stroke-width: 2; }
.vram-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #534AB7; font-weight: 500; }
```

## Threshold CSS

```css
.threshold { stroke: #A32D2D; stroke-width: 1; stroke-dasharray: 6 3; fill: none; }
.threshold-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #A32D2D; font-weight: 500; }
```

## Table CSS

```css
.tbl-header { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5; }
.tbl-row    { fill: transparent; stroke: var(--border); stroke-width: 0.25; }
.tbl-alt    { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.25; }
```

## Layout Notes

- **ViewBox**: 680×660 (portrait, chart + legend + table)
- **Chart area**: y=70–410, x=90–590
- **Legend row**: y=458–470
- **Inset table**: y=490–620
- **Bar width**: 34px each, 8px gap between min/max pair
- **Group spacing**: 125px center-to-center
- **Dot halo**: White circle (r=6) behind colored dot (r=5) for legibility over bars/grid

## When to Use This Pattern

Use this diagram style for:
- Model benchmark comparisons across quantization levels
- Performance vs. resource usage tradeoff analysis
- Any multi-metric comparison with a hardware/software constraint
- GPU/TPU/accelerator benchmarking dashboards
- Accuracy vs. speed Pareto frontiers
- Hardware requirement sizing charts