I grafici servono per articoli di meta-analisi, report e tutorial. Si adattano da soli al tema chiaro o scuro e alla grandezza dello schermo. Per ognuno scrivi i dati nel blocco in mezzo ai trattini e il grafico compare al suo posto.
Confrontare categorie con le barre
Usa il grafico a barre per confrontare valori tra categorie, per esempio le copie giocate per archetipo.
::bar-chart
---
title: Meta Breakdown - Copie Giocate
seriesName: Copie
data:
- { name: Jund Wildfire, value: 11 }
- { name: Monored Madness, value: 11 }
- { name: Spy Combo, value: 8 }
- { name: Grixis Affinity, value: 7 }
---
::
Barre orizzontali
Aggiungi horizontal: true quando i nomi delle categorie sono lunghi o tanti.
::bar-chart
---
title: Meta Breakdown - Copie Giocate
seriesName: Copie
horizontal: true
data:
- { name: Jund Wildfire, value: 11 }
- { name: Monored Madness, value: 11 }
- { name: Spy Combo, value: 8 }
- { name: Grixis Affinity, value: 7 }
---
::
Mostrare un andamento nel tempo con le linee
Usa il grafico a linee per seguire uno o più valori nel tempo, per esempio la meta share. Scrivi i periodi in categories e, per ogni serie, tanti valori quanti sono i periodi.
::line-chart
---
title: Andamento Meta nel Tempo
categories: [Gen, Feb, Mar, Apr, Mag, Giu]
yAxisName: "% Meta Share"
series:
- { name: Jund Wildfire, data: [12, 14, 13, 15, 16, 18] }
- { name: Monoblu Terror, data: [8, 9, 10, 9, 8, 7] }
- { name: RDW, data: [5, 6, 6, 7, 6, 5] }
---
::
Aree impilate
Aggiungi stacked: true per impilare le serie una sull'altra, come in un grafico ad area. Va bene per mostrare come cambia la quota di ogni mazzo sul totale.
::line-chart
---
title: Andamento Meta nel Tempo
categories: [Gen, Feb, Mar, Apr, Mag, Giu]
stacked: true
yAxisName: "% Meta Share"
series:
- { name: Jund Wildfire, data: [12, 14, 13, 15, 16, 18] }
- { name: Monoblu Terror, data: [8, 9, 10, 9, 8, 7] }
- { name: RDW, data: [5, 6, 6, 7, 6, 5] }
---
::
Mostrare un intervallo di incertezza
Usa il grafico con banda di confidenza per una stima con un margine di errore, per esempio il win rate previsto. Per ogni punto scrivi il valore (value) e i limiti inferiore (lower) e superiore (upper). Con bandLabel dai un nome alla fascia.
::confidence-band-chart
---
title: Win Rate Previsto - Mono Blue Control
seriesName: Win Rate
bandLabel: "Intervallo di Confidenza (95%)"
yAxisName: "Win Rate %"
data:
- { x: "Round 1", value: 55, lower: 48, upper: 62 }
- { x: "Round 2", value: 57, lower: 51, upper: 63 }
- { x: "Round 3", value: 54, lower: 46, upper: 61 }
- { x: "Round 4", value: 58, lower: 52, upper: 65 }
---
::
Mostrare le proporzioni con la torta
Usa il grafico a torta per far vedere come si divide un totale, per esempio la distribuzione degli archetipi in un torneo.
::pie-chart
---
title: Meta Breakdown
data:
- { value: 11, name: Jund Wildfire }
- { value: 11, name: Monored Madness }
- { value: 8, name: Spy Combo }
- { value: 7, name: Grixis Affinity }
---
::
Cercare una correlazione con la dispersione
Usa il grafico a dispersione per mettere in relazione due valori, per esempio il costo di mana medio e il win rate. Ogni punto ha una coppia x e y. La legenda compare solo se hai più di una serie.
::scatter-chart
---
title: CMC medio vs Win Rate
xAxisName: CMC medio
yAxisName: Win Rate %
series:
- name: Aggro
data: [{ x: 1.8, y: 52 }, { x: 2.1, y: 55 }, { x: 1.5, y: 58 }]
- name: Control
data: [{ x: 3.2, y: 51 }, { x: 3.8, y: 49 }, { x: 3.5, y: 53 }]
---
::
Confrontare più aspetti con il radar
Usa il grafico radar per confrontare uno o più mazzi su più caratteristiche insieme, per esempio il profilo di un archetipo. Prima elenca gli assi in indicators, ognuno con il suo valore massimo (max). Poi, per ogni mazzo, scrivi i values.
values di ogni serie vanno nello stesso ordine degli indicators. Nell'esempio il primo valore è Aggro, il secondo Control, e così via.::radar-chart
---
title: Profilo Archetipo
indicators:
- { name: Aggro, max: 10 }
- { name: Control, max: 10 }
- { name: Consistenza, max: 10 }
- { name: Potenza, max: 10 }
- { name: Budget, max: 10 }
series:
- { name: Mono Red Madness, values: [9, 2, 6, 7, 8] }
- { name: Mono Blue Control, values: [2, 9, 7, 8, 5] }
---
::
Disegnare un diagramma di flusso
Usa il diagramma Mermaid per illustrare un flusso di decisioni, per esempio una guida al sideboard o un albero di scelte durante la partita. Scrivi il diagramma nel campo code, con il linguaggio di Mermaid (flowchart, sequence diagram e così via).
::mermaid
---
code: |
flowchart TD
A[Mainboard] --> B{Sideboard}
B -->|Round 1| C[Swap]
B -->|Round 2| D[Keep]
---
::