Components / AI Data Visualization

AI Embedding Scatter Plot

A 2D scatter plot visualizing AI embedding clusters with interactive hover tooltips and cluster labels.

Live Preview — ai-embedding-plot-01

Embedding Space (t-SNE)

Cluster A
Cluster B
Cluster C

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-embedding-plot-01.tsx 
"use client";

import React from "react";

const dots = Array.from({ length: 40 }).map(() => ({
    x: Math.random() * 100,
    y: Math.random() * 100,
    group: Math.floor(Math.random() * 3),
    label: "Vector Node #" + Math.floor(Math.random() * 1000)
}));

export default function AIEmbeddingPlot() {
    const colors = ["bg-blue-500", "bg-violet-500", "bg-emerald-500"];

    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-xl mx-auto">
            <div className="flex items-center justify-between mb-6">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Embedding Space (t-SNE)</h3>
                <div className="flex gap-4">
                    {["Cluster A", "Cluster B", "Cluster C"].map((c, i) => (
                        <div key={c} className="flex items-center gap-1.5">
                            <div className={`h-2 w-2 rounded-full ${colors[i]}`} />
                            <span className="text-[10px] font-bold text-zinc-500 uppercase">{c}</span>
                        </div>
                    ))}
                </div>
            </div>

            <div className="relative h-64 w-full bg-zinc-50/50 dark:bg-zinc-900/50 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden group">
                {dots.map((dot, i) => (
                    <div
                        key={i}
                        className={`absolute h-2 w-2 rounded-full border border-white dark:border-zinc-800 transition-all duration-500 hover:scale-150 cursor-crosshair shadow-sm ${colors[dot.group]}`}
                        style={{
                            left: `${dot.x}%`,
                            top: `${dot.y}%`,
                            transitionDelay: `${i * 10}ms`
                        }}
                    >
                        <div className="hidden group-hover:block absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-zinc-900 text-white text-[9px] font-bold whitespace-nowrap z-10 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                            {dot.label}
                        </div>
                    </div>
                ))}
                {/* Simple axes */}
                <div className="absolute left-4 bottom-4 w-12 h-[1px] bg-zinc-300 dark:bg-zinc-700" />
                <div className="absolute left-4 bottom-4 w-[1px] h-12 bg-zinc-300 dark:bg-zinc-700" />
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIEmbeddingPlot() None

Variables

All variable declarations found in this component.

Name Kind Value
dots const Array.from({ length: 40 }).map(() => ({
colors const ["bg-blue-500", "bg-violet-500", "bg-emerald-500"]

JSX Tags Usage

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

Tag Count Type Source
<div> 10× Native Native HTML
<h3> 1× 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 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.
  • AI Pipeline Flow — A flowchart visualization showing AI data pipeline stages with status indicators and throughput metrics.