Data visualisation

Almost everything the dashboard plots is one of three shapes: a profile across the seven categories, a rating over time, or a distribution of scores. The rating ramp already is the colour scale — the system needs no categorical palette.

The three charts

If a question needs a fourth shape, it is usually two of these questions in a trench coat. Split it.

Radar — the category profile

Seven axes, fixed order, always all seven. The radar is the only chart that shows the shape of an event in one read, and it is the reason the category order is a constant: an organiser learns the shape of their own event and recognises it next season.

Rules

• All seven axes, always, in the canonical order. Dropping an unrated category changes the shape and makes two events incomparable. An unrated category plots at the centre and its label goes text-muted.
• The polygon is not tier-coloured. It spans seven categories, so no single tier applies to it. Ink fill at 10%, ink stroke. Colour here would be decoration pretending to be data.
• Rings at every whole point, 1 to 5. Hairline, unlabelled except the outer ring. A radar without rings is a shape with no scale.
• At most two series. Three polygons is a plate of spaghetti. For more, use small multiples — one radar per event, same size, same order.
• Never fill the comparison series. Dashed stroke only, so the two never fight for the same pixels.

Line — the trend

One event over its editions, or one category over time. This is the chart most likely to be quoted at a sponsor, which is why the y-axis rule below is not negotiable.

Rules

• Full scale, 0 to 5, every time. No auto-fit, no "nice" domain, no exceptions.
• Ink line, 2px, with a dot at every real data point. The dots are what say "measured", not "interpolated". The most recent point is primary and carries its value as a label.
• Gaps are gaps. A missing edition breaks the line; it is never bridged. Absence is a state, not zero — the same rule as the ScoreBar neutral.
• Tier bands are opt-in and subtle. When shown they are the rating ramp at 8%, behind the grid, unlabelled inside the plot; the legend names them. Off by default: most trend questions are about direction, not tier.
• No area fill, no smoothing, no dual axes. A smoothed line invents readings between editions that nobody took.

Bar — the distribution

Rules for every chart

• Axis and grid are hairlines. --color-border, 1px, no ticks. Labels are text-caption in text-muted.
• Rating data uses the rating ramp and nothing else. Never a generic blue-to-red gradient: the tier boundaries are meaningful and a continuous ramp hides them.
• Every chart has a table. Colour is not accessible information. Either a visible table or a <details> holding one, plus role="img" and an aria-label that states the actual values.
• No gradients, no drop shadows, no 3D, no animation on load. A chart that animates in makes the reader wait to read a number.
• Charts are SVG, sized by their container. No canvas, no chart library — the three shapes above are forty lines of geometry each, and a library would bring its own palette, its own type scale and its own opinions about tooltips.