[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-charts-data-viz-fr":3,"seo:pack:charts-data-viz:fr":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 — rendez n'importe quelle donnée, du graphe unique au dashboard complet.",[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",303,"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":99,"citations":112,"wordCount":125,"generatedAt":126},"pack","fr","Charts & Data Viz : D3, ECharts, Gradio, Redash et +2","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — rendez n'importe quelle donnée, du graphe au dashboard complet. Installez via TokRepo CLI.","Six outils qui couvrent tout le spectre data-viz — du graphe SVG ponctuel au dashboard SQL hébergé en passant par les croquis whiteboard. Installation en une commande via TokRepo.","## Ce que contient ce pack\n\nCe pack rassemble les **six outils de visualisation** qui gèrent toutes les formes d'affichage de données rencontrées dans une vraie équipe produit. Deux sont des libs de graphes JS ; une est un builder de démo ML Python ; une est un dashboard SQL ; deux sont des apps de tableau blanc que les ingénieurs ouvrent vraiment.\n\n| # | Outil | Sortie | Idéal pour |\n|---|---|---|---|\n| 1 | D3.js | SVG, sur mesure | viz explicative custom |\n| 2 | Apache ECharts | Canvas + SVG | dashboards haute perf |\n| 3 | Gradio | démo ML hébergée | démos modèle avec sliders |\n| 4 | Redash | dashboard SQL | dashboards exec \u002F analyste |\n| 5 | Excalidraw | diagrammes dessinés main | croquis d'architecture |\n| 6 | tldraw | tableau blanc + IA | brainstorming en direct |\n\nLes six se divisent proprement en trois paires : D3 + ECharts (graphes programmatiques), Gradio + Redash (UIs complets autour des données) et Excalidraw + tldraw (pensée visuelle, pas strictement viz mais assez adjacent pour que les ingénieurs utilisent le même raccourci).\n\n## Pourquoi un pack couvre les six\n\nUn ingénieur frontend à qui on demande « fais un graphe » doit en réalité répondre : est-ce une illustration unique dans une page de docs, un panneau de dashboard qui rafraîchit chaque minute, une démo modèle pour un stakeholder, une slide exec, ou un croquis whiteboard de réunion ? Ces six sont la réponse canonique à chaque version de cette question.\n\n- **D3.js** quand il faut un contrôle total de chaque pixel — c'est une lib bas niveau, pas une lib de graphes. Marche bien avec Observable Plot pour le cas 80%.\n- **Apache ECharts** quand il faut 50 types de graphes qui marchent out-of-the-box sur Canvas. Bat Recharts sur les gros datasets, maintenu par Apache.\n- **Gradio** quand vous avez un modèle Python et voulez une URL de démo partageable en 10 lignes. Hugging Face Spaces l'utilise par défaut.\n- **Redash** quand vous avez une base et qu'il faut des analystes qui font du point-and-click vers des dashboards partagés. Alternative auto-hébergée à Mode ou Looker.\n- **Excalidraw** quand vous voulez un diagramme dessiné main (architecture, séquence) qui n'a pas l'air d'avoir pris trois heures.\n- **tldraw** quand vous voulez du tableau blanc collaboratif plus un side-kick IA — l'intégration tldraw_compute vous laisse esquisser des flux que l'IA rend.\n\n## Installer en une commande\n\n```bash\n# Installe le pack — pose des templates starter pour chaque outil viz\ntokrepo install pack\u002Fcharts-data-viz\n\n# Ou en choisir un\ntokrepo install d3\ntokrepo install echarts\ntokrepo install gradio\ntokrepo install redash\n```\n\nLe TokRepo CLI scaffold les libs JS via npm\u002Fpnpm et les Python via uv. Pour Redash, l'installation pose un `docker-compose.yml` pour faire `docker compose up` et avoir une instance fonctionnelle en 60 secondes.\n\n## Pièges courants\n\n- **D3 n'est pas une lib de graphes.** C'est une lib maths + DOM. Les gens copient un snippet stackoverflow, tapent un cas limite, et abandonnent. Pour « lib de graphes au-dessus de D3 », utilisez Observable Plot ou Vega-Lite. Allez sur D3 brut seulement quand ces deux n'expriment pas votre viz.\n- **ECharts peut taper des limites mémoire sur gros volumes.** Un line chart à 500K points rend, mais rendre 500K *animations* non. Désactivez les animations et sous-échantillonnez à ≤10K points avant rendu.\n- **Le share=True de Gradio expose votre modèle.** Il génère une URL publique *.gradio.live que n'importe qui peut atteindre tant que votre process tourne. OK pour envoyer une démo à un collègue ; pas OK pour laisser tourner toute la nuit sans auth sur un modèle fine-tuné avec des poids propriétaires.\n- **Redash demande de l'attention sur les limites de lignes.** Les requêtes par défaut peuvent renvoyer des millions de lignes et crasher le browser. Configurez `query_runner_row_limit` et utilisez des requêtes échantillonnées pour l'exploration.\n- **Excalidraw vous enferme dans le format Excalidraw.** Oui ça exporte PNG\u002FSVG, mais le fichier `.excalidraw` est du JSON propriétaire. Planifiez « on redessinera si on migre » — ou utilisez tldraw qui exporte du SVG plain.\n\n## Quand ce pack seul ne suffit pas\n\nSi vous avez besoin de viz statistique pixel-perfect (territoire matplotlib\u002Fseaborn\u002Fplotly) ce pack ne couvre pas — c'est côté Python et sert un autre public (notebooks, papers). Si vous avez besoin d'un vrai outil BI avec audit trails et SSO, Redash est le tier d'entrée ; Metabase ou Apache Superset est l'étape suivante.\n\nPour les sources de données, associez avec [Postgres pour Agents IA](\u002Ffr\u002Fpacks\u002Fpostgres-for-agents). Pour embarquer les résultats dans un site de docs, associez avec [Générateurs Sites Statiques & Docs](\u002Ffr\u002Fpacks\u002Fstatic-site-docs). Pour « fais une app complète avec ces graphes comme panneaux », voir [Builders d'Apps IA](\u002Ffr\u002Fpacks\u002Fai-app-builders).",[75,78,81,84,87],{"q":76,"a":77},"Ces outils sont-ils gratuits ?","Les six sont open-source. D3, ECharts, Excalidraw et tldraw sont MIT\u002FApache. Gradio est Apache 2.0 (Hugging Face l'héberge gratuit dans Spaces ; auto-hébergement aussi gratuit). Redash est BSD-3 — entièrement gratuit auto-hébergé, avec un plan hébergé payant optionnel si vous ne voulez pas le faire tourner. Pas de frais par graphe ou par utilisateur des libs.",{"q":79,"a":80},"Comment ECharts se compare à Recharts ou Chart.js ?","ECharts utilise Canvas + WebGL par défaut, scale à 100K+ points sans accroc. Recharts est React-only et SVG-only — joli pour 1K points, lent à 50K. Chart.js est l'installation la plus simple pour un graphe mais manque l'écosystème de plugins ECharts (cartes geo, jauges, treemaps). ECharts pour dashboards, Recharts pour graphes React ponctuels, Chart.js pour une page HTML rapide.",{"q":82,"a":83},"Est-ce que ça fonctionne avec Claude Code ou Cursor ?","Les six s'installent en une commande npm\u002Fpip et ont des types TypeScript complets ou stubs, donc tout éditeur IA les gère bien. Claude Code et Cursor ont une conscience spécifique des shapes d'API D3 et ECharts. Pour Gradio, les type hints Python sont excellents — Cursor autocomplète les composants interface correctement. tldraw a un serveur MCP maintenu pour le sketching IA-driven.",{"q":85,"a":86},"Différence vs outils dashboard généraux comme Grafana ?","Grafana est metrics-and-time-series-first — Prometheus, Loki, InfluxDB sont ses sources natives. Redash est SQL-first — n'importe quel DB driver fonctionne. ECharts est une lib, pas un outil — vous l'embarquez dans votre propre UI. Grafana pour dashboards ops, Redash pour dashboards analyste, ECharts quand il faut des graphes dans une app que vous construisez vous-même.",{"q":88,"a":89},"Quel est le piège opérationnel avec Gradio ?","L'auto-reload est super en dev mais expose vos paths de fichier dans les pages d'erreur sur l'URL publique *.gradio.live. Définissez `share=False` pour tout environnement touchant aux vraies données, ou faites tourner derrière un reverse proxy avec auth. Aussi : Gradio met les requêtes en queue par défaut — sous charge ça sérialise l'inférence, comportement correct mais qui surprend les utilisateurs néophytes.",{"@context":91,"@type":92,"name":13,"description":93,"numberOfItems":94,"publisher":95},"https:\u002F\u002Fschema.org","CollectionPage","D3.js, Apache ECharts, Gradio, Redash, Excalidraw, tldraw — render any data shape from one-off chart to full dashboard.",6,{"@type":96,"name":97,"url":98},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[100,104,108],{"url":101,"anchor":102,"reason":103},"\u002Ffr\u002Fpacks\u002Fstatic-site-docs","Générateurs Sites Statiques & Docs","où ces charts sont embarqués",{"url":105,"anchor":106,"reason":107},"\u002Ffr\u002Fpacks\u002Fai-app-builders","Builders d'Apps IA","apps full-stack avec charts comme panneau",{"url":109,"anchor":110,"reason":111},"\u002Ffr\u002Fpacks\u002Fpostgres-for-agents","Postgres pour Agents IA","les données SQL que ces viz tools rendent",[113,117,121],{"claim":114,"source_name":115,"source_url":116},"D3.js documentation and Observable Plot upgrade path","d3\u002Fd3","https:\u002F\u002Fgithub.com\u002Fd3\u002Fd3",{"claim":118,"source_name":119,"source_url":120},"Apache ECharts maintained by the Apache Software Foundation","apache\u002Fecharts","https:\u002F\u002Fgithub.com\u002Fapache\u002Fecharts",{"claim":122,"source_name":123,"source_url":124},"Excalidraw open-source whiteboard","excalidraw\u002Fexcalidraw","https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw",797,"2026-05-02T15:00:00Z"]