Grafik Görselleştirme Ajan Becerileri

Grafik Görselleştirme Becerileri

Veriyi daha iyi düşünmek için görsel bir dile dönüştürme.

Genel Bakış

Veri odaklı karar alma çağında, verimli ve doğru veri görselleştirme ve analizi çok önemlidir. AntV, grafik tasarımından etkileşimli keşfe ve derinlemesine veri analizine kadar tüm iş akışı için sağlam bir araç seti ve kapsamlı bir beceri seti sunan profesyonel bir görselleştirme çözümleri paketi sunar. Kullanıcıların karmaşık veri kümelerini sezgisel görsel grafiklere hızla dönüştürmesini sağlayarak, akıllı tasarım özellikleri ve zengin bir bileşen kitaplığı sayesinde oluşturma engelini önemli ölçüde düşürür. Günlük raporlama, dinamik panolar veya sofistike etkileşimli analizler için AntV güvenilir destek sunar. Yapay zeka yeteneklerini entegre ederek, bu araçlar görselleştirmelerin oluşturulmasını ve optimizasyonunu daha da kolaylaştırır ve otomatikleştirir. Bu, analistlerin içgörüleri ortaya çıkarmaya ve iş kararlarını yönlendirmeye daha fazla odaklanmasını sağlayarak veriyi gerçekten görünür ve anlaşılır kılar.

[!WARNING] Bu proje yalnızca yapay zeka tarafından oluşturulan kodu birleştirir.

Nasıl katkıda bulunulur:

1. Sorunu net bir şekilde açıklayan bir issue gönderin
2. Gereksinimlerinizle birlikte @copilot'a atayın

Kullanım

Bu pazar yerini Claude Code'a ekleyin:

/plugin marketplace add antvis/chart-visualization-skills

Veya becerileri birden çok aracınız için doğrudan yükleyebilirsiniz:

npx skills add antvis/chart-visualization-skills

Mevcut Beceriler

• 📊 chart-visualization: AntV tarafından desteklenen, akıllı veri görselleştirme için 26'dan fazla grafik türü sağlayan kapsamlı bir grafik oluşturma becerisi.

Chart Visualization, 26'dan fazla mevcut seçenek arasından en uygun grafik türünü akıllıca seçer, ayrıntılı özelliklere dayalı parametreleri çıkarır ve yüksek kaliteli grafik görüntüleri oluşturur. Zaman serilerini, karşılaştırmaları, parçadan bütüne, ilişkileri, coğrafi, hiyerarşik, istatistiksel ve özel görselleştirmeleri kapsar.

• 🎨 infographic-creator: Verilen metin içeriğine dayalı olarak güzel infografikler oluşturun. Kullanıcılar infografik oluşturmayı talep ettiğinde kullanın.

Infographic Creator, veriyi, bilgiyi ve bilgiyi algılanabilir bir görsel dile dönüştürmek için AntV Infographic'i kullanır. Görsel tasarım ile veri görselleştirmeyi birleştirerek listeler, diziler, hiyerarşiler, karşılaştırmalar, ilişkiler ve grafikler dahil olmak üzere 50'den fazla şablon sunar. Karmaşık bilgileri sezgisel sembollerle sıkıştırarak izleyicilerin önemli noktaları hızla anlamasına ve hatırlamasına yardımcı olur.

• 🖼️ icon-retrieval: Simge kitaplığından simge SVG dizelerini arayın ve alın. Varsayılan olarak en fazla 5 eşleşen simge döndürür (özelleştirilebilir).

Icon Search, infografikler, web geliştirme, tasarım ve daha fazlası dahil olmak üzere çeşitli kullanım durumları için uygun simgeler bulmalarına yardımcı olur. Mevcut simgeleri keşfetmek ve SVG dizelerini doğrudan almak için anahtar kelimelere göre arayın. Her arama, varsayılan olarak en fazla 5 eşleşen simge döndürür (topK parametresi ile özelleştirilebilir) ve URL'leri ve tam SVG içeriğiyle birlikte gelir.

• 📝 narrative-text-visualization: T8 Sözdizimini kullanarak verilerden yapılandırılmış anlatı metni görselleştirmeleri oluşturun.

Narrative Text Visualization (T8), yapılandırılmamış verileri, varlık açıklamalarıyla veri anlatıları oluşturmak için bildirimsel, Markdown benzeri bir dil olan T8 Sözdizimi'ni kullanarak anlamsal olarak zengin anlatı raporlarına dönüştürür. LLM dostu ve çerçeveden bağımsızdır, HTML, React ve Vue ile sorunsuz çalışır. Metrikler, değerler, eğilimler ve boyutlar gibi varlıkların uygun şekilde etiketlendiği veri analizi raporları, özetler ve içgörü belgeleri oluşturmak için mükemmeldir. Yerleşik mini grafikler, standartlaştırılmış stil ve profesyonel biçimlendirme içerir. Otantik veri kaynaklarını destekler ve hafif, teknolojiden bağımsız görüntüleme sağlar.

• 📋 antv-s2-expert: S2 çok boyutlu çapraz analiz tablosu geliştirme asistanı. Kullanıcılar S2 pivot tabloları, tablo sayfaları veya herhangi bir @antv/s2 ile ilgili geliştirmede yardıma ihtiyaç duyduğunda kullanın.

AntV S2 Expert, kullanıcıların S2 çok boyutlu çapraz analiz tablosu motoruyla geliştirme yapmasına yardımcı olur. @antv/s2 çekirdek motoru, @antv/s2-react ve @antv/s2-vue çerçeve bağlamaları, @antv/s2-react-components gelişmiş analiz bileşenleri ve @antv/s2-ssr sunucu tarafı görüntüleme hakkında kapsamlı rehberlik sağlar. Pivot tabloları, tablo sayfaları, özel hücreler, tema oluşturma, olaylar, etkileşimler, sıralama, toplamlar, araç ipuçları, dondurulmuş satırlar/sütunlar, simgeler, sayfalandırma ve daha fazlasını kapsar.

• 🕸️ antv-g6-graph: G6 v5 grafik görselleştirme kod üreteci. Kullanıcılar G6 grafikleri — ağ grafikleri, ağaç grafikleri, akış şemaları, zihin haritaları ve G6 kitaplığı ile herhangi bir ilişkisel veya grafik yapılı veri görselleştirmesi — oluşturmak istediğinde kullanın.

AntV G6 Graph, en iyi uygulamaları izleyerek doğru, çalıştırılabilir G6 v5 kodu üretir. Temel grafik başlatma, veri yapıları (düğümler, kenarlar, kombolar), 10'dan fazla düzen algoritması (force, dagre, circular, grid, mindmap, fishbone, vb.), tüm yerleşik düğüm/kenar/combo türleri, durum yönetimi, 15'ten fazla davranış (drag-canvas, zoom-canvas, click-select, lasso, vb.), 10'dan fazla eklenti (minimap, tooltip, toolbar, legend, timebar, vb.), özel öğe geliştirme, dönüşümler ve animasyonu kapsar. Yerleşik koruma önlemleri, kullanımdan kaldırılmış G6.Graph() yapıcılarını, graph.data() API'lerini veya Mod tabanlı davranış yapılandırmasını kullanma gibi yaygın v4→v5 geçiş tuzaklarını önler.

• 📈 antv-g2-chart: G2 v5 grafik kod üreteci. Kullanıcılar G2 grafikleri — çubuk grafikler, çizgi grafikler, pasta grafikler, dağılım grafikleri, alan grafikleri, ısı haritaları ve G2 kitaplığı ile herhangi bir istatistiksel veri görselleştirmesi — oluşturmak istediğinde kullanın.

AntV G2 Chart, Spec Mode en iyi uygulamalarını izleyerek doğru, çalıştırılabilir G2 v5 kodu üretir. 30'dan fazla grafik türünü (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge ve daha fazlası), veri dönüşümlerini (stackY, dodgeX, binX, fold, vb.), koordinat sistemlerini (kartezyen, polar, theta, radyal), ölçekleri, etkileşimleri (brush, slider, legend filter), bileşenleri (axis, legend, tooltip, annotation) ve çoklu görünüm kompozisyonlarını kapsar. Yerleşik koruma önlemleri, kullanımdan kaldırılmış zincir API'lerini, geçersiz palet adlarını veya kullanıcı kodunda d3'e başvurmayı kullanma gibi yaygın v4→v5 geçiş tuzaklarını önler.

Değerlendirme Sonuçları

Harness Engineering yaklaşımı, 174 grafik oluşturma test senaryosu ile sıkı bir şekilde test edilmiş ve temel yöntemlere göre önemli iyileştirmeler göstermiştir:

Sonuçlar, Harness Engineering'in LLM'lerin üretime yakın doğruluk (%98,2'ye kadar) elde etmesini sağladığını ve Context7 temel yaklaşımından önemli ölçüde daha iyi performans gösterdiğini göstermektedir.

[!TIP] Daha fazla beceri yakında geliyor.

Kütüphane Kullanımı

Node.js projelerinizde CLI ve API ile bir kütüphane olarak kullanılabilir.

CLI Kullanımı

Ayrıca terminalinizde kolay kullanım için antv adlı bir CLI aracı sağlıyoruz, genel olarak yükleyin:

npm install -g @antv/chart-visualization-skills

Sorgu ile becerileri al veya listele:

# Retrieve skills by query (metadata only)
antv retrieve "bar chart" --library g2 --topk 10

# Retrieve skills with full markdown content (core constraints auto-prepended)
antv retrieve "bar chart" --library g2 --content

# Retrieve skills and output as JSON
antv retrieve "bar chart" --library g2 --output json

# Get a skill by its exact ID
antv get g2-mark-interval-basic --library g2

# List all available skills
antv list --library g2 --category core

# List skills and output as JSON
antv list --output json

# Show skill info (core constraints from SKILL.md)
antv info --library g2

# Show skill info as JSON
antv info --library g2 --output json

Komut için kullanım:

Usage: antv [options] [command]

CLI tool for AntV chart visualization skills retrieval

Options:
  -V, --version               output the version number
  -h, --help                  display help for command

Commands:
  retrieve [options] <query>  Search for skills matching a query
  get [options] <id>          Get a skill by its exact ID
  list [options]              List all available skills
  info [options]              Show skill info from SKILL.md
  help [command]              display help for command

Options for retrieve:
  --library <lib>             Filter by library (e.g. g2, g6)
  --topk <n>                  Number of results to return (default: 7)
  --content                   Include markdown content body in results; core constraints (SKILL.md Section 1-2) are always prepended as the first result
  --output <format>           Output format: json | text (default: "text")

Not: --content, kitaplığın temel kısıtlamalarını (SKILL.md'nin 1. ve 2. Bölümleri, <!-- CONSTRAINTS:END --> işaretleyicisine kadar) her zaman ilk sonuç olarak başa ekler ve modelin referans belgeleriyle birlikte temel kuralları almasını sağlar.

API Kullanımı

import { retrieve } from '@antv/chart-visualization-skills';

// Metadata only (no content)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// With full markdown content (core constraints auto-prepended as first result)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// With content but without core constraints
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Library filter, e.g. 'g2' or 'g6'
  topK?: number;      // Number of results (default: 7)
  content?: boolean;  // Include markdown content body (default: false)
  includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content)
}

Notlar:

• Varsayılan alma, content alanı olmadan hafif sonuç nesneleri döndürür.
• content: true, markdown içerik gövdesini döndürür (önyüz meta verileri hariç tutulur).
• includeInfo true olduğunda (content: true olduğunda varsayılan), temel kısıtlamalar bloğu — <!-- CONSTRAINTS:END -->'e kadar SKILL.md — ilk öğe olarak enjekte edilir (kimlik __info__ ile öneklenir), böylece modelin her zaman temel kuralları görmesi sağlanır.

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // Full SKILL.md body (after frontmatter)
  constraintsContent: string; // SKILL.md body up to <!-- CONSTRAINTS:END --> marker; injected by retrieve when includeInfo: true
}

Lisans

MIT Lisansı - ayrıntılar için LİSANS dosyasına bakın.