Competitor Scoring Visualizations with Recharts

In youteacher_analyze, the competitive landscape is rendered as two client-side React charts built on Recharts, plus a small Mermaid wrapper for diagrams. Both charts answer the same question — where each competitor sits in the ESL-teaching job market — but they encode it differently: one as a multi-dimension radar, one as a two-axis scatter.

Two chart shapes

CompetitorHexagonChart is an RPG-style "character stats" radar. It plots 7 competitors across 6 dimensions — Verification/Trust, Community, Jobs Listed, Candidate Pool, Technology, and Company Size — with each dimension scored 0–100. It is composed from Recharts primitives: RadarChart over a shared radarData array, PolarGrid, PolarAngleAxis keyed on the dimension name, PolarRadiusAxis fixed to a [0, 100] domain, and one <Radar> series per competitor. Each competitor carries its own stroke/fill color, drawn semi-transparent so overlapping shapes stay readable.

CompetitivePositioningChart is a ScatterChart on two axes — Technology Level (x) and Trust Level (y), both [0, 100]. Each competitor is one point, with a per-point color applied via <Cell>. Dashed reference lines split the plane into quadrants, with labelled "Target Zone" (high tech, high trust) and "Danger Zone" (low tech, low trust) regions. A custom LabelList renders each competitor's name above its point, and a custom Tooltip shows the exact tech/trust scores on hover.

Score co-located with evidence

The distinctive design choice is that every numeric score travels with the qualitative evidence that produced it. In the hexagon chart, the numbers in radarData are not standalone — a parallel competitors array holds, per competitor, an evidence object with one short string per dimension (verification, community, jobsListed, candidatePool, technology, companySize). The component renders those evidence strings back out beneath the chart, so a reader can see why a competitor scored what it did, not just the shape.

Below the evidence, a scoring rubric makes the qualitative→quantitative mapping explicit: each dimension is banded (0–20, 20–40, … 80–100) with a plain-language definition of what that band means and which competitor lands there and why. The scores are therefore presented as derived and defensible, not asserted — the chart is the summary, the rubric is the method, and the evidence strings are the receipts.

Interaction

The hexagon chart keeps a selectedCompetitors state (all selected by default). A clickable legend on the left toggles each competitor in and out; only the selected ones are passed as <Radar> series and echoed in the evidence list. This lets the reader isolate two or three competitors and compare their shapes without the radar becoming an unreadable tangle.

Mermaid wrapper

MermaidDiagram is a thin client component: it takes a chart string, calls mermaid.initialize then mermaid.render inside an effect, and injects the resulting SVG into a ref'd <div>. It generates a random per-diagram id so multiple diagrams on one page don't collide. It is the general-purpose diagram escape hatch alongside the two bespoke Recharts visualizations.

Why it's built this way

A radar and a scatter are the two natural encodings for "many competitors, compared." The radar answers what is each one's profile across all dimensions; the scatter answers where do they cluster on the two axes that matter most. Binding the scores to inline evidence and an explicit rubric is what keeps the visualization honest — it turns a subjective competitive read into something a reader can audit dimension by dimension.