Spreidingsdiagram

Correlatie

Beweegt meer van X écht Y, of jaag je een toeval na? Plot je punten en de trend, de clusters en de uitschieters komen allemaal in één oogopslag naar boven, waarbij de bubbelgrootte er gratis een derde variabele bij geeft. De Pearson-correlatie komt terug in getContext(), zodat je het getal kunt citeren in plaats van naar de wolk te turen.

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

De grafiek hierboven is dezelfde engine in elk framework - alleen de integratiecode hieronder verschilt.

Wanneer kies je deze

• Een hypothese testen. Beweegt uitgavenbudget de conversie? Beweegt anciënniteit het verloop? De wolk, de trend en de uitschieters geven in één oogopslag antwoord, en getContext() levert je de Pearson-r die je in het rapport kunt citeren.
• Segmenten vinden voordat het gemiddelde ze verbergt. Clusters en uitschieters springen er in een spreidingsdiagram veel eerder uit dan in een samenvattende tabel - de eerste blik van elke analist op een nieuwe dataset.
• Is één as tijd, gebruik dan een lijndiagram - een spreidingsdiagram behandelt tijd als zomaar een getal en verliest de leesvolgorde die je publiek verwacht.

Veel data op WebGPU Experimenteel

ScatterChart heeft een optionele renderer="webgpu" die de puntenwolk tekent als GPU-instanced cirkels, terwijl assen, labels en tooltips op de SVG-laag blijven. Dit is capability-gated: in een browser zonder WebGPU wordt automatisch teruggevallen op canvas, en getContext().renderer rapporteert wat daadwerkelijk is getekend.

De demo hieronder is een knipoog naar de deeltjesfysica: 50.000 gesimuleerde dimuon-events boven een dalende continuümachtergrond. De scherpe verticale banden zijn de J/ψ-, ψ(2S)- en Υ(1S/2S/3S)-resonanties, dezelfde structuur die een LHC-dimuonspectrum laat zien, en precies het soort puntenwolk waarvoor een GPU-renderer bestaat.

⚗️ 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 gesimuleerde dimuon-events… detecting

Speel door de jaren heen

De Gapminder-truc: geef elk punt een date, zet timeline aan en zie de puntenwolk jaar na jaar verschuiven met de ingebouwde afspeelknop en scrubber. Standaard uit - zonder opt-in verandert er niets.

Druk op de afspeelknop onder de grafiek: de punten verschuiven jaar na jaar. Sleep de scrubber om naar een jaar te springen.

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 bepaalt het tempo, loop begint opnieuw, autoplay: true start bij mounten, showControl: false verbergt de ingebouwde balk.
• Waarden glijden standaard tussen periodes (interpolate); stem de beweging af met tweenMs en easing, of zet interpolate: false voor harde overgangen. Met reduced motion is de overgang altijd hard.
• De headless controller is altijd beschikbaar: chart.timeline() biedt play() / pause() / toggle() / seek(period) / stepForward() / stepBack(), plus onStep en formatPeriod in de config voor eigen UI.
• Combineer met pointLabels zodat elke bubbel een naam houdt terwijl hij beweegt; een filter blijft binnen elke periode gelden.
• Punten zonder date blijven in elke periode zichtbaar.

Gebruik

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

Props zijn getypeerd als ScatterChartProps in @michi-vz/core. Gedeeld door alle grafieken: width, height, margin, colors / colorsMapping, renderer ("svg", "canvas", of experimenteel "webgpu"), highlightItems, disabledItems, en de on*-callbacks. onChartDataProcessed / getContext() retourneren de renderer-agnostische ChartContext.