English reader? Start here: Open English README

DataViz

可展示、可录制、可开源、可复刻 的数据可视化动画参考实现。

适用于内容创作、教学演示、二次开发，以及 OpenClaw / AI 编程工具复刻。

这个仓库不是“堆几个图表 demo”，而是想把一套真正能拿去展示、能录制、能继续改、也能反推成 Prompt 的数据可视化资产做出来。

效果预览

点击任意一张图，都可以直接跳到对应的 Prompt。

Bar Chart Race	Globe

Sankey	Network Graph

Bubble Chart	Scatter 3D

Heatmap	Treemap

Chord Diagram	Timeline

Live Demos / Preview Videos

当前在线预览入口：

• Bar Chart Race
• Globe
• Sankey
• Network Graph
• Bubble Chart
• Scatter 3D
• Heatmap
• Treemap
• Chord Diagram
• Timeline

Preview video 说明：

• 每个 live demo 页面都内置录制按钮
• 可以直接在页面里导出一段 webm 预览视频
• 这些在线链接属于当前预览入口，后续如果部署方式变化，README 会继续同步更新

你可以怎么用这套项目

路线 A：直接拿代码改

适合你想：

• 自己继续改动画
• 换数据
• 换文案
• 换配色
• 二次开发成自己的可视化项目

你会直接用到的代码入口：

• 主要页面都在 src/pages
• 公共录制逻辑在 src/hooks/useCanvasRecorder.ts
• 公共画框和控制区组件在 src/components
• 如果你只想改某一个动画，最直接就是从对应的 Page.tsx 文件开始
• 如果你已经 clone / 下载仓库，也可以直接把这份 Prompt 发给你的 AI 编程工具，让它基于本地代码替换成你自己的数据和故事：
  • 本地代码改造 Prompt

推荐本地流程：

本地启动：

cd studio
pnpm install
pnpm dev

开发时你可以：

• 打开本地开发地址，直接看每一页的动画效果
• 改页面里的数据、文案、颜色和布局
• 点击页面内的录制按钮，直接导出当前动画视频
• 按需把某一页拆出来，做成你自己的独立项目

如果你想先验证生产构建：

构建：

pnpm build
pnpm preview

如果你只想快速开始，建议优先看这几个页面：

• src/pages/BarChartRacePage.tsx
• src/pages/GlobePage.tsx
• src/pages/SankeyPage.tsx

路线 B：直接复制 Prompt 给 OpenClaw

适合你想：

• 直接在 OpenClaw 里复刻这些动画
• 不先看代码，先看生成效果
• 用 Prompt 走一条“观众可复刻”的路线

重要：

• 不要第一次就直接复制某一个单动画 Prompt
• 如果用户当前工作区里还没有统一工作台，必须先运行安装/初始化 Prompt
• 否则 OpenClaw 很容易自己生成另一套目录、另一套路由、另一套录制方式，最后效果会明显偏离现在这套参考实现

先看这里：

• 发布版入口 README
• 视频说明区文案
• 开源仓库说明文案

第一次使用时，先运行：

• 00 安装与工作台初始化

然后再从下面 11 个单动画里选择一个：

11 份观众可直接复制的 Prompt：

• 00 安装与工作台初始化
• 01 Bar Chart Race
• 02 Globe
• 03 Sankey
• 04 Network Graph
• 05 Bubble Chart
• 06 Scatter 3D
• 07 Heatmap
• 08 Treemap
• 09 Chord Diagram
• 10 Timeline
• 11 Surface Plot

当前包含的动画

这个仓库当前包含并持续迭代的页面：

1. Bar Chart Race
2. Globe
3. Sankey
4. Network Graph
5. Bubble Chart
6. Scatter 3D
7. Heatmap
8. Treemap
9. Chord Diagram
10. Timeline
11. Surface Plot

说明：

• Particle Flow 做过实验版本，但当前正式实现已移除，所以没有进入稳定对外交付。

每一页默认都在追求什么

每个动画都尽量满足这些标准：

• 一屏内完成主展示
• 适合桌面录屏
• 数据故事清楚，不是抽象摆件
• 页面内支持录制并下载视频
• 后续适合整理成开源资产

当前录制链路默认使用浏览器原生：

• canvas.captureStream(30)
• MediaRecorder
• Blob
• URL.createObjectURL

也就是说，这套项目不是只想“把图做出来”，而是：

把动画做出来，并且能直接在页面里录制下载。

如果你是第一次来，建议这样开始

观众 / 创作者

建议先从这 3 个动画开始：

• Bar Chart Race
• Globe
• Sankey

原因很简单：

• 这 3 个类型差异足够大
• 教学价值高
• 也最适合检验 OpenClaw 的真实复刻能力

开发者

建议先看这些文件：

• src/pages
• src/hooks/useCanvasRecorder.ts
• src/components/StageFrame.tsx
• src/components/RecorderPanel.tsx
• prompts/openclaw-v4-copyable-11

项目结构

studio/
├─ docs/
│  └─ preview/
├─ prompts/
│  ├─ openclaw-repro-prompts-v1.md
│  ├─ openclaw-repro-prompts-v2.md
│  ├─ openclaw-repro-prompts-v3.md
│  ├─ openclaw-repro-prompts-v4-longform.md
│  ├─ openclaw-v4-copyable-11/
│  └─ openclaw-v4-publish/
├─ public/
├─ src/
│  ├─ components/
│  ├─ hooks/
│  ├─ pages/
│  └─ data/
├─ package.json
└─ README.md

这些 Prompt 到底是什么

这些 Prompt 不是“随便描述一下想要什么效果”。

它们尽量把这些东西都钉住了：

• 数据故事
• 技术实现路径
• 文件结构
• 页面布局
• 录制要求
• 验证标准

目的只有一个：

让观众在 OpenClaw 上复刻出来的东西，尽量靠近这个仓库里的参考实现。

但请注意：

我不能诚实承诺 OpenClaw 一定 100% 复刻成功。

更准确的说法是：

这是一套尽量减少自由发挥空间、尽量贴近当前参考实现的 Prompt。

当前状态

这个仓库现在更像一个持续打磨中的参考实现工作台，而不是已经完全定稿的模板库。

也就是说：

• 一部分页面已经比较接近可公开交付标准
• 一部分页面还会继续根据视觉、数据表达、布局和录制体验返工

但至少现在它已经不是默认模板，也不是空仓库。

你可以：

• 直接跑代码
• 直接复制 Prompt
• 直接开始改
• 直接拿去录屏

先做对，再做多。