106.9K+Télécharger
Aller au guide d’utilisation
Chart Animationpar iart-ai

Chart Animation Skill.

Rendez des graphiques de données avec des valeurs exactes et des mouvements pilotés par les images vidéo.

  • Animation de données
  • Graphiques
Télécharger OpenDesignVoir le guide d'utilisation
Analyse de la source · chart-animationSKILL.md
Tâche Rendez des graphiques de données avec des valeurs exactes et des mouvements pilotés par les images vidéo. Livrables Une composition Remotion de graphique pilotée par les images vidéo. Avant de commencer Le workflow source dépend de Remotion et des éventuels packages de graphiques ou d’échelles choisis.
Synthèse éditoriale · source vérifiée le 2026-11-02 · pas un exemple généré

01 Fonctionnement

Rendez des graphiques de données avec des valeurs exactes et des mouvements pilotés par les images vidéo

Créez des graphiques vidéo pilotés par les images, avec compteurs lisibles, changements de classement et vérification des données avant export Remotion.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

chart-animation crée des graphiques animés dont les nombres et la géométrie dépendent de l’image vidéo courante. Il sépare l’échelle qui convertit les données en pixels de l’interpolation qui convertit les images en valeurs changeantes. Cette distinction compte lorsque le minuteur d’une bibliothèque graphique diverge du moteur de rendu hors ligne.

Le workflow documenté utilise Remotion pour le rendu et conserve les jeux de données dans les props d’entrée. Il couvre les barres croissantes, compteurs, tracés de lignes et séquences de classement. Les libellés, unités et valeurs finales exactes sont vérifiés dans des images fixes rendues avant l’encodage vidéo ou la réutilisation du design sur plusieurs jeux de données.

Livrables attendus

  • Une composition Remotion de graphique pilotée par les images vidéo.
  • Un MP4 et des entrées de données et de thème réutilisables.
  • Des images fixes représentatives pour vérifier libellés, rangs et valeurs.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Valider la correspondance des données

    Identifiez le champ temporel, les séries, unités et plages de valeurs. Enregistrez la composition Remotion avec son schéma d’entrée et ses props par défaut, en séparant données et thème. Si le nombre de lignes détermine la durée, calculez-la avec calculateMetadata pour qu’un autre jeu de données ne conserve pas la longueur de la vidéo précédente.

  2. 02
    Piloter les changements par les images

    Calculez valeurs et positions avec l’horloge des images vidéo. Désactivez les boucles d’animation concurrentes de la bibliothèque graphique et formatez les valeurs affichées après arrondi.

  3. 03
    Inspecter avant l’encodage

    Rendez des images fixes de début, milieu et fin avec les véritables props de livraison. Vérifiez nombres exacts, changements de rang, libellés et échelle avant de rendre le MP4 complet.

02 Cas d’usage

Quand l’utiliser

Le workflow source dépend de Remotion et des éventuels packages de graphiques ou d’échelles choisis.

Un bon choix

  • Les données doivent rester exactes en vidéoUtilisez-le lorsqu’un chiffre erroné ou une mauvaise correspondance de colonne changerait le message.
  • Un graphique sert à plusieurs jeux de donnéesDes props validées et un thème partagé permettent des rendus répétés depuis le même projet source.

Limites à vérifier

  • Un environnement de rendu est nécessaireLe workflow source dépend de Remotion et des éventuels packages de graphiques ou d’échelles choisis.
  • L’animation ne valide pas l’interprétationLes données et leur interprétation doivent être fournies et vérifiées ; des barres fluides ne prouvent pas la pertinence d’une métrique.

Éléments à fournir

  • Enregistrements structurésFournissez CSV ou JSON avec des identités de séries et champs temporels explicites.
  • Définitions des métriquesPrécisez unités, arrondis, libellés et événements méritant une pause.
  • Cible vidéoIndiquez durée, format d’image, fréquence d’images et taille de visionnage prévue.

03 Décisions importantes

Les choix importants

  1. Valeurs déterministes

    Revenir à la même image affiche les mêmes données plutôt qu’un état dépendant d’un minuteur.

  2. Compteurs lisibles

    Le formatage et les chiffres tabulaires stabilisent les nombres changeants à l’écran.

  3. Vérifications représentatives avant traitement en lot

    Un jeu de données réel peut révéler une erreur de correspondance ou de mise en page avant sa propagation à plusieurs fichiers.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la source et la configuration

Fournissez CSV ou JSON avec des identités de séries et champs temporels explicites.

Fichier source amont
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md

La référence ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant de les utiliser ; ce n’est pas une commande d’installation.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise chart-animation pour créer une vidéo de classement de 15 secondes à partir de mon CSV de ventes mensuelles. Conserve exactement les cinq noms de produits et les revenus fournis, avec les unités monétaires visibles. Commence par un bref temps de lecture, anime les changements de classement, marque une pause au premier changement de leader et laisse lire le résultat final. Pilote valeurs et positions par l’image vidéo, avec des identités de séries stables et des chiffres tabulaires. Avant l’encodage, rends des images fixes représentatives avec les props issues du CSV réel. Livre le MP4, la composition réutilisable et une note identifiant les colonnes utilisées.

Vérifier le résultat

Comparez le résultat réel à ces critères observables.

  • Comparez libellés, unités et valeurs finales rendus aux données fournies.
  • Vérifiez les mouvements de classement interpolés et les libellés hors cadre.
  • Confirmez les props réelles, la durée finale et la vidéo décodée.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
iart-ai
Dépôt
iart-ai/data-animation-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 8ce2709c3992
Résumé éditorial de la source
Rendez des graphiques de données avec des valeurs exactes et des mouvements pilotés par les images vidéo.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je utiliser D3 ?

La source utilise D3 pour les échelles et les formes, tout en laissant le temps au moteur de rendu vidéo. Les transitions D3 et autres horloges d’animation indépendantes ne doivent pas piloter les images exportées.

Pourquoi vérifier des images fixes avant la vidéo ?

Elles facilitent le repérage des valeurs erronées, colonnes inversées et libellés coupés. La source impose des contrôles avec les données réellement livrées.

Peut-il rendre plusieurs fichiers CSV ?

Le modèle documenté transmet chaque jeu de données comme props à une même composition. Validez un exemple représentatif avant de traiter le lot.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md