Vaardigheden van de Grafiekvisualisatieagent

Grafiekvisualisatievaardigheden

Data omzetten in een visuele taal voor beter denken.

Overzicht

In het tijdperk van datagestuurde besluitvorming zijn efficiënte en nauwkeurige datavisualisatie en -analyse van het grootste belang. AntV biedt een professionele reeks visualisatieoplossingen, met een robuuste toolkit en een uitgebreide set vaardigheden voor de gehele workflow—van diagramontwerp en interactieve verkenning tot diepgaande data-analyse. Het stelt gebruikers in staat om complexe datasets snel om te zetten in intuïtieve visuele diagrammen, waarbij de toetredingsdrempel aanzienlijk wordt verlaagd door intelligente ontwerpspecificaties en een uitgebreide componentenbibliotheek. Of het nu gaat om dagelijkse rapportage, dynamische dashboards of geavanceerde interactieve analyse, AntV levert betrouwbare ondersteuning. Door AI-mogelijkheden te integreren, stroomlijnen en automatiseren deze tools de generatie en optimalisatie van visualisaties verder. Dit stelt analisten in staat zich meer te richten op het blootleggen van inzichten en het stimuleren van zakelijke beslissingen, waardoor data echt zichtbaar en begrijpelijk wordt.

[!WARNING] Dit project voegt alleen door AI gegenereerde code samen.

Hoe bij te dragen:

1. Dien een issue in waarin het probleem duidelijk wordt beschreven
2. Wijs het toe aan @copilot met uw vereisten

Gebruik

Voeg deze marktplaats toe aan Claude-code:

/plugin marketplace add antvis/chart-visualization-skills

Of u kunt de vaardigheden rechtstreeks installeren voor uw meerdere agenten:

npx skills add antvis/chart-visualization-skills

Beschikbare vaardigheden

• 📊 chart-visualization: Een uitgebreide vaardigheid voor diagramgeneratie, aangedreven door AntV, die 26+ diagramtypen biedt voor intelligente datavisualisatie.

Chart Visualization selecteert op intelligente wijze het meest geschikte diagramtype uit 26+ beschikbare opties, extraheert parameters op basis van gedetailleerde specificaties en genereert diagramafbeeldingen van hoge kwaliteit. Het dekt tijdreeksen, vergelijkingen, deel-van-geheel, relaties, geografische, hiërarchische, statistische en gespecialiseerde visualisaties.

• 🎨 infographic-creator: Maak prachtige infographics op basis van gegeven tekstinhoud. Te gebruiken wanneer gebruikers vragen om infographics te maken.

Infographic Creator gebruikt AntV Infographic om data, informatie en kennis om te zetten in een waarneembare visuele taal. Het combineert visueel ontwerp met datavisualisatie en biedt 50+ sjablonen, waaronder lijsten, sequenties, hiërarchieën, vergelijkingen, relaties en diagrammen. Het comprimeert complexe informatie met intuïtieve symbolen om het publiek te helpen belangrijke punten snel te begrijpen en te onthouden.

• 🖼️ icon-retrieval: Zoek en haal SVG-tekenreeksen van pictogrammen op uit de pictogrambibliotheek. Retourneert standaard maximaal 5 overeenkomende pictogrammen (aanpasbaar).

Icon Search helpt gebruikers geschikte pictogrammen te vinden voor verschillende toepassingsgebieden, waaronder infographics, webontwikkeling, ontwerp en meer. Zoek op trefwoorden om beschikbare pictogrammen te ontdekken en hun SVG-tekenreeksen rechtstreeks op te halen. Elke zoekopdracht retourneert standaard maximaal 5 overeenkomende pictogrammen (aanpasbaar via de parameter topK) met hun URL's en volledige SVG-inhoud.

• 📝 narrative-text-visualization: Genereer gestructureerde narratieve tekstvisualisaties uit data met behulp van T8 Syntax.

Narrative Text Visualization (T8) transformeert ongestructureerde data in semantisch rijke narratieve rapporten met behulp van T8 Syntax - een declaratieve, op Markdown lijkende taal voor het creëren van data-narratieven met entiteitannotaties. Het is vriendelijk voor LLM's en framework-agnostisch, werkt naadloos met HTML, React en Vue. Perfect voor het maken van data-analyserapporten, samenvattingen en inzichten-documenten met entiteiten zoals metrieken, waarden, trends en dimensies die correct worden gelabeld. Kenmerken zijn onder meer ingebouwde mini-diagrammen, gestandaardiseerde stijlen en professionele opmaak. Ondersteunt authentieke databronnen en biedt lichtgewicht, technologie-onafhankelijke weergave.

• 📋 antv-s2-expert: S2 multidimensionale kruisanalyse-tabelontwikkelingsassistent. Te gebruiken wanneer gebruikers hulp nodig hebben met S2-draaitabellen, tabelbladen of elke ontwikkeling gerelateerd aan @antv/s2.

AntV S2 Expert helpt gebruikers bij het ontwikkelen met de S2 multidimensionale kruisanalyse-tabelengine. Het biedt uitgebreide begeleiding over de @antv/s2 kernengine, @antv/s2-react en @antv/s2-vue frameworkbindingen, @antv/s2-react-components geavanceerde analysecomponenten, en @antv/s2-ssr server-side rendering. Omvat draaitabellen, tabelbladen, aangepaste cellen, thema's, gebeurtenissen, interacties, sorteren, totalen, tooltips, bevroren rijen/kolommen, pictogrammen, paginering en meer.

• 🕸️ antv-g6-graph: G6 v5 grafiekvisualisatie codegenerator. Te gebruiken wanneer gebruikers G6-grafieken moeten genereren — netwerkgrafieken, boomgrafieken, stroomdiagrammen, mindmaps en elke relationele of grafiekgestructureerde datavisualisatie met de G6-bibliotheek.

AntV G6 Graph genereert nauwkeurige, uitvoerbare G6 v5-code volgens best practices. Het omvat de initialisatie van de kerngrafiek, datastructuren (nodes, edges, combos), 10+ layout-algoritmen (force, dagre, circular, grid, mindmap, fishbone, etc.), alle ingebouwde node/edge/combo typen, statusbeheer, 15+ gedragingen (drag-canvas, zoom-canvas, click-select, lasso, etc.), 10+ plugins (minimap, tooltip, toolbar, legend, timebar, etc.), aangepaste elementontwikkeling, transformaties en animatie. Ingebouwde guard rails voorkomen veelvoorkomende v4→v5 migratieproblemen, zoals het gebruik van verouderde G6.Graph() constructors, graph.data() API's of mode-gebaseerde gedragsconfiguratie.

• 📈 antv-g2-chart: G2 v5 diagramcodegenerator. Te gebruiken wanneer gebruikers G2-diagrammen moeten genereren — staafdiagrammen, lijndiagrammen, cirkeldiagrammen, spreidingsdiagrammen, vlakdiagrammen, heatmaps en elke statistische datavisualisatie met de G2-bibliotheek.

AntV G2 Chart genereert nauwkeurige, uitvoerbare G2 v5-code volgens Spec Mode best practices. Het omvat 30+ diagramtypen (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge en meer), datatransformaties (stackY, dodgeX, binX, fold, etc.), coördinatensystemen (cartesian, polar, theta, radial), schalen, interacties (brush, slider, legend filter), componenten (axis, legend, tooltip, annotation) en multi-view composities. Ingebouwde guard rails voorkomen veelvoorkomende v4→v5 migratieproblemen, zoals het gebruik van verouderde chain API's, ongeldige paletnamen of het verwijzen naar d3 in gebruikerscode.

Evaluatieresultaten

De Harness Engineering-aanpak is rigoureus getest tegen 174 testcases voor diagramgeneratie, wat aanzienlijke verbeteringen ten opzichte van basismethoden laat zien:

De resultaten tonen aan dat Harness Engineering LLM's in staat stelt om bijna productieklare nauwkeurigheid te bereiken (tot 98,2%), waarbij de Context7-baseline-aanpak aanzienlijk wordt overtroffen.

[!TIP] Binnenkort meer vaardigheden.

Bibliotheekgebruik

Het kan als bibliotheek worden gebruikt in uw Node.js-projecten met CLI en API.

CLI-gebruik

We bieden ook een CLI-tool genaamd antv voor eenvoudig gebruik in uw terminal, wereldwijd installeren:

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

Vaardigheden ophalen of weergeven op query:

# 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

Gebruik voor de opdracht:

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")

Opmerking: --content voegt altijd de kernbeperkingen van de bibliotheek (sectie 1 & 2 van SKILL.md, tot aan de <!-- CONSTRAINTS:END --> markering) toe als eerste resultaat, zodat het model de essentiële regels samen met de referentiedocumenten ontvangt.

API-gebruik

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)
}

Opmerkingen:

• Standaard geeft ophalen lichte resultaatobjecten zonder het content veld.
• content: true retourneert de markdown-inhoud (frontmatter-metadata is uitgesloten).
• Wanneer includeInfo true is (de standaardwaarde wanneer content: true), wordt het kernbeperkingenblok — SKILL.md tot aan <!-- CONSTRAINTS:END --> — geïnjecteerd als het eerste element (id met prefix __info__), zodat het model altijd de essentiële regels ziet.

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
}

Licentie

MIT-licentie - zie het LICENSE bestand voor details.