Charts & Visualización

Qué incluye este pack

Este pack reúne las seis herramientas de visualización que manejan cada forma de visualización de datos que encontrarás en un equipo de producto real. Dos son librerías de gráficos JS; una es un constructor de demos ML Python; una es un dashboard SQL; dos son apps de pizarra que los ingenieros realmente abren.

Las seis se dividen limpiamente en tres pares: D3 + ECharts (gráficos programáticos), Gradio + Redash (UIs completas alrededor de datos) y Excalidraw + tldraw (pensamiento visual, no estrictamente viz pero adyacentes lo suficiente para que los ingenieros usen el mismo atajo).

Por qué un pack cubre las seis

Un ingeniero frontend al que le piden "haz un gráfico" en realidad necesita responder: ¿es una ilustración única en una página de docs, un panel de dashboard que actualiza cada minuto, una demo de modelo para un stakeholder, una slide ejecutiva o un boceto de pizarra de una reunión? Estas seis son la respuesta canónica a cada versión de esa pregunta.

• D3.js cuando necesitas control total de cada pixel — es una librería de bajo nivel, no de gráficos. Combina bien con Observable Plot para el caso 80%.
• Apache ECharts cuando necesitas 50 tipos de gráfico funcionando out-of-the-box en Canvas. Supera a Recharts en datasets grandes y lo mantiene Apache.
• Gradio cuando tienes un modelo Python y quieres una URL de demo compartible en 10 líneas. Hugging Face Spaces lo usa por defecto.
• Redash cuando tienes una base de datos y necesitas analistas haciendo queries point-and-click en dashboards compartidos. Alternativa auto-hospedada a Mode o Looker.
• Excalidraw cuando quieres un diagrama dibujado a mano (arquitectura, secuencias) que no parezca que tomó tres horas.
• tldraw cuando quieres pizarra colaborativa más sidekick IA — la integración tldraw_compute te deja bocetar flujos que la IA luego renderiza.

Instala en un comando

# Instala el pack — pone plantillas starter para cada viz tool
tokrepo install pack/charts-data-viz

# O elige uno
tokrepo install d3
tokrepo install echarts
tokrepo install gradio
tokrepo install redash

El TokRepo CLI esqueletea las librerías JS via npm/pnpm y las Python via uv. Para Redash, la instalación pone un docker-compose.yml para que hagas docker compose up y tengas una instancia funcional en 60 segundos.

Trampas comunes

• D3 no es una librería de gráficos. Es una librería de matemáticas + DOM. La gente copia un snippet de stackoverflow, choca con un caso borde y se rinde. Para "librería de gráficos sobre D3", usa Observable Plot o Vega-Lite. Recurre a D3 puro solo cuando esas dos no expresen tu viz.
• ECharts puede chocar con límites de memoria con datos grandes. Un line chart con 500K puntos renderiza, pero renderizar 500K animaciones no. Desactiva animaciones y baja a ≤10K puntos antes de renderizar.
• El share=True de Gradio expone tu modelo. Genera una URL pública *.gradio.live que cualquiera puede pegar mientras tu proceso corre. Bien para mandar demo a un colega; mal para dejar corriendo de noche sin auth en un modelo fine-tuneado con pesos propietarios.
• Redash necesita cuidado con límites de filas. Las queries default pueden devolver millones de filas y tirar el browser. Configura query_runner_row_limit y usa queries muestreadas para exploración.
• Excalidraw te encierra en el formato Excalidraw. Sí, exporta PNG/SVG, pero el archivo .excalidraw es JSON propietario. Planea para "redibujaremos si migramos" — o usa tldraw que exporta SVG plano.

Cuándo este pack solo no es suficiente

Si necesitas viz estadística pixel-perfect (territorio matplotlib/seaborn/plotly) este pack no la cubre — esas son Python-side y sirven a otra audiencia (notebooks, papers). Si necesitas una herramienta BI real con audit trails y SSO, Redash es el tier de entrada; Metabase o Apache Superset es el siguiente paso.

Para fuentes de datos, empareja con Postgres para Agentes IA. Para embeber resultados en un sitio docs, empareja con Generadores de Sitios Estáticos & Docs. Para "haz una app completa con estos gráficos como paneles", ver Constructores de Apps IA.