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:

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.

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

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)

<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)

<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)

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:

<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:

<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