Charts & Data Viz

What's in this pack

This 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.

The 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).

Why one pack covers all six

A 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.

• 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.
• 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.
• Gradio when you have a Python model and want a shareable demo URL in 10 lines. Hugging Face Spaces uses it as default.
• Redash when you have a database and need analysts to point-and-click queries into shared dashboards. Self-hosted alternative to Mode or Looker.
• Excalidraw when you want a hand-drawn diagram (system architecture, sequence diagrams) that doesn't look like it took three hours.
• tldraw when you want collaborative whiteboarding plus an AI sidekick — tldraw's tldraw_compute integration lets you sketch flows that AI then renders.

Install in one command

# Install the pack — drops starter templates for each viz tool
tokrepo install pack/charts-data-viz

# Or pick one
tokrepo install d3
tokrepo install echarts
tokrepo install gradio
tokrepo install redash

The TokRepo CLI scaffolds JS libraries via npm/pnpm 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.

Common pitfalls

• D3 is not a chart library. It's a math + DOM library. People copy/paste 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.
• 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.
• 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.
• 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.
• Excalidraw locks you into Excalidraw format. Yes, it exports PNG/SVG, but the .excalidraw file is proprietary JSON. Plan for "we'll re-draw if we ever migrate" — or use tldraw which exports plain SVG.

When this pack alone isn't enough

If you need pixel-perfect statistical viz (matplotlib/seaborn/plotly 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.

For data sources, pair with Postgres for AI Agents. For embedding results into a docs site, pair with Static Site & Docs Builders. For "make a full app with these charts as panels," see AI App Builders.