Nuage de points

Corrélation

Est-ce que plus de X fait vraiment bouger Y, ou poursuivez-vous une coïncidence ? Tracez vos points et la tendance, les groupes et les valeurs aberrantes ressortent tous en un coup d'œil, avec la taille des bulles qui porte une troisième variable gratuitement. La corrélation de Pearson revient dans getContext(), pour que vous puissiez citer le chiffre au lieu de scruter le nuage.

Example

canvas · responsive

Aller plus loin : Guide Insights·Guide DevTools

Le graphique ci-dessus utilise le même moteur dans chaque framework - seul le code d'intégration ci-dessous diffère.

Quand le choisir

• Tester une hypothèse. Est-ce que les dépenses font bouger la conversion ? Est-ce que l'ancienneté fait bouger le churn ? Le nuage, la tendance et les valeurs aberrantes répondent en un coup d'œil, et getContext() vous donne le r de Pearson à citer dans le compte-rendu.
• Repérer les segments avant que la moyenne ne les cache. Les groupes et les valeurs aberrantes ressortent d'un nuage de points bien avant d'apparaître dans un tableau récapitulatif - le premier regard de l'analyste sur tout nouveau jeu de données.
• Si un axe est le temps, utilisez un graphique en courbes - un nuage de points traite le temps comme un simple nombre et perd l'ordre de lecture que votre public attend.

Données volumineuses sur WebGPU Expérimental

ScatterChart possède un renderer="webgpu" optionnel qui dessine le nuage de points comme des cercles rendus par le GPU tandis que les axes, les libellés et les infobulles restent sur la couche SVG. Il est conditionné aux capacités du navigateur : sur un navigateur sans WebGPU, il bascule automatiquement sur canvas, et getContext().renderer indique lequel a effectivement dessiné.

La démo ci-dessous est un clin d'œil à la physique des particules : 50 000 événements dimuons simulés au-dessus d'un fond continu décroissant. Les bandes verticales nettes sont les résonances J/ψ, ψ(2S) et Υ(1S/2S/3S), la même structure qu'un spectre dimuon du LHC, et exactement le genre de nuage de points pour lequel un moteur GPU existe.

⚗️ Experimental - not yet stable. WebGPU rendering is an opt-in preview. It needs a WebGPU-capable browser (Chrome / Edge, or Safari 26+); everywhere else it falls back to canvas automatically. Axes, labels and tooltips stay on the SVG layer - only the data marks are painted on the GPU.

Heavy-data demo · 50 000 événements dimuons simulés… detecting

Faire defiler les annees

Le geste Gapminder : datez chaque point avec date, activez timeline, et regardez le nuage dériver année après année avec le bouton lecture et le curseur intégrés. Désactivé par défaut - sans opt-in, rien ne change.

Appuyez sur le bouton lecture sous le graphique : les points dérivent année après année. Faites glisser le curseur pour sauter à une année.

React

const ref = useRef<ScatterChartHandle>(null);

<ScatterChart ref={ref} {...props} timeline={{ speedMs: 1000, loop: true }} />;
// ref.current?.timeline() -> play() / pause() / seek(year) / stepForward()

Vue

<ScatterChart :options="{ ...props, timeline: { speedMs: 1000, loop: true } }" />

Svelte

<div use:scatterChart={{ ...props, timeline: { speedMs: 1000, loop: true } }}></div>

Angular

applyScatterChartProps(this.c.nativeElement, { ...props, timeline: { speedMs: 1000, loop: true } });

Web component

<michi-vz-scatter-chart id="c"></michi-vz-scatter-chart>
<script>
  const el = document.getElementById("c");
  el.timeline = { speedMs: 1000, loop: true };
  // el.getTimeline() -> play() / pause() / seek(year)
</script>

• speedMs règle le rythme, loop reboucle, autoplay: true démarre au montage, showControl: false masque la barre intégrée.
• Les valeurs glissent d'une période à l'autre par défaut (interpolate) ; ajustez le mouvement avec tweenMs et easing, ou passez interpolate: false pour des coupes nettes. Avec reduced motion, la coupe est toujours nette.
• Le contrôleur headless reste disponible : chart.timeline() expose play() / pause() / toggle() / seek(period) / stepForward() / stepBack(), plus onStep et formatPeriod dans la config pour une UI maison.
• Associez-le à pointLabels pour que chaque bulle garde son nom en mouvement ; un filter s'applique toujours à l'intérieur de chaque période.
• Les points sans date restent visibles à chaque période.

Utilisation

React

import { ScatterChart } from "@michi-vz/react";

export default () => <ScatterChart {...props} />; // props = the chart options

Vue

<script setup>
import { ScatterChart } from "@michi-vz/vue";
</script>

<template>
  <ScatterChart :options="props" />
</template>

Svelte

<script>
  import { scatterChart } from "@michi-vz/svelte";
</script>

<div use:scatterChart={props}></div>

Angular

// main.ts - register the elements once
import "@michi-vz/angular";
import { applyScatterChartProps } from "@michi-vz/angular";

// component (uses CUSTOM_ELEMENTS_SCHEMA)
// template: <michi-vz-scatter-chart #c></michi-vz-scatter-chart>
applyScatterChartProps(this.c.nativeElement, props);

Web component

<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>

<michi-vz-scatter-chart id="c"></michi-vz-scatter-chart>
<script>
  Object.assign(document.getElementById("c"), props); // dataSet/series, title, …
</script>

Vanilla JS

import { mountScatterChart } from "@michi-vz/core";

const chart = mountScatterChart(el, props);
chart.update(next);
chart.getContext(); // renderer-agnostic, LLM-ready
chart.destroy();

API

Les props sont typées comme ScatterChartProps dans @michi-vz/core. Communes à tous les graphiques : width, height, margin, colors / colorsMapping, renderer ("svg", "canvas", ou "webgpu" expérimental), highlightItems, disabledItems, et les callbacks on*. onChartDataProcessed / getContext() renvoient le ChartContext indépendant du moteur de rendu.