[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-charts-data-viz-es":3,"seo:pack:charts-data-viz:es":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","Estable","Charts & Visualización","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — renderiza cualquier forma de datos, de un gráfico al dashboard completo.",[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":72,"tldr":73,"bodyMarkdown":74,"faq":75,"schema":91,"internalLinks":101,"citations":114,"wordCount":127,"generatedAt":128},"pack","es","Charts & Visualización: D3, ECharts, Gradio, Redash y +2","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — renderiza cualquier dato, de un gráfico al dashboard completo. Instala con TokRepo CLI.","Charts & Visualización de Datos","Seis herramientas que cubren todo el espectro de visualización de datos — desde un SVG de un solo uso hasta un dashboard SQL hospedado y bocetos de pizarra. Instala en un comando con TokRepo.","## Qué incluye este pack\n\nEste 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.\n\n| # | Herramienta | Salida | Mejor para |\n|---|---|---|---|\n| 1 | D3.js | SVG, custom | viz explicativa a medida |\n| 2 | Apache ECharts | Canvas + SVG | dashboards alta perf |\n| 3 | Gradio | demo ML hospedada | demos modelo con sliders |\n| 4 | Redash | dashboard SQL | dashboards exec \u002F analista |\n| 5 | Excalidraw | diagramas dibujados a mano | bocetos de arquitectura |\n| 6 | tldraw | pizarra + IA | brainstorming en vivo |\n\nLas 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).\n\n## Por qué un pack cubre las seis\n\nUn 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.\n\n- **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%.\n- **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.\n- **Gradio** cuando tienes un modelo Python y quieres una URL de demo compartible en 10 líneas. Hugging Face Spaces lo usa por defecto.\n- **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.\n- **Excalidraw** cuando quieres un diagrama dibujado a mano (arquitectura, secuencias) que no parezca que tomó tres horas.\n- **tldraw** cuando quieres pizarra colaborativa más sidekick IA — la integración tldraw_compute te deja bocetar flujos que la IA luego renderiza.\n\n## Instala en un comando\n\n```bash\n# Instala el pack — pone plantillas starter para cada viz tool\ntokrepo install pack\u002Fcharts-data-viz\n\n# O elige uno\ntokrepo install d3\ntokrepo install echarts\ntokrepo install gradio\ntokrepo install redash\n```\n\nEl TokRepo CLI esqueletea las librerías JS via npm\u002Fpnpm 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.\n\n## Trampas comunes\n\n- **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.\n- **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.\n- **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.\n- **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.\n- **Excalidraw te encierra en el formato Excalidraw.** Sí, exporta PNG\u002FSVG, pero el archivo `.excalidraw` es JSON propietario. Planea para \"redibujaremos si migramos\" — o usa tldraw que exporta SVG plano.\n\n## Cuándo este pack solo no es suficiente\n\nSi necesitas viz estadística pixel-perfect (territorio matplotlib\u002Fseaborn\u002Fplotly) 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.\n\nPara fuentes de datos, empareja con [Postgres para Agentes IA](\u002Fes\u002Fpacks\u002Fpostgres-for-agents). Para embeber resultados en un sitio docs, empareja con [Generadores de Sitios Estáticos & Docs](\u002Fes\u002Fpacks\u002Fstatic-site-docs). Para \"haz una app completa con estos gráficos como paneles\", ver [Constructores de Apps IA](\u002Fes\u002Fpacks\u002Fai-app-builders).",[76,79,82,85,88],{"q":77,"a":78},"¿Estas herramientas son gratis?","Las seis son open-source. D3, ECharts, Excalidraw y tldraw son MIT\u002FApache. Gradio es Apache 2.0 (Hugging Face lo hospeda gratis en Spaces; auto-hospedar también es gratis). Redash es BSD-3 — completamente gratis auto-hospedado, con un plan hospedado pago opcional si no quieres correrlo tú. No hay tarifas por gráfico o usuario de las librerías.",{"q":80,"a":81},"¿Cómo compara ECharts con Recharts o Chart.js?","ECharts usa Canvas + WebGL por defecto, escala a 100K+ puntos suavemente. Recharts es React-only y SVG-only — bonito para 1K puntos, lento a 50K. Chart.js es la instalación más fácil para un gráfico pero le falta el ecosistema de plugins de ECharts (mapas geo, medidores, treemaps). ECharts para dashboards, Recharts para gráficos React puntuales, Chart.js para una página HTML rápida.",{"q":83,"a":84},"¿Funcionarán con Claude Code o Cursor?","Las seis se instalan con un comando npm\u002Fpip y tienen tipos TypeScript completos o stubs, así que cualquier editor IA los maneja bien. Claude Code y Cursor tienen consciencia específica de las shapes de API D3 y ECharts. Para Gradio, los type hints Python son excelentes — Cursor autocompleta componentes interface correctamente. tldraw tiene un servidor MCP mantenido para boceto IA-driven.",{"q":86,"a":87},"¿Diferencia vs herramientas dashboard generales como Grafana?","Grafana es métricas-y-time-series-first — Prometheus, Loki, InfluxDB son su fuente nativa. Redash es SQL-first — cualquier DB driver funciona. ECharts es una librería, no una herramienta — la embebes en tu propio UI. Grafana para dashboards ops, Redash para dashboards analista, ECharts cuando necesitas gráficos dentro de una app que estás construyendo.",{"q":89,"a":90},"¿Cuál es la trampa operacional con Gradio?","El auto-reload es genial en dev pero envía tus paths de archivo en páginas de error en la URL pública *.gradio.live. Define `share=False` para cualquier entorno tocando datos reales, o corre detrás de un reverse proxy con auth. Además: Gradio encola requests por defecto — bajo carga esto serializa inferencia, que es comportamiento correcto pero sorprende a usuarios primerizos.",{"@context":92,"@type":93,"name":94,"description":95,"numberOfItems":96,"publisher":97},"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":98,"name":99,"url":100},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[102,106,110],{"url":103,"anchor":104,"reason":105},"\u002Fes\u002Fpacks\u002Fstatic-site-docs","Generadores de Sitios Estáticos & Docs","donde se embeben estos gráficos",{"url":107,"anchor":108,"reason":109},"\u002Fes\u002Fpacks\u002Fai-app-builders","Constructores de Apps IA","apps full-stack con gráficos como panel",{"url":111,"anchor":112,"reason":113},"\u002Fes\u002Fpacks\u002Fpostgres-for-agents","Postgres para Agentes IA","los datos SQL que estos viz tools renderizan",[115,119,123],{"claim":116,"source_name":117,"source_url":118},"D3.js documentation and Observable Plot upgrade path","d3\u002Fd3","https:\u002F\u002Fgithub.com\u002Fd3\u002Fd3",{"claim":120,"source_name":121,"source_url":122},"Apache ECharts maintained by the Apache Software Foundation","apache\u002Fecharts","https:\u002F\u002Fgithub.com\u002Fapache\u002Fecharts",{"claim":124,"source_name":125,"source_url":126},"Excalidraw open-source whiteboard","excalidraw\u002Fexcalidraw","https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw",759,"2026-05-02T15:00:00Z"]