TuxChartScatter

Interactive Telemetry Lab

Scatter Plot & Correlation Workbench

Presets:

Operations crew (16) R² = 0.92

Properties Inspector4 configurable knobs

Telemetry Datasetdataset

Color Palettepalette

Distinct Geometric MarkersdistinctMarkers

true

Regression Trendline (R²)trendline

true

Dynamic Component Syntax

<tux-chart-scatter
  x-label="Hours of training"
  y-label="Errors per shift"
  :series="crewTraining"
  trendline
/>

accessible · cvd geometric markers

Universal CVD & Distinct Geometric Markers

Pass palette="cvd" and distinctMarkers so each series displays a unique geometric glyph (circle ●, square ■, triangle ▲, diamond ◆, cross ✚, star ★). The legend swatches pair the exact marker glyph and regression rule, guaranteeing that observations from overlapping series can be disambiguated regardless of color perception.

Urban corridors (9) R² = 0.88
Rural corridors (8) R² = 0.79

<!-- Okabe-Ito CVD palette with unique geometric glyphs per series -->
<tux-chart-scatter
  x-label="Vehicle miles / capita"
  y-label="Safety score"
  :series="corridorData"
  palette="cvd"
  distinct-markers
  trendline
/>

flagship · single series + trendline

Training hours vs errors

Negative slope shows the expected relationship — more training, fewer errors. The R² shows how tightly the dots cluster around the line.

Operations crew (16) R² = 0.92

<tux-chart-scatter
  x-label="Hours of training"
  y-label="Errors per shift"
  :series="crewTraining"
  trendline
/>

multi-series · per-series trendlines

Urban vs rural corridors

Each series gets its own trendline + R² in the legend. The two groups show the same direction of correlation but at different levels — common in transportation data.

Urban corridors (9) R² = 0.88
Rural corridors (8) R² = 0.79

<tux-chart-scatter
  x-label="Vehicle miles / capita"
  y-label="Safety score"
  :series="corridorData"
  trendline
/>

bubble · variable point size

Project portfolio

Pass size on individual points for a bubble-chart- style third dimension. The native SVG <title> on each circle gives you a free hover-tooltip with the point label + values.

Projects (size = budget M$) (7)

<tux-chart-scatter
  x-label="Months elapsed"
  y-label="Completion score"
  :series="bubbleData"
/>