106.9K+İndir
Kullanım kılavuzuna geç
Chart Animationyazan iart-ai

Chart Animation Skill'i.

Veri grafiklerini kesin değerler ve kareye bağlı hareketle render edin.

  • Veri animasyonu
  • Grafikler
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · chart-animationSKILL.md
Görev Veri grafiklerini kesin değerler ve kareye bağlı hareketle render edin. Çıktılar Kareyle yönetilen bir Remotion grafik kompozisyonu. Başlamadan önce Kaynağın iş akışı Remotion'a ve seçilen grafik veya ölçek paketlerine bağımlıdır.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Veri grafiklerini kesin değerler ve kareye bağlı hareketle render edin

Remotion dışa aktarımından önce kareyle yönetilen değerler, okunaklı sayaçlar, sıralama geçişleri ve veri kontrolleriyle grafik videoları oluşturun.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

chart-animation, sayılarını ve geometrisini mevcut video karesinden alan hareketli grafikler oluşturur. Veriyi piksele eşleyen ölçeği, kareleri değişen değerlere eşleyen interpolasyondan ayırır. Grafik kütüphanesinin kendi zamanlayıcısı çevrimdışı render aracıyla uyuşmadığında bu ayrım önemlidir.

Belgelenen iş akışı render için Remotion kullanır ve veri kümelerini giriş props'larında tutar. Büyüyen çubukları, sayaçları, çizgi açılımlarını ve sıralama dizilerini kapsar. Video kodlanmadan veya tasarım birden fazla veri kümesine uygulanmadan önce kesin etiketler, birimler ve son değerler render edilmiş durağan karelerde kontrol edilir.

Beklenen Çıktılar

  • Kareyle yönetilen bir Remotion grafik kompozisyonu.
  • MP4 ve yeniden kullanılabilir veri kümesi/tema girdileri.
  • Etiketleri, sıraları ve değerleri kontrol etmek için temsilî durağan kareler.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Veri eşlemesini doğrulayın

    Zaman alanını, serileri, birimleri ve değer aralığını belirleyin. Veriyi temadan ayrı tutarak Remotion kompozisyonunu giriş şeması ve varsayılan props ile kaydedin. Video uzunluğunu satır sayısı belirliyorsa süreyi calculateMetadata ile hesaplayın; böylece yeni veri kümesi önceki videonun süresini korumaz.

  2. 02
    Değişimleri karelerden yönetin

    Değerleri ve konumları kare saatinden hesaplayın. Grafik kütüphanesinin çakışan animasyon döngülerini kapatın ve görünen değerleri yuvarladıktan sonra biçimlendirin.

  3. 03
    Kodlamadan önce inceleyin

    Gerçek teslim props'larıyla başlangıç, ara ve son kareleri render edin. Tam MP4'ten önce kesin sayıları, sıra değişimlerini, etiketleri ve ölçeği kontrol edin.

02 Kullanım Alanları

Ne zaman kullanılır

Kaynağın iş akışı Remotion'a ve seçilen grafik veya ölçek paketlerine bağımlıdır.

İyi Bir Uyum

  • Veriler videoda kesin kalmalıysaYanlış rakamın veya hatalı sütun eşlemesinin mesajı değiştireceği grafiklerde kullanın.
  • Tek grafik tasarımı çok sayıda veri kümesi kullanıyorsaDoğrulanmış props ve ortak tema ayarları aynı kaynak projeden tekrarlı render almayı destekler.

Kontrol Edilecek Sınırlar

  • Render ortamı gerekirKaynağın iş akışı Remotion'a ve seçilen grafik veya ölçek paketlerine bağımlıdır.
  • Animasyon anlatıyı doğrulamazVeri kümesi ve yorumu sağlanıp kontrol edilmelidir; çubukların akıcı olması metriğin anlamlı olduğunu kanıtlamaz.

Bu Girdileri Getirin

  • Yapılandırılmış kayıtlarAçık seri kimlikleri ve zaman alanları içeren CSV veya JSON sağlayın.
  • Metrik tanımlarıBirimleri, yuvarlamayı, etiketleri ve duraklama gerektiren olayları belirtin.
  • Video hedefiSüreyi, en-boy oranını, kare hızını ve hedef izleme boyutunu belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Deterministik değerler

    Aynı kareye gidildiğinde zamanlayıcıya bağlı durum yerine aynı veri görünür.

  2. Okunaklı sayaçlar

    Biçimlendirme ve eş genişlikli rakamlar değişen sayıları ekranda sabit tutar.

  3. Temsilî toplu işlem kontrolleri

    Gerçek bir veri kümesi, eşleme veya yerleşim hatasını birçok dosyaya kopyalanmadan ortaya çıkarabilir.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

Açık seri kimlikleri ve zaman alanları içeren CSV veya JSON sağlayın.

Üst Kaynak Dosyası
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Aylık satış CSV'mden 15 saniyelik sıralama videosu yapmak için chart-animation kullan. Beş ürün adını ve gelir değerlerini aynen koru; para birimleri görünür olsun. Kısa bir başlangıç beklemesi göster, sıra değişimlerini canlandır, ilk liderlik değişiminde durakla ve son sonucu okunabilecek kadar tut. Değerleri ve konumları video karesinden yönet; seri kimliklerini sabit tut ve eş genişlikli rakamlar kullan. Kodlamadan önce gerçek CSV'den türetilen props ile temsilî kareleri render et. MP4'ü, yeniden kullanılabilir kompozisyonu ve kullanılan veri sütunlarını belirten bir notu teslim et.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Render edilmiş etiketleri, birimleri ve son değerleri sağlanan kayıtlarla karşılaştırın.
  • İnterpolasyonlu sıralama hareketini ve tuval dışındaki etiketleri kontrol edin.
  • Gerçek giriş props'larını, son süreyi ve çözümlenmiş videoyu doğrulayın.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
iart-ai
Depo
iart-ai/data-animation-skills
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 8ce2709c3992
Editoryal Kaynak Özeti
Veri grafiklerini kesin değerler ve kareye bağlı hareketle render edin.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

D3 kullanabilir miyim?

Kaynak, zamanı video render aracının denetiminde tutarken ölçekler ve şekiller için D3 kullanır. D3 geçişleri veya bağımsız animasyon saatleri dışa aktarılan kareleri yönetmemelidir.

Videodan önce durağan kareler neden incelenmeli?

Durağan karede yanlış değerleri, yer değiştirmiş sütunları ve kırpılmış etiketleri belirlemek daha kolaydır. Kaynak, gerçek teslim veri kümesiyle kontrol gerektirir.

Birden fazla CSV render edilebilir mi?

Belgelenen model, her veri kümesini tek kompozisyona props olarak geçirir. Toplu işleme geçmeden önce temsilî bir veri kümesini doğrulayın.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md