Composant · Données

VennChart

Documenté

VennChart (diagramme de Venn / Euler) superpose DEUX ou TROIS ensembles dessinés en cercles semi-transparents. Chaque zone est décrite par les ensembles qu'elle couvre et une valeur : membres d'un seul ensemble, ou intersection de deux ou trois ensembles. Le rayon de chaque cercle est proportionnel à √(taille totale de l'ensemble) ; les positions sont fixes et déterministes (côte à côte pour 2, triangle pour 3).

Exemples

Deux ensembles

Deux cercles côte à côte avec recouvrement. La valeur de chaque membre exclusif et de l'intersection A∩B est étiquetée ; le rayon reflète la taille totale de l'ensemble.

Deux ensembles

Courriel: 120
Mobile: 80
Courriel ∩ Mobile: 35

Voir le code (Svelte)

<div class="chart-wrapper">
  <VennChart
    label="Abonnés par canal"
    data={[{"sets":["Courriel"],"value":120},{"sets":["Mobile"],"value":80},{"sets":["Courriel","Mobile"],"value":35}]}
  />
</div>

Trois ensembles

Trois cercles en triangle. Les sept zones (trois exclusives, trois intersections doubles, une triple) portent chacune leur valeur.

Trois ensembles

Design: 14
Dev: 18
Data: 10
Design ∩ Dev: 6
Design ∩ Data: 3
Dev ∩ Data: 5
Design ∩ Dev ∩ Data: 2

Voir le code (Svelte)

<div class="chart-wrapper">
  <VennChart
    label="Compétences de l'équipe"
    data={[{"sets":["Design"],"value":14},{"sets":["Dev"],"value":18},{"sets":["Data"],"value":10},{"sets":["Design","Dev"],"value":6},{"sets":["Design","Data"],"value":3},{"sets":["Dev","Data"],"value":5},{"sets":["Design","Dev","Data"],"value":2}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`VennChartArea[]`	requis
`label`	`string`	requis
`width`	`number`	`420`
`height`	`number`	`360`
`class`	`string`	optionnel

VennChartArea = { sets: string[]; value: number }. Une zone d'un seul ensemble (sets.length === 1) est un membre exclusif ; sets.length ≥ 2 décrit une intersection.

Accessibilité

`label` nomme le graphique (role=img). Chaque zone (ensemble → valeur) est rendue dans une liste accessible hors SVG. Au survol d'un cercle, un tooltip indique le nom de l'ensemble et sa taille totale.

Notes d'usage

Idéal pour montrer le chevauchement entre 2 ou 3 catégories (audiences, compétences, tags). Les zones dont value est non finie ou ≤ 0 sont ignorées ; les ensembles au-delà de 3 ne sont pas dessinés. La géométrie est déterministe : aucun aléatoire, layout identique entre frameworks.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-surface-default
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm