Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Graphiques web : Canvas, SVG et D3 v1.0.0

Utilisez cette ressource pour créer un graphique ou un visuel interactif pour une page web

Nouveau

  • 552 téléchargements
  • 181 mentions J'aime
  • 244 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install canvas-graphics-dataviz

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent analyse le besoin, recommande la technologie de rendu (Canvas 2D, SVG ou WebGL) avec sa justification, puis implémente et peaufine le graphique. Il s'appuie sur des modèles de code, des tableaux de décision et des règles d'accessibilité et de performance. Vous obtenez une visualisation adaptative, accessible et fluide.

Choisie surtout par

Mise à jour le 2 novembre 2026

Tableau de choix entre Canvas, SVG et WebGL pour un graphique ou une visualisation.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : trois phases avec points d'arrêt de validation
  • Tableaux de choix de technologie et d'optimisation
  • Modèles de code Canvas, SVG et D3 v7
  • Liste des erreurs courantes et règles d'accessibilité

Pour qui

  • Créer un graphique de tableau de bord ou une infographie pour un site
  • Réaliser un visuel génératif ou animé sur canvas
  • Rendre une visualisation accessible aux lecteurs d'écran

Pas pour qui

  • Des graphiques statiques simples faisables dans un tableur
  • Des modèles 3D complets ou des jeux avancés
  • Des rapports de données sans page web

Étiquettes

  • canvas
  • svg
  • d3
  • visualisation
  • accessibilité

À propos

Vous dites

« Crée un graphique à barres interactif du chiffre d'affaires mensuel pour notre page de résultats, accessible et adaptatif. »

Tableau de choix entre Canvas, SVG et WebGL pour un graphique ou une visualisation.

Skill publiée par pixel-process-ug sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Les données ou le sujet du graphique et Le niveau d'interactivité souhaité

Comment l'utiliser

  1. Décrivez les données, l'usage et le niveau d'interactivité voulu.
  2. Validez la technologie recommandée par l'agent.
  3. Vérifiez le rendu, l'accessibilité et la performance avant les finitions.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • SKILL.md11 Ko

Origine et licence

Modifié par PalateKit

Auteur
pixel-process-ug
Source
github.com/pixel-process-ug/superkit-agents/tree/cc7fcb7e47bc4c50020abdf352fa5d8914d0a7c2/templates/skills/canvas-design
Licence
MIT

Notice

Version modifiée de « canvas-design » (pixel-process-ug, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il connaître D3.js ?

Non. L'agent choisit la technologie et écrit le code, D3.js n'est utilisée que si elle apporte un vrai gain.

La skill dépend-elle d'autres skills ?

Non. Le tableau d'intégration cite des skills voisines à titre de suggestion, mais elles ne sont pas nécessaires.