shivamkole1969/ai-ml-animation-academy

Data & AI Animation Academy

A free, interactive lab for the whole data stack, taught as motion rather than walls of text. Three career tracks — AI/ML Engineering, Data Engineering and Data Analytics — each running from basics through to what breaks in production, with an animation, an interview answer and a production recipe on every concept. Complex topics are drawn as calm, readable moving systems instead of crowded static diagrams.

Built for students, professionals, and interview candidates who want to understand a concept visually — then be able to explain it and reason about how it behaves in production.

Learn the concept visually, understand the math/code, answer interview questions confidently, and know how it behaves in production.

What's included

• —Three career tracks, chosen on the home page and switchable at any time from the header:
• —AI/ML Engineering (Data Science) — 157 concepts: maths, Python, SQL, classical ML, deep learning, NLP, transformers, RAG, agents, agentic engineering, MLOps/LLMOps and the Advanced ceiling.
• —Data Engineering — 50 concepts: modelling and storage foundations, pipelines and orchestration, streaming and CDC, distributed processing, and running a data platform in production.
• —Data Analytics — 37 concepts: reading data honestly, analytics SQL, metric design, experimentation, and dashboards and storytelling.
• —208 concepts in total, every one animated. A concept belongs to a section, and a section belongs to one or more tracks — so SQL, Python, statistics and the cloud are shared rather than duplicated, and you only ever learn each concept once.
• —An interactive 3D relationship graph on the home page showing how Data Engineering, Data Analysis, Data Science and AI actually connect — drag to orbit, click a role to see its lanes, click a lane to see every concept inside it.
• —A reusable SVG SystemAnimation engine with slow step playback, visible active paths, particles, in-node icons, live overlays, and production-style service diagrams.
• —An enterprise Agentic RAG on AWS animation using API Gateway, Cognito, Lambda, Bedrock Agent, Claude, S3, Bedrock Knowledge Base, OpenSearch Serverless, Bedrock Guardrails, and CloudWatch.
• —Coverage of modern topics: multi-head / flash attention, RoPE, GQA, context windows, speculative decoding, structured output, citations & grounding, GraphRAG, chunking, reranking, semantic cache, ReAct agents, agent memory / planning / reflection, MCP, checkpointing, model monitoring, feature stores, data drift, and training-serving skew.
• —A redesigned home page with per-section colored headers, a category navigation grid, flagship animations, and a "how it works" flow.
• —Mixed sans-serif + JetBrains Mono typography (Plus Jakarta Sans for reading, mono for machine/concept tags).

Features

• —Interactive concept animations with play / pause / reset / speed / step controls and a scrubbable step timeline
• —Step-by-step explanations synced to the current animation step
• —70/20/10 concept layout: animation, explanation, utilities
• —Interview mode with 30-second and 2-minute answers, follow-ups, and common mistakes
• —Production mode with trade-offs, monitoring, cost, latency, and failure cases
• —Mini quizzes, progress tracking, and saved concepts via localStorage
• —Dark/light theme, responsive layout, deep-linkable library filters (?track= / ?category=)
• —No login, no paywall

Animation design principles

• —Dark background with high contrast.
• —Service/concept icons inside nodes so learners remember function by shape and role.
• —Color-coded node categories (security, intelligence, storage, monitoring, data, ML, IO, checks, outputs).
• —Step-by-step paths instead of showing every relationship at once.
• —Smooth particles and contextual overlays for retrieved chunks, citations, checks, and route decisions.
• —Production notes covering reliability, latency, monitoring, cost, and failure modes.

Learning tracks

1. 1.ML Foundations
2. 2.Classical Machine Learning
3. 3.Deep Learning
4. 4.NLP and Embeddings
5. 5.Transformers and LLMs
6. 6.RAG and Retrieval Systems
7. 7.Agentic AI
8. 8.Applied ML
9. 9.MLOps and LLMOps
10. 10.Production GenAI Systems
11. 11.Interview Preparation

Running locally

npm install
npm run dev

Then open the local Vite URL shown in your terminal.

Building

npm run build      # Vite build → dist/
npm run preview    # preview the production build

The build writes a static app (hashed, minified assets) to dist/.

Note: if the project path contains a : character, npm's bin shims can break. Invoke Vite directly in that case, e.g. node node_modules/vite/bin/vite.js build.

Deployment

Runs as a Docker-based Hugging Face Space. The Dockerfile copies the pre-built dist/ and serves it statically, so dist/ is committed to the repo and rebuilt before each push. The Space config lives in the YAML front matter at the top of this file.

Project structure

ai-ml-animation-academy/
  README.md
  package.json
  vite.config.js
  index.html
  demo.html
  Dockerfile
  public/
  src/
    main.js
    router.js
    animation/
      engine/          # SystemAnimation SVG engine
      scenes/          # hand-authored rich scenes
      flowToScene.js   # derive scenes from concept flow data
    animations/        # canvas-based concept animations
    components/
    data/
      concepts.js      # 89 curated concepts
      tracks.js
    engine/
    pages/
    styles/
    utils/

Adding a concept

The animation system is intentionally code-driven. To add a concept, either define a scene in src/animation/scenes/ for fully custom motion, or add a flow + steps block in src/data/concepts.js for a reusable pipeline animation rendered through the shared engine. See SCENE_AUTHORING.md for details.