Interactive parallel coordinates

Multivariate profiles across the same ordered numeric and categorical dimensions.

Purpose: Compare multivariate profiles across the same ordered dimensions.
Use when: You need to spot broad profile differences across a modest number of observations.
Avoid when: Exact values, many crossing lines, or unfamiliar dimensions dominate.
Equivalent data: An adjacent table preserves series, observation names, and every dimension value.

Daily air-quality measurements for Beijing, Guangzhou, and Shanghai across seven numeric dimensions and one categorical level.

Exact observations and values

Series	Observation	Date	AQI	PM2.5	PM10	CO	NO2	SO2	Level
Beijing	Day 1	1	55	9	56	0.46	18	6	Moderate
Beijing	Day 2	2	25	11	21	0.65	34	9	Good
Beijing	Day 3	3	56	7	63	0.3	14	5	Moderate
Beijing	Day 4	4	33	7	29	0.33	16	6	Good
Beijing	Day 5	5	42	24	44	0.76	40	16	Good
Beijing	Day 6	6	82	58	90	1.77	68	33	Moderate
Beijing	Day 7	7	74	49	77	1.46	48	27	Moderate
Beijing	Day 8	8	78	55	80	1.29	59	29	Moderate
Beijing	Day 9	9	267	216	280	4.8	108	64	Heavily
Beijing	Day 10	10	185	127	216	2.52	61	27	Moderately
Beijing	Day 11	11	39	19	38	0.57	31	15	Good
Beijing	Day 12	12	41	11	40	0.43	21	7	Good
Beijing	Day 13	13	64	38	74	1.04	46	22	Moderate
Beijing	Day 14	14	108	79	120	1.7	75	41	Lightly
Beijing	Day 15	15	108	63	116	1.48	44	26	Lightly
Beijing	Day 16	16	33	6	29	0.34	13	5	Good
Beijing	Day 17	17	94	66	110	1.54	62	31	Moderate
Beijing	Day 18	18	186	142	192	3.88	93	79	Moderately
Beijing	Day 19	19	57	31	54	0.96	32	14	Moderate
Beijing	Day 20	20	22	8	17	0.48	23	10	Good
Beijing	Day 21	21	39	15	36	0.61	29	13	Good
Guangzhou	Day 1	1	26	37	27	1.163	27	13	Good
Guangzhou	Day 2	2	85	62	71	1.195	60	8	Moderate
Guangzhou	Day 3	3	78	38	74	1.363	37	7	Moderate
Guangzhou	Day 4	4	21	21	36	0.634	40	9	Good
Guangzhou	Day 5	5	41	42	46	0.915	81	13	Good
Guangzhou	Day 6	6	56	52	69	1.067	92	16	Moderate
Guangzhou	Day 7	7	64	30	28	0.924	51	2	Moderate
Guangzhou	Day 8	8	55	48	74	1.236	75	26	Moderate
Guangzhou	Day 9	9	76	85	113	1.237	114	27	Moderate
Guangzhou	Day 10	10	91	81	104	1.041	56	40	Moderate
Guangzhou	Day 11	11	84	39	60	0.964	25	11	Moderate
Guangzhou	Day 12	12	64	51	101	0.862	58	23	Moderate
Guangzhou	Day 13	13	70	69	120	1.198	65	36	Moderate
Guangzhou	Day 14	14	77	105	178	2.549	64	16	Moderate
Guangzhou	Day 15	15	109	68	87	0.996	74	29	Lightly
Guangzhou	Day 16	16	73	68	97	0.905	51	34	Moderate
Guangzhou	Day 17	17	54	27	47	0.592	53	12	Moderate
Guangzhou	Day 18	18	51	61	97	0.811	65	19	Moderate
Guangzhou	Day 19	19	91	71	121	1.374	43	18	Moderate
Guangzhou	Day 20	20	73	102	182	2.787	44	19	Moderate
Guangzhou	Day 21	21	73	50	76	0.717	31	20	Moderate
Shanghai	Day 1	1	91	45	125	0.82	34	23	Moderate
Shanghai	Day 2	2	65	27	78	0.86	45	29	Moderate
Shanghai	Day 3	3	83	60	84	1.09	73	27	Moderate
Shanghai	Day 4	4	109	81	121	1.28	68	51	Lightly
Shanghai	Day 5	5	106	77	114	1.07	55	51	Lightly
Shanghai	Day 6	6	109	81	121	1.28	68	51	Lightly
Shanghai	Day 7	7	106	77	114	1.07	55	51	Lightly
Shanghai	Day 8	8	89	65	78	0.86	51	26	Moderate
Shanghai	Day 9	9	53	33	47	0.64	50	17	Moderate
Shanghai	Day 10	10	80	55	80	1.01	75	24	Moderate
Shanghai	Day 11	11	117	81	124	1.03	45	24	Lightly
Shanghai	Day 12	12	99	71	142	1.1	62	42	Moderate
Shanghai	Day 13	13	95	69	130	1.28	74	50	Moderate
Shanghai	Day 14	14	116	87	131	1.47	84	40	Lightly
Shanghai	Day 15	15	108	80	121	1.3	85	37	Lightly
Shanghai	Day 16	16	134	83	167	1.16	57	43	Lightly
Shanghai	Day 17	17	79	43	107	1.05	59	37	Moderate
Shanghai	Day 18	18	71	46	89	0.86	64	25	Moderate
Shanghai	Day 19	19	97	71	113	1.17	88	31	Moderate
Shanghai	Day 20	20	84	57	91	0.85	55	31	Moderate
Shanghai	Day 21	21	87	63	101	0.9	56	41	Moderate

Usage Example

@interactiveparallel.Parallel(interactiveparallel.Config{
  Label: "Multi Series parallel coordinates",
  Dimensions: []interactiveparallel.Dimension{
    {Name: "Date", Range: &interactiveparallel.Range{Max: chart.Float(31)},
      Inverse: true, NameLocation: interactiveparallel.NameStart},
    {Name: "AQI"}, {Name: "PM2.5"}, {Name: "PM10"}, {Name: "CO"},
    {Name: "NO2"}, {Name: "SO2"},
    {Name: "Level", Categories: []string{
      "Good", "Moderate", "Lightly", "Moderately", "Heavily", "Severely",
    }},
  },
  Series: []interactiveparallel.Series{
    {Name: "Beijing", Observations: beijingObservations},
    {Name: "Guangzhou", Observations: guangzhouObservations},
    {Name: "Shanghai", Observations: shanghaiObservations},
  },
  Width: "900px", Height: "500px",
  Options: chart.ChartOptions{
    Title: &chart.TitleOptions{Text: "Multi Series"},
  },
  Style: charttheme.Style{Class: "max-w-full"},
})

Comparable dimensions

Each observation has one value for every declared dimension. Keep dimension names and scales clear before comparing paths.

Go API

v0.0.1

The 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/parallel

Enabled, 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.

Open v0.0.1 API