Composant · Données

ScatterPlot

Documenté

Nuage de points : deux axes numériques (graduations « jolies » automatiques), points colorés par tone (palette data-vis), tooltip au survol et liste accessible des coordonnées hors SVG.

Exemple

Corrélation démo

A: x 1, y 2
B: x 2, y 3.5
C: x 3, y 2.8
D: x 4, y 5
E: x 5, y 4.2
F: x 6, y 6.1
G: x 7, y 5.5
Annotation: Cible
Annotation: Médiane
Annotation: Pic

Voir le code (Svelte)

<div class="docs-scatter-box">
  <ScatterPlot
    data={[{"x":1,"y":2,"label":"A"},{"x":2,"y":3.5,"label":"B"},{"x":3,"y":2.8,"label":"C","tone":"category2"},{"x":4,"y":5,"label":"D","tone":"category2"},{"x":5,"y":4.2,"label":"E","tone":"category3"},{"x":6,"y":6.1,"label":"F","tone":"category3"},{"x":7,"y":5.5,"label":"G","tone":"category4"}]}
    label="Corrélation démo"
    xLabel="Effort"
    yLabel="Valeur"
    annotations={[{"kind":"region","axis":"y","from":4,"to":6,"label":"Cible"},{"kind":"line","axis":"x","value":4,"label":"Médiane"},{"kind":"point","x":6,"y":6.1,"label":"Pic"}]}
    dataLabels
    hoverKey="D"
    keyboardNav
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ScatterPlotDatum[]`	requis
`label`	`string`	requis (a11y)
`xLabel` / `yLabel`	`string`	optionnel
`width` / `height`	`number`	`480` / `280`
`radius`	`number`	`5`
`centroids`	`ScatterPlotCentroid[]`	optionnel
`annotations`	`ChartAnnotation[]`	optionnel
`dataLabels`	`boolean \| { format?, position? }`	`false`
`hoverKey` / `onHoverKeyChange`	`string \| null` / `(key) => void`	optionnel
`keyboardNav` / `onSelectKey`	`boolean` / `(key) => void`	optionnel

ScatterPlotDatum = { x, y, label?, tone?, r? } : r est un rayon par point, borné à 32 (sinon radius global) ; tone est le ton par point (ton de cluster), sinon cycle de la palette. ScatterPlotCentroid = { x, y, tone?, label? } : marqueurs de centroïdes (anneau + croix, plus grands que les points) dessinés au-dessus des points, intégrés au domaine des axes et annoncés « Centroïde : (x, y) » dans la liste accessible.