[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-charts-data-viz-zh":3,"seo:pack:charts-data-viz:zh":67},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":66},"charts-data-viz","📈","#134E4A","stable","稳定","图表 & 数据可视化","D3.js \u002F Apache ECharts \u002F Gradio \u002F Redash \u002F Excalidraw \u002F tldraw — 单图到完整仪表盘任意形态都能画。",[16,28,35,42,49,59],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1000,"ee953940-3577-11f1-9bc6-00163e2b0d79","d3-js-bring-data-life-svg-canvas-html-ee953940","D3.js — Bring Data to Life with SVG, Canvas & HTML","D3 is the grandparent of data visualization on the web — a low-level toolkit for binding data to DOM, applying data-driven transformations, and building any chart imaginable. Powers the New York Times, Observable, and thousands of dashboards.","Script Depot",329,0,"en","skill","Skill",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1012,"b3e552ed-3588-11f1-9bc6-00163e2b0d79","apache-echarts-powerful-interactive-charting-library-b3e552ed","Apache ECharts — Powerful Interactive Charting Library","Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas\u002FSVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.","Apache Software Foundation",{"id":36,"uuid":37,"slug":38,"title":39,"description":40,"author_name":41,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},244,"b30caf4b-a9a8-4379-b1c6-bc8f5cf5cce3","gradio-build-ml-demos-ai-apps-python-b30caf4b","Gradio — Build ML Demos & AI Apps in Python","Python library for building interactive ML demos and AI web apps. Chat interfaces, file upload, image\u002Faudio\u002Fvideo I\u002FO. Share with public link. 42K+ stars.","AI Open Source",{"id":43,"uuid":44,"slug":45,"title":46,"description":47,"author_name":41,"view_count":48,"vote_count":24,"lang_type":25,"type":26,"type_label":27},943,"a20e0e3e-34d0-11f1-9bc6-00163e2b0d79","redash-open-source-data-visualization-dashboard-tool-a20e0e3e","Redash — Open Source Data Visualization & Dashboard Tool","Redash connects to any data source, lets you query with SQL, visualize results, and build shareable dashboards. The SQL-first open-source BI tool for data teams.",333,{"id":50,"uuid":51,"slug":52,"title":53,"description":54,"author_name":55,"view_count":56,"vote_count":24,"lang_type":25,"type":57,"type_label":58},463,"3dd25a34-a489-45fe-8a2e-74d58792f9c8","excalidraw-collaborative-whiteboard-diagrams-3dd25a34","Excalidraw — Collaborative Whiteboard & Diagrams","Draw hand-sketched diagrams with real-time collaboration. Embeddable React component. The most popular whiteboard tool. 120K+ stars.","Excalidraw",301,"script","Script",{"id":60,"uuid":61,"slug":62,"title":63,"description":64,"author_name":41,"view_count":65,"vote_count":24,"lang_type":25,"type":26,"type_label":27},694,"abe1c221-d226-4a39-83c8-68ceda7885a0","tldraw-infinite-canvas-sdk-ai-applications-abe1c221","tldraw — Infinite Canvas SDK for AI Applications","Open-source infinite canvas library for building whiteboard, diagramming, and design applications. React component with real-time collaboration. Used by AI tools for visual generation. 40,000+ stars.",293,"tokrepo install pack\u002Fcharts-data-viz",{"pageType":68,"pageKey":8,"locale":69,"title":70,"metaDescription":71,"h1":13,"tldr":72,"bodyMarkdown":73,"faq":74,"schema":90,"internalLinks":100,"citations":113,"wordCount":126,"generatedAt":127},"pack","zh","图表 & 数据可视化：D3 \u002F ECharts \u002F Gradio \u002F Redash 等","D3.js \u002F Apache ECharts \u002F Gradio \u002F Redash \u002F Excalidraw \u002F tldraw — 单图到完整仪表盘任意形态都能画。TokRepo CLI 一条命令装齐。","六个工具覆盖数据可视化全谱 —— 从一次性 SVG 图到托管 SQL 仪表盘到白板草图。TokRepo 一条命令装齐。","## 这个 pack 装了什么\n\n这个包配齐了 **六个可视化工具**，覆盖在真实产品团队会遇到的所有数据展示形态。两个是 JS 图表库；一个是 Python ML demo 构建器；一个是 SQL 仪表盘；两个是工程师真会打开的白板应用。\n\n| # | 工具 | 产物 | 适合 |\n|---|---|---|---|\n| 1 | D3.js | SVG，定制 | 定制说明性可视化 |\n| 2 | Apache ECharts | Canvas + SVG | 高性能仪表盘 |\n| 3 | Gradio | 托管 ML demo | 带 slider 的模型演示 |\n| 4 | Redash | SQL 仪表盘 | 高管 \u002F 分析师仪表盘 |\n| 5 | Excalidraw | 手绘风图 | 架构草图 |\n| 6 | tldraw | 白板 + AI | 实时头脑风暴 |\n\n六个干净分三对：D3 + ECharts（程序化图表），Gradio + Redash（围绕数据的完整 UI），Excalidraw + tldraw（视觉思考，不严格算可视化但近到工程师按同一个快捷键）。\n\n## 为什么一个 pack 同时装六个\n\n前端工程师被叫去「做个图」时，实际要回答的是：这是文档页里的一次性插图，是每分钟刷新的仪表盘面板，是给老板的模型 demo，是高管 PPT，还是会议白板草图？这六个是这五种问题的标准答案。\n\n- **D3.js**：要每个像素全控制时用。它是低层级库，不是图表库。配 Observable Plot 处理 80% 场景\n- **Apache ECharts**：需要 Canvas 上开箱 50 种图表时用。大数据集比 Recharts 性能好，Apache 维护\n- **Gradio**：有 Python 模型想 10 行代码出可分享 demo URL 时用。Hugging Face Spaces 默认用它\n- **Redash**：有数据库要让分析师点选查询拼共享仪表盘时用。Mode \u002F Looker 的自建替代\n- **Excalidraw**：想要看着不像花了三小时画的手绘风图时用（系统架构 \u002F 时序图）\n- **tldraw**：要协作白板 + AI 助手时用 —— tldraw_compute 集成让你画流程，AI 给你渲染\n\n## 一条命令装齐\n\n```bash\n# 装整个 pack，把每个 viz 工具的 starter 模板放进项目\ntokrepo install pack\u002Fcharts-data-viz\n\n# 或单装\ntokrepo install d3\ntokrepo install echarts\ntokrepo install gradio\ntokrepo install redash\n```\n\nTokRepo CLI 用 npm\u002Fpnpm 装 JS 库，用 uv 装 Python 库。Redash 装的时候会放一份 `docker-compose.yml`，60 秒内 `docker compose up` 就能跑起来。\n\n## 几个常见坑\n\n- **D3 不是图表库**。它是数学 + DOM 库。很多人 stackoverflow 抄一段，撞到边界 case，然后摔键盘。要「D3 之上的图表库」请用 Observable Plot 或 Vega-Lite。这俩表达不了你的可视化时再上 D3\n- **ECharts 大数据有内存瓶颈**。50 万点的折线图能渲，50 万个动画不能。先关动画 + 降采样到 1 万点以内\n- **Gradio 的 share=True 会暴露你的模型**。它生成公网 *.gradio.live URL，进程跑着任何人都能打。给同事看 demo 没事；过夜跑、无鉴权、还是私有微调权重就别这么搞\n- **Redash 行数要管**。默认查询返上百万行能崩浏览器。设 `query_runner_row_limit`，探索用采样查询\n- **Excalidraw 把你锁在它格式里**。导 PNG\u002FSVG 没问题，但 `.excalidraw` 是私有 JSON。先想好「迁走的话重画」或者直接用导原生 SVG 的 tldraw\n\n## 单这个 pack 不够时\n\n要像素级统计图（matplotlib \u002F seaborn \u002F plotly 领地）这个 pack 没覆盖 —— 那些是 Python 侧、不同受众（notebook \u002F 论文）。要带审计跟踪和 SSO 的真正 BI 工具，Redash 是入门，Metabase 或 Apache Superset 是下一档。\n\n数据源配 [Postgres for Agent](\u002Fzh\u002Fpacks\u002Fpostgres-for-agents)。把结果嵌文档站配 [静态站 & 文档生成器](\u002Fzh\u002Fpacks\u002Fstatic-site-docs)。要把这些图作为面板做成完整应用，看 [AI 应用生成器](\u002Fzh\u002Fpacks\u002Fai-app-builders)。",[75,78,81,84,87],{"q":76,"a":77},"这些工具免费吗？","六个全是开源。D3 \u002F ECharts \u002F Excalidraw \u002F tldraw 是 MIT\u002FApache。Gradio 是 Apache 2.0（Hugging Face Spaces 免费托管，自建也免费）。Redash 是 BSD-3，自建完全免费，有可选付费托管版供不想自己跑的人用。库本身没有按图按用户收费。",{"q":79,"a":80},"ECharts 跟 Recharts 或 Chart.js 怎么比？","ECharts 默认用 Canvas + WebGL，能平滑撑到 10 万+ 点。Recharts 只 React 只 SVG —— 1000 点漂亮，5 万点慢。Chart.js 单图安装最简单但缺 ECharts 的插件生态（地图 \u002F 仪表 \u002F 树图）。仪表盘选 ECharts，一次性 React 图选 Recharts，快 HTML 页选 Chart.js。",{"q":82,"a":83},"Claude Code 或 Cursor 能用吗？","六个都是 npm\u002Fpip 一条命令装好，TypeScript 类型或 stub 齐全，AI 编辑器都能处理。Claude Code 和 Cursor 对 D3 和 ECharts API 有专门感知。Gradio 的 Python 类型注解很好 —— Cursor 自动补全界面组件正确。tldraw 有维护中的 MCP 服务器做 AI 驱动绘图。",{"q":85,"a":86},"和通用仪表盘工具如 Grafana 的区别？","Grafana 优先指标和时序 —— Prometheus \u002F Loki \u002F InfluxDB 是它的原生源。Redash 优先 SQL —— 任何 DB driver 都能用。ECharts 是库不是工具 —— 嵌进自己的 UI。运维仪表盘选 Grafana，分析师仪表盘选 Redash，自己做的应用里嵌图选 ECharts。",{"q":88,"a":89},"Gradio 的运维坑是什么？","自动 reload 在 dev 很爽但在公网 *.gradio.live URL 的错误页里会带你的文件路径。涉及真实数据的环境永远 share=False，或放在带鉴权的反代后面。另外 Gradio 默认会把请求排队 —— 高负载下推理串行，是正确行为但会吓到第一次用的人。",{"@context":91,"@type":92,"name":93,"description":94,"numberOfItems":95,"publisher":96},"https:\u002F\u002Fschema.org","CollectionPage","Charts & Data Viz","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — render any data shape from one-off chart to full dashboard.",6,{"@type":97,"name":98,"url":99},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[101,105,109],{"url":102,"anchor":103,"reason":104},"\u002Fzh\u002Fpacks\u002Fstatic-site-docs","静态站 & 文档生成器","这些图表会嵌进去的载体",{"url":106,"anchor":107,"reason":108},"\u002Fzh\u002Fpacks\u002Fai-app-builders","AI 应用生成器","图表只是面板的全栈应用",{"url":110,"anchor":111,"reason":112},"\u002Fzh\u002Fpacks\u002Fpostgres-for-agents","Postgres for Agent","这些可视化工具要渲染的 SQL 数据",[114,118,122],{"claim":115,"source_name":116,"source_url":117},"D3.js documentation and Observable Plot upgrade path","d3\u002Fd3","https:\u002F\u002Fgithub.com\u002Fd3\u002Fd3",{"claim":119,"source_name":120,"source_url":121},"Apache ECharts maintained by the Apache Software Foundation","apache\u002Fecharts","https:\u002F\u002Fgithub.com\u002Fapache\u002Fecharts",{"claim":123,"source_name":124,"source_url":125},"Excalidraw open-source whiteboard","excalidraw\u002Fexcalidraw","https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw",517,"2026-05-02T15:00:00Z"]