Charts & Data Viz

Ce que contient ce pack

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

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

Pourquoi un pack couvre les six

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

• 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%.
• 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.
• 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.
• 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.
• Excalidraw quand vous voulez un diagramme dessiné main (architecture, séquence) qui n'a pas l'air d'avoir pris trois heures.
• 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.

Installer en une commande

# Installe le pack — pose des templates starter pour chaque outil viz
tokrepo install pack/charts-data-viz

# Ou en choisir un
tokrepo install d3
tokrepo install echarts
tokrepo install gradio
tokrepo install redash

Le TokRepo CLI scaffold les libs JS via npm/pnpm 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.

Pièges courants

• 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.
• 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.
• 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.
• 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.
• Excalidraw vous enferme dans le format Excalidraw. Oui ça exporte PNG/SVG, mais le fichier .excalidraw est du JSON propriétaire. Planifiez « on redessinera si on migre » — ou utilisez tldraw qui exporte du SVG plain.

Quand ce pack seul ne suffit pas

Si vous avez besoin de viz statistique pixel-perfect (territoire matplotlib/seaborn/plotly) 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.

Pour les sources de données, associez avec Postgres pour Agents IA. Pour embarquer les résultats dans un site de docs, associez avec Générateurs Sites Statiques & Docs. Pour « fais une app complète avec ces graphes comme panneaux », voir Builders d'Apps IA.