图表 & 数据可视化

这个 pack 装了什么

这个包配齐了 六个可视化工具，覆盖在真实产品团队会遇到的所有数据展示形态。两个是 JS 图表库；一个是 Python ML demo 构建器；一个是 SQL 仪表盘；两个是工程师真会打开的白板应用。

六个干净分三对：D3 + ECharts（程序化图表），Gradio + Redash（围绕数据的完整 UI），Excalidraw + tldraw（视觉思考，不严格算可视化但近到工程师按同一个快捷键）。

为什么一个 pack 同时装六个

前端工程师被叫去「做个图」时，实际要回答的是：这是文档页里的一次性插图，是每分钟刷新的仪表盘面板，是给老板的模型 demo，是高管 PPT，还是会议白板草图？这六个是这五种问题的标准答案。

• D3.js：要每个像素全控制时用。它是低层级库，不是图表库。配 Observable Plot 处理 80% 场景
• Apache ECharts：需要 Canvas 上开箱 50 种图表时用。大数据集比 Recharts 性能好，Apache 维护
• Gradio：有 Python 模型想 10 行代码出可分享 demo URL 时用。Hugging Face Spaces 默认用它
• Redash：有数据库要让分析师点选查询拼共享仪表盘时用。Mode / Looker 的自建替代
• Excalidraw：想要看着不像花了三小时画的手绘风图时用（系统架构 / 时序图）
• tldraw：要协作白板 + AI 助手时用 —— tldraw_compute 集成让你画流程，AI 给你渲染

一条命令装齐

# 装整个 pack，把每个 viz 工具的 starter 模板放进项目
tokrepo install pack/charts-data-viz

# 或单装
tokrepo install d3
tokrepo install echarts
tokrepo install gradio
tokrepo install redash

TokRepo CLI 用 npm/pnpm 装 JS 库，用 uv 装 Python 库。Redash 装的时候会放一份 docker-compose.yml，60 秒内 docker compose up 就能跑起来。

几个常见坑

• D3 不是图表库。它是数学 + DOM 库。很多人 stackoverflow 抄一段，撞到边界 case，然后摔键盘。要「D3 之上的图表库」请用 Observable Plot 或 Vega-Lite。这俩表达不了你的可视化时再上 D3
• ECharts 大数据有内存瓶颈。50 万点的折线图能渲，50 万个动画不能。先关动画 + 降采样到 1 万点以内
• Gradio 的 share=True 会暴露你的模型。它生成公网 *.gradio.live URL，进程跑着任何人都能打。给同事看 demo 没事；过夜跑、无鉴权、还是私有微调权重就别这么搞
• Redash 行数要管。默认查询返上百万行能崩浏览器。设 query_runner_row_limit，探索用采样查询
• Excalidraw 把你锁在它格式里。导 PNG/SVG 没问题，但 .excalidraw 是私有 JSON。先想好「迁走的话重画」或者直接用导原生 SVG 的 tldraw

单这个 pack 不够时

要像素级统计图（matplotlib / seaborn / plotly 领地）这个 pack 没覆盖 —— 那些是 Python 侧、不同受众（notebook / 论文）。要带审计跟踪和 SSO 的真正 BI 工具，Redash 是入门，Metabase 或 Apache Superset 是下一档。

数据源配 Postgres for Agent。把结果嵌文档站配 静态站 & 文档生成器。要把这些图作为面板做成完整应用，看 AI 应用生成器。