Files:

• components/mdx/BarChart.tsx
• components/mdx/PieChart.tsx
• components/mdx/RadarChart.tsx

<BarChart
  title="Latency"
  unit="ms"
  data={[
    { label: "p50", value: 12 },
    { label: "p95", value: 40 },
  ]}
/>

File: components/mdx/GraphPlot.tsx

Supports type="function" | "directed-graph" | "distribution" | "hash-ring".

<GraphPlot
  type="function"
  title="Sigmoid"
  description="Activation function"
  data={{ expression: "1/(1+exp(-x))", domain: [-6, 6], range: [0, 1], curveLabel: "σ(x)" }}
/>

File: components/mdx/LineChart.tsx

<LineChart
  title="Train vs Val Loss"
  xLabel="Epoch"
  yLabel="Loss"
  annotations={[{ x: 12, label: "overfit" }]}
  series={[
    { id: "train", label: "Train", data: [{ x: 1, y: 1.2 }, { x: 2, y: 0.9 }] },
    { id: "val", label: "Val", dashed: true, data: [{ x: 1, y: 1.3 }, { x: 2, y: 1.0 }] },
  ]}
/>

File: components/mdx/ScatterPlot.tsx

<ScatterPlot
  title="2D Projection"
  xLabel="PC1"
  yLabel="PC2"
  points={[
    { x: -1.2, y: 0.7, group: "A" },
    { x: 1.4, y: -0.9, group: "B" },
  ]}
  groups={{ A: { color: "var(--viz-blue)" }, B: { color: "var(--viz-green)", shape: "square" } }}
/>

File: components/mdx/Heatmap.tsx

<Heatmap
  title="Confusion Matrix"
  rows={["Cat", "Dog"]}
  columns={["Cat", "Dog"]}
  values={[
    [0.9, 0.1],
    [0.2, 0.8],
  ]}
/>