一、为什么做这件事学习计算机科学最大的痛苦是什么黑箱太多。你知道 Transformer 很强但 Attention 的 QKV 矩阵到底怎么旋转的你知道 Raft 能达成共识但 Leader 选举的每一轮投票到底怎么流转的你知道 B 树是数据库索引的核心但节点分裂时数据到底怎么移动的文档是静态的论文是抽象的视频是单向的。你需要的是能动手调参数、能看见数据流动、能反复试错的东西。所以就有了 TWThe Wheel——一套纯前端、零依赖、打开即用的交互式可视化项目集。每一个项目都把一个计算机科学概念拆成可交互的零件让你看见它怎么运作。二、项目概览快速统计维度数量可视化实验室170 个配套工具30 个交互式模块1360外部依赖0代码总大小~13.5 MB技术栈纯 HTML/CSS/JS SVG许可证MIT总入口AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs打开即用无需安装任何依赖无需注册无需联网加载后离线可用。三、170 个可视化实验室分类导航分类数量代表项目AI / 机器学习72LLM、Transformer、Diffusion、MoE、Agent、RAG、RLHF、多模态Agent...CS 系统39分布式系统、数据库、编译器、操作系统、网络、区块链、云原生...CS 理论22复杂性理论、类型论、Lambda演算、范畴论、形式化验证、自动机...交叉学科37图形学、信息论、博弈论、机器人学、信号处理、量子计算...精选项目展示每个可视化实验室包含8 个交互模块以下是部分精选AI 方向#01 - #72编号项目核心内容#07Transformer 可视化位置编码热力图、Self-Attention 矩阵旋转、多头注意力并行、FFN 层、LayerNorm#03LLM 可视化Tokenizer 分词、KV-Cache 增长、注意力可视化、采样策略对比#05Agent 可视化ReAct 循环、工具调用流程、多智能体协作、记忆系统#08Diffusion 可视化前向加噪过程、反向去噪步骤、U-Net 结构、调度器对比#09RLHF 可视化PPO 裁剪机制、奖励模型训练、DPO 对比、安全对齐#15多模态融合CLIP、ViT、VQA、音频融合、跨模态检索#343D 视觉与神经渲染NeRF、Gaussian Splatting、点云、3D 重建系统方向#36 - #74编号项目核心内容#36分布式系统Raft 共识投票动画、Paxos 两阶段、分布式事务 2PC、CRDT 合并#37数据库内核BTree 分裂动画、LSM-Tree 合并、MVCC 版本链、WAL 日志#40编译原理词法分析 DFA、递归下降语法树、IR 生成、寄存器分配#42操作系统进程调度甘特图、虚拟内存页表、磁盘 I/O 调度、文件系统#43计算机网络TCP 握手时序、拥塞控制曲线、HTTP 请求/响应、DNS 查询树理论方向#53 - #96编号项目核心内容#72计算复杂度P/NP 归约图、时间复杂度层级、交互式证明、PCP 定理#55编程语言理论Lambda 演算归约、类型系统推导、GC 标记清除、闭包捕获#53自动机理论DFA/NFA 状态图、正则表达式引擎、图灵机模拟、泵引理交叉学科#58 - #169编号项目核心内容#51计算机图形学光栅化三角形、光线追踪反弹、Phong 着色、Z-Buffer#49量子计算Bloch 球旋转、量子门矩阵、叠加态可视化、Grover 算法#64博弈论纳什均衡求解、囚徒困境博弈、拍卖机制、Shapley 值#59机器人学正逆运动学、SLAM 建图、PID 控制响应、轨迹优化四、30 个配套工具除了 170 个可视化实验室TW 生态还包含 30 个独立的大型交互工具覆盖学、练、测、查、玩五大场景学习导航类工具描述TW Universe交互式知识星图140 节点 力导向网络图TW Roadmap交互式学习路线图5 层 35 节点 4 条精选路径TW Tree层级知识依赖树6 层 152 节点前置依赖可视化TW Timeline技术演进时间线1936-2026 共 65 个里程碑TW Mindmap可缩放概念思维导图8 大主题 202 节点TW Story交互式 CS 叙事史40 个故事节点 SVG 插图练习实战类工具描述TW Sandbox代码沙盒12 个算法模板编辑代码实时可视化TW DetectiveBug 侦探游戏27 题 × 3 难度TW Regex正则可视化NFA/DFA 状态图 AST 分解树TW Visualizer数据结构可视化器BST/堆/图/哈希表/跳表/Trie/红黑树/B树TW Assembly汇编学习器模拟 8 位 CPU26 条指令TW GitGit 可视化10 课交互式教程TW Interview面试模拟器4 岗位 × 8 题 系统设计测验评估类工具描述TW Quiz知识挑战90 题 × 4 分类 × 3 难度TW Challenge算法挑战12 题 × 3 难度TW Benchmark浏览器基准测试8 模块 × Big-O 拟合曲线TW Analyzer代码复杂度分析器圈/认知复杂度 异味检测TW Quest学习冒险 RPG12 大陆 × 72 关卡速查参考类工具描述TW Glossary交互式百科277 个术语TW Flashcards间隔重复记忆卡155 张 × SM-2 算法TW Cheatsheet开发者速查手册11 张表 258 行TW Compare多维概念对比22 组 × 7 维度雷达图TW CalculatorCS 计算器张量/CIDR/显存/浮点/哈希/编码/色彩TW Trends技术趋势追踪12 组 × 12 年数据创意可视类工具描述TW Art算法艺术工坊L-System/元胞自动机/分形/流场TW Dashboard学习驾驶舱跨工具进度聚合 热力图TW Papers论文解读经典论文图解 核心思想可视化TW Playground算法实验场代码编辑器 实时执行TW Career职业路线图6 路径 × 4 级别TW Network网络包旅程DNS→TCP→TLS→HTTP→渲染 8 阶段五、技术特点1. 真正的零依赖每一个项目都是单个 HTML 文件不引用任何外部 CSS/JS/CDN。不依赖 React、不依赖 D3、不依赖任何框架。打开 HTML 文件就能用断网也能用。!-- 这就是一个完整项目的全部引用 -- !-- 没有任何 link 或 script srccdn... -- !-- 所有 CSS 和 JS 都内联在 HTML 中 --2. Linear 工程美学统一的视觉设计语言深色背景#08090a、系统字体栈、细边框、低饱和度配色。每个项目用不同的强调色区分视觉上既有秩序又有辨识度。3. 性能优先不使用backdrop-filter: blur()导致卡顿不使用mousemove事件监听器不必要的重绘SVG 动画用requestAnimationFrame驱动支持prefers-reduced-motion无障碍4. 本地持久化所有进度、设置、答题记录通过localStorage保存刷新不丢失不需要后端。六、怎么用场景 1学习一个新概念比如你想理解 Transformer 的 Self-Attention打开 TW Hub搜索 Transformer 或在 AI 分类找到 #07点击「打开 Demo」在可视化界面中调整 Attention 的 Q/K/V 矩阵参数观察注意力权重的变化场景 2面试准备打开 TW Interview选择岗位方向前端/后端/算法/系统设计练习模式自由浏览题目模拟模式限时答题系统设计题「设计短链系统」可交互式选择架构方案用 TW Quiz 做知识检测用 TW Flashcards 记忆关键概念场景 3游戏化学习打开 TW Quest从新手开始冒险在 12 个大陆上通关 72 个关卡获得经验值升级解锁称号完成每日任务获得成就场景 4学习驾驶舱打开 TW Dashboard查看你的学习全景90 天活动热力图展示学习连续性四类掌握度雷达图识别薄弱环节16 个成就徽章激励持续学习智能推荐下一步该学什么场景 5日常工具箱TW Calculator计算张量形状、CIDR 子网、显存占用TW Regex测试正则表达式看 NFA 状态图TW Cheatsheet查 Big-O 复杂度、设计模式、Git 命令TW Analyzer分析代码复杂度找代码异味七、项目结构TW/ ├── index.html # TW Hub 主入口 ├── README.md # 项目文档 │ ├── ai-trends-2026.html # #01 AI 发展趋势 ├── llm-viz-lab.html # #03 LLM 可视化 ├── transformer-viz-lab.html # #07 Transformer 可视化 ├── ... # 170 个可视化实验室 │ ├── tw-universe.html # 知识星图 ├── tw-timeline.html # 技术时间线 ├── tw-roadmap.html # 学习路线图 ├── tw-quiz.html # 知识问答 ├── tw-sandbox.html # 代码沙盒 ├── tw-detective.html # Bug 侦探 ├── ... # 30 个配套工具每个.html文件都是独立可运行的可以从 TW Hub 跳转也可以单独打开。八、技术栈与设计哲学为什么选择纯 HTML/CSS/JS方案优点缺点纯 HTML本项目零依赖、离线可用、永久可访问单文件较大React/Vue SPA组件化、生态丰富需构建、依赖框架版本D3.js图表生态强额外 270KB 依赖Canvas 2D高性能像素操作不如 SVG 可缩放、无障碍选择纯 HTML/CSS/JS SVG 的核心理由十年后打开还能用。不依赖任何框架版本不依赖任何 CDN不依赖任何构建工具。时间戳写在 HTML 里而不是写在package.json里。设计一致性所有 200 个项目共享同一套设计系统背景色#08090a深空黑强调色每个项目不同紫色、青色、橙色、玫红等字体系统字体栈不加载 Web Font圆角6px统一边框1px solid rgba(255,255,255,0.08)动画200ms ease统一过渡曲线九、开源信息GitHub: wangzifan396-wzf (WangZi) · GitHubHub 地址: AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs许可证: MIT技术栈: 纯 HTML/CSS/JS SVG外部依赖: 0每个可视化实验室都有独立的 GitHub 仓库支持 GitHub Pages 直接访问。十、后续计划本文是 TW 生态的第一个宣传稿项目仍在持续迭代中短期完善现有工具的交互细节增加更多实战场景中期扩展可视化实验室数量目标 200覆盖更多前沿方向长期探索社区共建模式支持用户提交可视化主题持续TW Papers 论文解读系列扩展TW Studio 可视化创作工坊如果你对某个具体项目感兴趣或者有想要的可视化主题欢迎在评论区留言我会优先安排。总结TW 生态的核心理念很简单把黑箱拆成你能看见的零件。200 个项目1360 个交互模块0 个外部依赖。不需要安装、不需要注册、不需要联网。打开就用看完就走想练就来。Hub 地址: AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs如果你觉得有用给个 Star 就是对我最大的支持。持续更新中本文会随项目迭代同步更新。
200 个零依赖交互式可视化项目，把计算机科学黑箱拆成你能看见的零件
发布时间：2026/7/26 5:25:46
一、为什么做这件事学习计算机科学最大的痛苦是什么黑箱太多。你知道 Transformer 很强但 Attention 的 QKV 矩阵到底怎么旋转的你知道 Raft 能达成共识但 Leader 选举的每一轮投票到底怎么流转的你知道 B 树是数据库索引的核心但节点分裂时数据到底怎么移动的文档是静态的论文是抽象的视频是单向的。你需要的是能动手调参数、能看见数据流动、能反复试错的东西。所以就有了 TWThe Wheel——一套纯前端、零依赖、打开即用的交互式可视化项目集。每一个项目都把一个计算机科学概念拆成可交互的零件让你看见它怎么运作。二、项目概览快速统计维度数量可视化实验室170 个配套工具30 个交互式模块1360外部依赖0代码总大小~13.5 MB技术栈纯 HTML/CSS/JS SVG许可证MIT总入口AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs打开即用无需安装任何依赖无需注册无需联网加载后离线可用。三、170 个可视化实验室分类导航分类数量代表项目AI / 机器学习72LLM、Transformer、Diffusion、MoE、Agent、RAG、RLHF、多模态Agent...CS 系统39分布式系统、数据库、编译器、操作系统、网络、区块链、云原生...CS 理论22复杂性理论、类型论、Lambda演算、范畴论、形式化验证、自动机...交叉学科37图形学、信息论、博弈论、机器人学、信号处理、量子计算...精选项目展示每个可视化实验室包含8 个交互模块以下是部分精选AI 方向#01 - #72编号项目核心内容#07Transformer 可视化位置编码热力图、Self-Attention 矩阵旋转、多头注意力并行、FFN 层、LayerNorm#03LLM 可视化Tokenizer 分词、KV-Cache 增长、注意力可视化、采样策略对比#05Agent 可视化ReAct 循环、工具调用流程、多智能体协作、记忆系统#08Diffusion 可视化前向加噪过程、反向去噪步骤、U-Net 结构、调度器对比#09RLHF 可视化PPO 裁剪机制、奖励模型训练、DPO 对比、安全对齐#15多模态融合CLIP、ViT、VQA、音频融合、跨模态检索#343D 视觉与神经渲染NeRF、Gaussian Splatting、点云、3D 重建系统方向#36 - #74编号项目核心内容#36分布式系统Raft 共识投票动画、Paxos 两阶段、分布式事务 2PC、CRDT 合并#37数据库内核BTree 分裂动画、LSM-Tree 合并、MVCC 版本链、WAL 日志#40编译原理词法分析 DFA、递归下降语法树、IR 生成、寄存器分配#42操作系统进程调度甘特图、虚拟内存页表、磁盘 I/O 调度、文件系统#43计算机网络TCP 握手时序、拥塞控制曲线、HTTP 请求/响应、DNS 查询树理论方向#53 - #96编号项目核心内容#72计算复杂度P/NP 归约图、时间复杂度层级、交互式证明、PCP 定理#55编程语言理论Lambda 演算归约、类型系统推导、GC 标记清除、闭包捕获#53自动机理论DFA/NFA 状态图、正则表达式引擎、图灵机模拟、泵引理交叉学科#58 - #169编号项目核心内容#51计算机图形学光栅化三角形、光线追踪反弹、Phong 着色、Z-Buffer#49量子计算Bloch 球旋转、量子门矩阵、叠加态可视化、Grover 算法#64博弈论纳什均衡求解、囚徒困境博弈、拍卖机制、Shapley 值#59机器人学正逆运动学、SLAM 建图、PID 控制响应、轨迹优化四、30 个配套工具除了 170 个可视化实验室TW 生态还包含 30 个独立的大型交互工具覆盖学、练、测、查、玩五大场景学习导航类工具描述TW Universe交互式知识星图140 节点 力导向网络图TW Roadmap交互式学习路线图5 层 35 节点 4 条精选路径TW Tree层级知识依赖树6 层 152 节点前置依赖可视化TW Timeline技术演进时间线1936-2026 共 65 个里程碑TW Mindmap可缩放概念思维导图8 大主题 202 节点TW Story交互式 CS 叙事史40 个故事节点 SVG 插图练习实战类工具描述TW Sandbox代码沙盒12 个算法模板编辑代码实时可视化TW DetectiveBug 侦探游戏27 题 × 3 难度TW Regex正则可视化NFA/DFA 状态图 AST 分解树TW Visualizer数据结构可视化器BST/堆/图/哈希表/跳表/Trie/红黑树/B树TW Assembly汇编学习器模拟 8 位 CPU26 条指令TW GitGit 可视化10 课交互式教程TW Interview面试模拟器4 岗位 × 8 题 系统设计测验评估类工具描述TW Quiz知识挑战90 题 × 4 分类 × 3 难度TW Challenge算法挑战12 题 × 3 难度TW Benchmark浏览器基准测试8 模块 × Big-O 拟合曲线TW Analyzer代码复杂度分析器圈/认知复杂度 异味检测TW Quest学习冒险 RPG12 大陆 × 72 关卡速查参考类工具描述TW Glossary交互式百科277 个术语TW Flashcards间隔重复记忆卡155 张 × SM-2 算法TW Cheatsheet开发者速查手册11 张表 258 行TW Compare多维概念对比22 组 × 7 维度雷达图TW CalculatorCS 计算器张量/CIDR/显存/浮点/哈希/编码/色彩TW Trends技术趋势追踪12 组 × 12 年数据创意可视类工具描述TW Art算法艺术工坊L-System/元胞自动机/分形/流场TW Dashboard学习驾驶舱跨工具进度聚合 热力图TW Papers论文解读经典论文图解 核心思想可视化TW Playground算法实验场代码编辑器 实时执行TW Career职业路线图6 路径 × 4 级别TW Network网络包旅程DNS→TCP→TLS→HTTP→渲染 8 阶段五、技术特点1. 真正的零依赖每一个项目都是单个 HTML 文件不引用任何外部 CSS/JS/CDN。不依赖 React、不依赖 D3、不依赖任何框架。打开 HTML 文件就能用断网也能用。!-- 这就是一个完整项目的全部引用 -- !-- 没有任何 link 或 script srccdn... -- !-- 所有 CSS 和 JS 都内联在 HTML 中 --2. Linear 工程美学统一的视觉设计语言深色背景#08090a、系统字体栈、细边框、低饱和度配色。每个项目用不同的强调色区分视觉上既有秩序又有辨识度。3. 性能优先不使用backdrop-filter: blur()导致卡顿不使用mousemove事件监听器不必要的重绘SVG 动画用requestAnimationFrame驱动支持prefers-reduced-motion无障碍4. 本地持久化所有进度、设置、答题记录通过localStorage保存刷新不丢失不需要后端。六、怎么用场景 1学习一个新概念比如你想理解 Transformer 的 Self-Attention打开 TW Hub搜索 Transformer 或在 AI 分类找到 #07点击「打开 Demo」在可视化界面中调整 Attention 的 Q/K/V 矩阵参数观察注意力权重的变化场景 2面试准备打开 TW Interview选择岗位方向前端/后端/算法/系统设计练习模式自由浏览题目模拟模式限时答题系统设计题「设计短链系统」可交互式选择架构方案用 TW Quiz 做知识检测用 TW Flashcards 记忆关键概念场景 3游戏化学习打开 TW Quest从新手开始冒险在 12 个大陆上通关 72 个关卡获得经验值升级解锁称号完成每日任务获得成就场景 4学习驾驶舱打开 TW Dashboard查看你的学习全景90 天活动热力图展示学习连续性四类掌握度雷达图识别薄弱环节16 个成就徽章激励持续学习智能推荐下一步该学什么场景 5日常工具箱TW Calculator计算张量形状、CIDR 子网、显存占用TW Regex测试正则表达式看 NFA 状态图TW Cheatsheet查 Big-O 复杂度、设计模式、Git 命令TW Analyzer分析代码复杂度找代码异味七、项目结构TW/ ├── index.html # TW Hub 主入口 ├── README.md # 项目文档 │ ├── ai-trends-2026.html # #01 AI 发展趋势 ├── llm-viz-lab.html # #03 LLM 可视化 ├── transformer-viz-lab.html # #07 Transformer 可视化 ├── ... # 170 个可视化实验室 │ ├── tw-universe.html # 知识星图 ├── tw-timeline.html # 技术时间线 ├── tw-roadmap.html # 学习路线图 ├── tw-quiz.html # 知识问答 ├── tw-sandbox.html # 代码沙盒 ├── tw-detective.html # Bug 侦探 ├── ... # 30 个配套工具每个.html文件都是独立可运行的可以从 TW Hub 跳转也可以单独打开。八、技术栈与设计哲学为什么选择纯 HTML/CSS/JS方案优点缺点纯 HTML本项目零依赖、离线可用、永久可访问单文件较大React/Vue SPA组件化、生态丰富需构建、依赖框架版本D3.js图表生态强额外 270KB 依赖Canvas 2D高性能像素操作不如 SVG 可缩放、无障碍选择纯 HTML/CSS/JS SVG 的核心理由十年后打开还能用。不依赖任何框架版本不依赖任何 CDN不依赖任何构建工具。时间戳写在 HTML 里而不是写在package.json里。设计一致性所有 200 个项目共享同一套设计系统背景色#08090a深空黑强调色每个项目不同紫色、青色、橙色、玫红等字体系统字体栈不加载 Web Font圆角6px统一边框1px solid rgba(255,255,255,0.08)动画200ms ease统一过渡曲线九、开源信息GitHub: wangzifan396-wzf (WangZi) · GitHubHub 地址: AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs许可证: MIT技术栈: 纯 HTML/CSS/JS SVG外部依赖: 0每个可视化实验室都有独立的 GitHub 仓库支持 GitHub Pages 直接访问。十、后续计划本文是 TW 生态的第一个宣传稿项目仍在持续迭代中短期完善现有工具的交互细节增加更多实战场景中期扩展可视化实验室数量目标 200覆盖更多前沿方向长期探索社区共建模式支持用户提交可视化主题持续TW Papers 论文解读系列扩展TW Studio 可视化创作工坊如果你对某个具体项目感兴趣或者有想要的可视化主题欢迎在评论区留言我会优先安排。总结TW 生态的核心理念很简单把黑箱拆成你能看见的零件。200 个项目1360 个交互模块0 个外部依赖。不需要安装、不需要注册、不需要联网。打开就用看完就走想练就来。Hub 地址: AI 可视化实验室集 · 170 Projects, 1360 Modules · AI Visualization Labs如果你觉得有用给个 Star 就是对我最大的支持。持续更新中本文会随项目迭代同步更新。
![[极客大挑战 2019]Upload](http://pic.xiahunao.cn/yaotu/[极客大挑战 2019]Upload)
