[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-charts-data-viz-en":3,"seo:pack:charts-data-viz:en":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","Stable","Charts & Data Viz","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — render any data shape from one-off chart to full dashboard.",[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":25,"title":69,"metaDescription":70,"h1":13,"tldr":71,"bodyMarkdown":72,"faq":73,"schema":89,"internalLinks":97,"citations":110,"wordCount":123,"generatedAt":124},"pack","Charts & Data Viz: D3, ECharts, Gradio, Redash and 2 more","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — render any data shape from a one-off chart to a full dashboard. Install via TokRepo CLI.","Six tools that cover the whole data-viz spectrum — from a one-off SVG chart to a hosted SQL dashboard to whiteboard sketches. Install in one command via TokRepo.","## What's in this pack\n\nThis pack pairs the **six visualization tools** that handle every shape of data display you'll encounter on a real product team. Two are JS chart libraries; one is a Python ML demo builder; one is a SQL dashboard; two are whiteboard apps that engineers actually open.\n\n| # | Tool | Output | Best for |\n|---|---|---|---|\n| 1 | D3.js | SVG, custom | bespoke explanatory viz |\n| 2 | Apache ECharts | Canvas + SVG | high-perf dashboards |\n| 3 | Gradio | hosted ML demo | model demos with sliders |\n| 4 | Redash | SQL dashboard | exec \u002F analyst dashboards |\n| 5 | Excalidraw | hand-drawn diagrams | architecture sketches |\n| 6 | tldraw | whiteboard + AI | live brainstorming |\n\nThe six split cleanly into three pairs: D3 + ECharts (programmatic charts), Gradio + Redash (full UIs around data), and Excalidraw + tldraw (visual thinking, not data viz strictly but adjacent enough that engineers reach for the same hotkey).\n\n## Why one pack covers all six\n\nA frontend engineer asked to \"make a chart\" actually needs to answer: is this a one-off illustration in a docs page, a dashboard panel that updates every minute, a model demo for a stakeholder, an exec slide, or a whiteboard sketch from a meeting? These six are the canonical answer to each version of that question.\n\n- **D3.js** when you need full control of every pixel — it's a low-level library, not a chart library. Pairs well with Observable Plot for the 80% case.\n- **Apache ECharts** when you need 50 chart types working out of the box on Canvas. It outperforms Recharts for large datasets and is maintained by Apache.\n- **Gradio** when you have a Python model and want a shareable demo URL in 10 lines. Hugging Face Spaces uses it as default.\n- **Redash** when you have a database and need analysts to point-and-click queries into shared dashboards. Self-hosted alternative to Mode or Looker.\n- **Excalidraw** when you want a hand-drawn diagram (system architecture, sequence diagrams) that doesn't look like it took three hours.\n- **tldraw** when you want collaborative whiteboarding plus an AI sidekick — tldraw's `tldraw_compute` integration lets you sketch flows that AI then renders.\n\n## Install in one command\n\n```bash\n# Install the pack — drops starter templates for each viz tool\ntokrepo install pack\u002Fcharts-data-viz\n\n# Or pick one\ntokrepo install d3\ntokrepo install echarts\ntokrepo install gradio\ntokrepo install redash\n```\n\nThe TokRepo CLI scaffolds JS libraries via npm\u002Fpnpm and Python ones via uv. For Redash, the install drops a `docker-compose.yml` so you can `docker compose up` and have a working instance in 60 seconds.\n\n## Common pitfalls\n\n- **D3 is not a chart library.** It's a math + DOM library. People copy\u002Fpaste a stackoverflow snippet, hit a corner case, and rage-quit. For a \"chart library on top of D3,\" use Observable Plot or Vega-Lite. Reach for raw D3 only when those two can't express your viz.\n- **ECharts can hit memory limits with large data.** A line chart with 500K points renders, but rendering 500K *animations* doesn't. Disable animations and downsample to ≤10K points before rendering.\n- **Gradio's `share=True` exposes your model.** It generates a public *.gradio.live URL that anyone can hit while your process is running. Fine for sending a demo to a coworker; not fine to leave running overnight unauthenticated on a fine-tuned model with proprietary weights.\n- **Redash needs care around row limits.** Default queries can return millions of rows and crash the browser. Set `query_runner_row_limit` and use sampled queries for exploration.\n- **Excalidraw locks you into Excalidraw format.** Yes, it exports PNG\u002FSVG, but the `.excalidraw` file is proprietary JSON. Plan for \"we'll re-draw if we ever migrate\" — or use tldraw which exports plain SVG.\n\n## When this pack alone isn't enough\n\nIf you need pixel-perfect statistical viz (matplotlib\u002Fseaborn\u002Fplotly territory) this pack doesn't cover it — those are Python-side and serve a different audience (notebooks, papers). If you need a real BI tool with audit trails and SSO, Redash is the entry tier; Metabase or Apache Superset is the next step up.\n\nFor data sources, pair with [Postgres for AI Agents](\u002Fen\u002Fpacks\u002Fpostgres-for-agents). For embedding results into a docs site, pair with [Static Site & Docs Builders](\u002Fen\u002Fpacks\u002Fstatic-site-docs). For \"make a full app with these charts as panels,\" see [AI App Builders](\u002Fen\u002Fpacks\u002Fai-app-builders).",[74,77,80,83,86],{"q":75,"a":76},"Are these tools free?","All six are open source. D3, ECharts, Excalidraw and tldraw are MIT\u002FApache. Gradio is Apache 2.0 (Hugging Face hosts it for free in Spaces; self-hosting is also free). Redash is BSD-3 — completely free self-hosted, with an optional paid hosted plan if you don't want to run it yourself. There are no per-chart or per-user fees from the libraries.",{"q":78,"a":79},"How does ECharts compare to Recharts or Chart.js?","ECharts uses Canvas + WebGL by default, which scales to 100K+ points smoothly. Recharts is React-only and SVG-only — beautiful for 1K points, slow at 50K. Chart.js is the easiest install for one chart but lacks ECharts's plugin ecosystem (geo maps, gauges, treemaps). Pick ECharts for dashboards, Recharts for one-off React charts, Chart.js for a quick HTML page.",{"q":81,"a":82},"Will these work with Claude Code or Cursor?","All six install with one npm\u002Fpip command and have full TypeScript types or stubs, so any AI editor handles them well. Claude Code and Cursor have specific awareness of D3 and ECharts API shapes. For Gradio, the Python type hints are excellent — Cursor autocompletes interface components correctly. tldraw has a maintained MCP server for AI-driven sketching.",{"q":84,"a":85},"Difference vs general dashboarding tools like Grafana?","Grafana is metrics-and-time-series first — Prometheus, Loki, InfluxDB are its native source. Redash is SQL-first — any DB driver works. ECharts is a library, not a tool — you embed it in your own UI. Pick Grafana for ops dashboards, Redash for analyst dashboards, ECharts when you need charts inside an app you're building yourself.",{"q":87,"a":88},"What's the operational gotcha with Gradio?","The auto-reload feature is great in dev but ships your file paths in error pages on the public *.gradio.live URL. Set `share=False` for any environment touching real data, or run behind a reverse proxy with auth. Also: Gradio queues requests by default — under load this serializes inference, which is correct behavior but surprises first-time users.",{"@context":90,"@type":91,"name":13,"description":14,"numberOfItems":92,"publisher":93},"https:\u002F\u002Fschema.org","CollectionPage",6,{"@type":94,"name":95,"url":96},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[98,102,106],{"url":99,"anchor":100,"reason":101},"\u002Fen\u002Fpacks\u002Fstatic-site-docs","Static Site & Docs Builders","where these charts get embedded",{"url":103,"anchor":104,"reason":105},"\u002Fen\u002Fpacks\u002Fai-app-builders","AI App Builders","full-stack apps with charts as a panel",{"url":107,"anchor":108,"reason":109},"\u002Fen\u002Fpacks\u002Fpostgres-for-agents","Postgres for AI Agents","the SQL data these viz tools render",[111,115,119],{"claim":112,"source_name":113,"source_url":114},"D3.js documentation and Observable Plot upgrade path","d3\u002Fd3","https:\u002F\u002Fgithub.com\u002Fd3\u002Fd3",{"claim":116,"source_name":117,"source_url":118},"Apache ECharts maintained by the Apache Software Foundation","apache\u002Fecharts","https:\u002F\u002Fgithub.com\u002Fapache\u002Fecharts",{"claim":120,"source_name":121,"source_url":122},"Excalidraw open-source whiteboard","excalidraw\u002Fexcalidraw","https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw",734,"2026-05-02T15:00:00Z"]