Composant · Données

BellCurveChart

Documenté

BellCurveChart est un graphique statistique. À partir d'un échantillon de nombres bruts, il calcule la moyenne μ et l'écart-type d'échantillon σ (n-1), puis trace la densité de la loi normale (la « courbe en cloche ») sur l'intervalle μ-4σ → μ+4σ, sous forme d'aire lissée. Des repères marquent μ et les écarts μ±σ, μ±2σ.

Exemples

Distribution de base

Fournissez un échantillon de valeurs ; μ et σ sont calculés et la densité normale est tracée.

Distribution de base

Moyenne (μ): 78.65
Écart-type (σ): 6.99
Taille de l'échantillon (n): 20

Voir le code (Svelte)

<div class="chart-wrapper">
  <BellCurveChart
    label="Distribution des scores d'examen"
    tone="category1"
    data={[62,68,71,73,74,75,76,77,78,79,80,80,81,82,83,84,85,86,88,91]}
  />
</div>

Teinte personnalisée

Passez `tone` pour changer la couleur de la courbe et de l'aire.

Teinte personnalisée

Moyenne (μ): 105.94
Écart-type (σ): 10.69
Taille de l'échantillon (n): 16

Voir le code (Svelte)

<div class="chart-wrapper">
  <BellCurveChart
    label="Distribution des temps de réponse (ms)"
    tone="category5"
    data={[88,92,95,97,99,101,103,104,106,108,110,112,115,118,121,126]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`number[]`	requis
`label`	`string`	requis
`tone`	`"category1" \| ... \| "category8"`	`"category1"`
`smooth`	`boolean`	`true`
`intervals`	`number`	`64`
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

data = number[] (échantillon brut) · BellCurveChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique ; l'aria-label y ajoute μ, σ et la taille n de l'échantillon. La liste accessible résume μ, σ et n. Un échantillon de moins de 2 valeurs, ou un écart-type nul, rend un état vide accessible sans planter.

Notes d'usage

`data` est un tableau de nombres bruts (l'échantillon), pas une courbe déjà agrégée : le composant fait lui-même le calcul de μ et σ. Les valeurs non finies sont ignorées. `intervals` règle la finesse d'échantillonnage de la courbe.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse