---
title: Blogi graafikud
description: Loob blogipostitustesse SVG-andmegraafikuid, mis töötavad ka tumedas režiimis.
category: Marketing
sublabel: Sisu
author: AgriciDaniel
tags: 
license: MIT
source: https://github.com/AgriciDaniel/claude-blog
---

# Blogi diagramm: sisseehitatud SVG-andmevisualiseerimine

Genereerib blogipostituste jaoks tumeda režiimiga ühilduvaid reasiseseid SVG-diagramme. Kutsutakse
sisemiselt välja `blog-write` ja `blog-rewrite` poolt, kui tuvastatakse diagrammiväärilised andmed.
Ei ole eraldiseisev kasutajale suunatud käsk.

**Stiili tõeallikas:** `skills/blog/references/visual-media.md`

Toetatud diagrammitüüpide puhul eelista deterministlikku CLI-d:

```bash
python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json
```

## Sisendi vorming

Kirjutaja või uurija annab edasi diagrammipäringu:

```
Chart Request:
- Type: horizontal bar
- Title: "Quarterly Signups by Product"
- Data: Product A 420, Product B 315, Product C 180
- Source: [Verified source], [publication date]
- Platform: mdx (or html)
```

## Diagrammitüübi valik

Vali andmemustri alusel. Eelista diagrammitüüpide mitmekesisust, kuid korda
tüüpi, kui võrreldavus või lugeja arusaadavus sellest selgelt võidab.

| Andmemuster | Parim diagrammitüüp |
|-------------|-----------------|
| Enne/pärast võrdlus | Rühmitatud tulpdiagramm |
| Järjestatud tegurid / korrelatsioonid | Pulgakommidiagramm |
| Terviku osad / turuosa | Sõõrikdiagramm |
| Trend ajas | Joondiagramm |
| Protsentuaalne paranemine | Horisontaalne tulpdiagramm |
| Jaotus / vahemik | Pindaladiagramm |
| Mitmemõõtmeline skoorimine | Radardiagramm |

## Stiilireeglid (mittevaieldavad)

Kõik diagrammid peavad töötama nii tumedal kui ka heledal taustal:

```
Text elements:     fill="currentColor"
Grid lines:        stroke="currentColor" opacity="0.08"
Axis lines:        stroke="currentColor" opacity="0.3"
Background:        transparent (no fill on root SVG)
Subtitle text:     fill="var(--chart-muted, currentColor)"
Source text:        fill="var(--chart-muted, currentColor)"
Label text:        fill="currentColor" opacity="0.8"
```

Sea `--chart-muted` hostiteema juurdepääsetavale tekstitokenile. Kui tokenit
pole, kasuta `#4b5563` heledal taustal ja `#d1d5db` tumedal taustal.
Ära toetu nähtava viitamise osas madala läbipaistmatusega allika- või alapealkirjatekstile.

### Värvipalett

| Värv | Hex | Kasutusjuht |
|-------|-----|----------|
| Oranž | `#f97316` | Esmane / kõrgeim väärtus |
| Taevasinine | `#38bdf8` | Teisene / võrdlus |
| Lilla | `#a78bfa` | Kolmandane / erikategooria |
| Roheline | `#22c55e` | Neljandane / positiivne näitaja |

Heakskiidetud värviliste elementide sees oleva teksti jaoks: kasuta `fill="#111827"` koos
`fontWeight="800"`. Kasuta valget teksti alles pärast seda, kui oled kontrollinud, et kontrastisuhe
on selle konkreetse täitevärvi vastu vähemalt 4.5:1.

Ära toetu ainult värvile. Lisa otsesildid, mustrid, joonekatkestused, markerite
kujundid või legenditekst, et värvipimedad lugejad saaksid seeriaid eristada.

## Standardne SVG-korpus (HTML)

```xml
<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-labelledby="chart-title chart-desc"
>
  <title id="chart-title">Chart Title</title>
  <desc id="chart-desc">Description for screen readers with all key data points and source</desc>

  <!-- Chart content -->

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)">
    Source: Source Name (Year)
  </text>
</svg>
```

## JSX/MDX-korpus (camelCase atribuudid)

```jsx
<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-labelledby="chart-title chart-desc"
>
  <title id="chart-title">Chart Title</title>
  <desc id="chart-desc">Description for screen readers</desc>

  {/* Chart content */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)">
    Source: Source Name (Year)
  </text>
</svg>
```

## JSX-atribuutide teisendus (MDX jaoks nõutav)

| HTML | JSX |
|------|-----|
| `stroke-width` | `strokeWidth` |
| `stroke-dasharray` | `strokeDasharray` |
| `stroke-linecap` | `strokeLinecap` |
| `text-anchor` | `textAnchor` |
| `font-size` | `fontSize` |
| `font-weight` | `fontWeight` |
| `font-family` | `fontFamily` |
| `class` | `className` |
| `style="..."` | `style={{...}}` |

## Diagrammitüüpide konstrueerimine

### Horisontaalne tulpdiagramm

Parim: protsentuaalsed paranemised, ühe mõõdiku võrdlused.

1. Defineeri diagrammiala: x=80, y=40, width=440, height=280
2. Arvuta tulba kõrgus: `chartHeight / dataCount - gap` (gap=8)
3. Arvuta tulba laius: `(value / maxValue) * chartWidth`
4. Paiguta tulbad: `y = chartY + index * (barHeight + gap)`
5. Silt vasakul (paremjoondatud x=75 juures): kategooria nimi
6. Väärtuse silt tulba lõpus: protsent või arv
7. Allikatekst all keskel

### Rühmitatud tulpdiagramm

Parim: enne/pärast, A vs B võrdlused.

1. Defineeri rühmad Y-telje suunas, tulbad iga rühma sees
2. Kasuta kahe seeria jaoks 2 värvi (esmane + teisene)
3. Lisa üles legend: iga seeria jaoks värviline ruut + silt
4. Vahe rühmade vahel > vahe rühma sees

### Sõõrikdiagramm

Parim: terviku osad, turuosa.

1. Keskpunkt: cx=280, cy=180, välisraadius=140, siseraadius=80
2. Arvuta kaaresegmendid kumulatiivsete nurkade abil
3. Iga segment: `<path d="M... A... L... A... Z" fill="color" />`
4. Keskne tekst: kogusumma või võtmesilt
5. Legend diagrammi all värviliste ruutude + siltide + väärtustega

### Joondiagramm

Parim: trendid ajas.

1. X-telg: ajaperioodid, ühtlaselt paigutatud
2. Y-telg: väärtusvahemik 4–5 ruudujoonega
3. Joonista ruudujooned: `stroke="currentColor" opacity="0.08"`
4. Joonista andmepunktid: `<circle cx=... cy=... r="4" fill="color" />`
5. Ühenda: `<polyline points="..." fill="none" stroke="color" strokeWidth="2" />`
6. Valikuline: pindala täitmine joone all `opacity="0.1"`

### Pulgakommidiagramm

Parim: järjestatud tegurid, korrelatsioonid.

1. Horisontaalne orientatsioon (nagu tulpdiagramm, aga ringidega)
2. Peenike joon teljest andmepunktini: `stroke="currentColor" opacity="0.15" strokeWidth="1"`
3. Ring andmepunktis: `r="6"` täitevärviga
4. Väärtuse silt ringi kõrval
5. Kategooriad Y-teljel (vasakjoondatud)

### Pindaladiagramm

Parim: jaotus, kumulatiivsed andmed.

1. Sama mis joondiagramm, aga täidetud pindalaga all
2. Pindala täitmine: `<path d="M... L... L... Z" fill="color" opacity="0.15" />`
3. Joon peal: `stroke="color" strokeWidth="2" fill="none"`
4. Ruudujooned pindala taga

### Radardiagramm

Parim: mitmemõõtmeline skoorimine (5–7 telge).

1. Keskpunkt: cx=280, cy=190
2. Joonista ruudustiku jaoks kontsentrilised hulknurgad (3–4 taset)
3. Arvuta teljeotspunktid võrdsete nurkade all
4. Joonista andmepunktid igal teljel väärtusega proportsionaalselt
5. Ühenda andmepunktid täidetud hulknurgaga: `fill="color" opacity="0.2" stroke="color"`
6. Märgi iga telg välisservas

## Siltide reeglid

- Murra pikad sildid sõnapiiridelt `<tspan>` ridadeks.
- Kärbi ainult siis, kui murdmine põrkuks andmemärkidega, ja hoia täissilt
  `<desc>`-is või kõrvaltekstis.
- Kasuta stabiilseid diagrammimõõtmeid reageeriva `max-width: 100%; height: auto`
  stiiliga või vali tihedate siltide jaoks põhjendatud laiem viewBox.
- Kontrolli mobiililaiusi, et teljesildid, legendid ja väärtussildid ei kattuks.

## Väljundi vorming

Mähi iga diagramm `<figure>` elementi:

**HTML:**
```html
<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">[Chart Title]</title>
    <desc id="chart-desc">[Full description with data points for screen readers]</desc>
    <!-- chart content -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="var(--chart-muted, currentColor)">
      Source: [Source Name] ([Year])
    </text>
  </svg>
  <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption>
</figure>
```

**MDX:**
```mdx
<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">[Chart Title]</title>
    <desc id="chart-desc">[Full description]</desc>
    {/* chart content with camelCase attributes */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="var(--chart-muted, currentColor)">
      Source: [Source Name] ([Year])
    </text>
  </svg>
  <figcaption>Source: <a href="[Source URL]">[Source Name]</a>, [publication date].</figcaption>
</figure>
```

## Kvaliteedi kontrollnimekiri (kontrolli enne tagastamist)

- [ ] Ei ole kõvakodeeritud tekstivärve, välja arvatud kontrastikontrollitud sildid värviliste elementide sees
- [ ] Ei ole valgeid/heledaid taustu (läbipaistev või puudub)
- [ ] Allika viitamise tekst olemas all ja semantiline `<figcaption>` olemas
- [ ] `role="img"` ja `aria-labelledby` olemas `<svg>`-l
- [ ] `<title id>` ja `<desc id>` olemas `<svg>` sees
- [ ] Diagrammitüübi valik toetab arusaadavust ja võrreldavust
- [ ] Kui MDX: kõik atribuudid camelCase-vormingus (atribuutide nimedes pole sidekriipse)
- [ ] Andmeväärtused vastavad täpselt allikaandmetele
- [ ] Värvipalett kasutab ainult heakskiidetud värve
- [ ] ViewBox on `0 0 560 380` (standard) või põhjendatud alternatiiv
- [ ] Sildid, kujundid, mustrid või joonestiilid pakuvad üleliigsust lisaks värvile