Components / AI Data Visualization

AI Confusion Matrix

A confusion matrix visualization for AI classification models with accuracy percentages and color intensity.

Live Preview — ai-accuracy-matrix-01

Classification Confusion Matrix

Cat
Dog
Robot
Cat
90
12
12
Dog
6
85
11
Robot
8
8
80

F1 Score

0.962

Precision

98.4%

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-accuracy-matrix-01.tsx 
"use client";

import React from "react";

const matrix = [
    { p: 0.94, actual: "Cat", pred: "Cat" },
    { p: 0.02, actual: "Cat", pred: "Dog" },
    { p: 0.88, actual: "Dog", pred: "Dog" },
    { p: 0.04, actual: "Dog", pred: "Robot" },
    { p: 0.96, actual: "Robot", pred: "Robot" },
];

export default function AIConfusionMatrix() {
    const getOpac = (val: number) => Math.max(0.1, val);

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-sm mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-xs font-black text-zinc-500 uppercase tracking-widest">Classification Confusion Matrix</h3>
            </div>

            <div className="grid grid-cols-4 gap-1">
                {/* Labels */}
                <div />
                {["Cat", "Dog", "Robot"].map(l => <div key={l} className="text-[10px] font-black text-zinc-400 text-center uppercase tracking-tighter">{l}</div>)}

                {["Cat", "Dog", "Robot"].map((row, i) => (
                    <React.Fragment key={row}>
                        <div className="text-[10px] font-black text-zinc-400 flex items-center h-12 uppercase tracking-tighter">{row}</div>
                        {[0, 1, 2].map((col) => {
                            const val = i === col ? 0.9 - i * 0.05 : 0.05 + Math.random() * 0.1;
                            return (
                                <div
                                    key={col}
                                    className="aspect-square w-12 rounded-sm relative flex items-center justify-center"
                                    style={{ backgroundColor: `rgba(16, 185, 129, ${getOpac(val)})` }}
                                >
                                    <span className="text-[10px] font-black text-zinc-900 dark:text-white">{(val * 100).toFixed(0)}</span>
                                </div>
                            );
                        })}
                    </React.Fragment>
                ))}
            </div>

            <div className="mt-8 flex items-center justify-between">
                <div className="space-y-1">
                    <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-tighter">F1 Score</p>
                    <p className="text-sm font-black text-zinc-900 dark:text-zinc-100">0.962</p>
                </div>
                <div className="space-y-1 text-right">
                    <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-tighter">Precision</p>
                    <p className="text-sm font-black text-emerald-500">98.4%</p>
                </div>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
getOpac() val: number
AIConfusionMatrix() None

Variables

All variable declarations found in this component.

Name Kind Value
matrix const [
val const i === col ? 0.9 - i * 0.05 : 0.05 + Math.random() * 0.1

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<React.Fragment> 1× Library react
<div> 10× Native Native HTML
<h3> 1× Native Native HTML
<p> 4× Native Native HTML
<span> 1× Native Native HTML

Related Components

  • AI Confidence Gauge — A gauge chart showing AI prediction confidence levels with color gradients from red (low) to green (high).
  • AI Embedding Scatter Plot — A 2D scatter plot visualizing AI embedding clusters with interactive hover tooltips and cluster labels.
  • AI Training Progress — A training progress dashboard showing loss curves, epoch progress, and training metrics in real-time.
  • AI Attention Heatmap — A heatmap visualization of transformer attention weights showing token-to-token relationships.
  • AI Token Distribution — A bar chart showing token probability distributions from AI model outputs with top-k visualization.
  • AI Model Comparison Radar — A radar chart comparing multiple AI models across dimensions like speed, accuracy, cost, and reasoning.