Interactive scatter
Categorical or paired values with symbols, labels, axes, and optional ripple emphasis.
- Purpose
- Compare point values across named categories or reveal relationships between two quantitative measures.
- Use when
- Position, symbol shape, or restrained ripple emphasis helps readers compare observations, clusters, or exceptional points.
- Avoid when
- Heavy overlap, precise lookup, or a stable reading order dominates; use the exact-value table or another summary.
- Equivalent data
- Every example includes a keyboard-readable table with each category, series, and value; ripple motion adds no data.
Exact scatter values
| Point | Series | Value |
|---|---|---|
| Swimming | Category A | 81 |
| Surfing | Category A | 87 |
| Shooting | Category A | 47 |
| Skating | Category A | 59 |
| Wrestling | Category A | 81 |
| Diving | Category A | 18 |
| Swimming | Category B | 25 |
| Surfing | Category B | 40 |
| Shooting | Category B | 56 |
| Skating | Category B | 0 |
| Wrestling | Category B | 94 |
| Diving | Category B | 11 |
12 points across 2 series.
@interactivescatter.Scatter(interactivescatter.Config{
Label: "Sports scores",
XAxis: []string{"Swimming", "Surfing", "Shooting", "Skating", "Wrestling", "Diving"},
Series: []interactivescatter.Series{{
Name: "Category A",
Data: []interactivescatter.Data{{Value: 81, Symbol: "roundRect", SymbolSize: 20, SymbolRotate: 10}},
}},
Width: "100%",
Height: "420px",
})Visible point labels
Right-positioned labels repeat every exact score while retaining the same round-rectangle symbol geometry.
Exact scatter values
| Point | Series | Value |
|---|---|---|
| Swimming | Category A | 62 |
| Surfing | Category A | 89 |
| Shooting | Category A | 28 |
| Skating | Category A | 74 |
| Wrestling | Category A | 11 |
| Diving | Category A | 45 |
| Swimming | Category B | 37 |
| Surfing | Category B | 6 |
| Shooting | Category B | 95 |
| Skating | Category B | 66 |
| Wrestling | Category B | 28 |
| Diving | Category B | 58 |
12 points across 2 series.
SeriesOptions: chart.SeriesOptions{Label: &chart.LabelOptions{Show: chart.Bool(true), Position: "right"}}Named axes and split lines
Sports and Score axis names plus split lines support aligned reading across the original six categories.
Exact scatter values
| Point | Series | Value |
|---|---|---|
| Swimming | Player A | 47 |
| Surfing | Player A | 47 |
| Shooting | Player A | 87 |
| Skating | Player A | 88 |
| Wrestling | Player A | 90 |
| Diving | Player A | 15 |
| Swimming | Player B | 41 |
| Surfing | Player B | 8 |
| Shooting | Player B | 87 |
| Skating | Player B | 31 |
| Wrestling | Player B | 29 |
| Diving | Player B | 56 |
12 points across 2 series.
Options: chart.ChartOptions{XAxis: &chart.AxisOptions{Name: "Sports", ShowSplitLine: chart.Bool(true)}, YAxis: &chart.AxisOptions{Name: "Score", ShowSplitLine: chart.Bool(true)}}Effect variant
The same Scatter component can add a default ripple to the six player dunk values; reduced-motion preference disables chart animation.
Exact scatter values
| Point | Series | Value |
|---|---|---|
| Kobe | Dunk | 37 |
| Jordan | Dunk | 31 |
| Iverson | Dunk | 85 |
| LeBron | Dunk | 26 |
| Wade | Dunk | 13 |
| McGrady | Dunk | 90 |
6 points across 1 series.
Variant: interactivescatter.VariantEffectPer-series ripple styles
Dunk uses period 4, scale 10, and stroke; Shoot uses period 3, scale 6, and fill. Both remain series in one Scatter component.
Exact scatter values
| Point | Series | Value |
|---|---|---|
| Kobe | Dunk | 94 |
| Jordan | Dunk | 63 |
| Iverson | Dunk | 33 |
| LeBron | Dunk | 47 |
| Wade | Dunk | 78 |
| McGrady | Dunk | 24 |
| Kobe | Shoot | 59 |
| Jordan | Shoot | 53 |
| Iverson | Shoot | 57 |
| LeBron | Shoot | 21 |
| Wade | Shoot | 89 |
| McGrady | Shoot | 99 |
12 points across 2 series.
Ripple: &chart.RippleOptions{Period: 4, Scale: 10, BrushType: "stroke"}Motion and emphasis
Ripple can call attention to points, but it does not add data. Keep it restrained; reduced-motion users receive the same exact values without animation.
Go API
v0.0.1The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.
github.com/araihu/goshtoso-charts/components/interactive/scatterEnabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.