visualization · native chart

TuxChartScatter

Correlation plot — x vs y, one dot per observation. Optional linear-regression trendline with R² readout. Use to answer "does X relate to Y?" questions — training vs error rate, density vs safety, age vs sentiment. Only chart in the family where both axes need names.

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.

51015205101520Hours of trainingErrors per shiftOperations crew: (2, 22)Operations crew: (3, 18)Operations crew: (4, 19)Operations crew: (5, 16)Operations crew: (6, 15)Operations crew: (7, 13)Operations crew: (8, 11)Operations crew: (9, 12)Operations crew: (10, 9)Operations crew: (11, 8)Operations crew: (12, 7)Operations crew: (13, 6)Operations crew: (14, 7)Operations crew: (16, 5)Operations crew: (18, 4)Operations crew: (20, 3)
  • 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.

607080904050607080Vehicle miles / capitaSafety scoreUrban corridors: (40, 78)Urban corridors: (50, 82)Urban corridors: (55, 88)Urban corridors: (60, 86)Urban corridors: (65, 91)Urban corridors: (70, 89)Urban corridors: (75, 93)Urban corridors: (80, 92)Urban corridors: (85, 94)Rural corridors: (35, 62)Rural corridors: (42, 68)Rural corridors: (48, 64)Rural corridors: (54, 72)Rural corridors: (60, 75)Rural corridors: (68, 71)Rural corridors: (75, 80)Rural corridors: (82, 78)
  • 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.

70758085901015202530Months elapsedCompletion scoreProjects (size = budget M$) · Houston freight: (12, 88)Projects (size = budget M$) · I-35: (24, 76)Projects (size = budget M$) · DFW connected vehicle: (8, 92)Projects (size = budget M$) · Rural broadband: (18, 68)Projects (size = budget M$) · Port mobility: (30, 84)Projects (size = budget M$) · Workforce: (14, 72)Projects (size = budget M$) · Border crossing: (22, 80)
  • Projects (size = budget M$) (7)
<tux-chart-scatter
  x-label="Months elapsed"
  y-label="Completion score"
  :series="bubbleData"
/>