Chart Visualization Skill

This skill provides a comprehensive workflow for transforming data into visual charts. It handles chart selection, parameter extraction, and image generation.

Workflow

To visualize data, follow these steps:

1. Intelligent Chart Selection

Analyze the user's data features to determine the most appropriate chart type. Use the following guidelines (and consult references/ for detailed specs):

• Time Series: Use generate_line_chart (trends) or generate_area_chart (accumulated trends). Use generate_dual_axes_chart for two different scales.

• Comparisons: Use generate_bar_chart (categorical) or generate_column_chart. Use generate_histogram_chart for frequency distributions.

• Part-to-Whole: Use generate_pie_chart or generate_treemap_chart (hierarchical).

• Relationships & Flow: Use generate_scatter_chart (correlation), generate_sankey_chart (flow), or generate_venn_chart (overlap).

• Maps: Use generate_district_map (regions), generate_pin_map (points), or generate_path_map (routes).

• Hierarchies & Trees: Use generate_organization_chart or generate_mind_map.

• Specialized:

• generate_radar_chart: Multi-dimensional comparison.

• generate_funnel_chart: Process stages.

• generate_liquid_chart: Percentage/Progress.

• generate_word_cloud_chart: Text frequency.

• generate_boxplot_chart or generate_violin_chart: Statistical distribution.

• generate_network_graph: Complex node-edge relationships.

• generate_fishbone_diagram: Cause-effect analysis.

• generate_flow_diagram: Process flow.

• generate_spreadsheet: Tabular data or pivot tables for structured data display and cross-tabulation.

2. Parameter Extraction

Once a chart type is selected, read the corresponding file in the references/ directory (e.g., references/generate_line_chart.md) to identify the required and optional fields.

Extract the data from the user's input and map it to the expected args format.

3. Chart Generation

Invoke the scripts/generate.js script with a JSON payload.

Payload Format:

{

  "tool": "generate_chart_type_name",

  "args": {

    "data": [...],

    "title": "...",

    "theme": "...",

    "style": { ... }

  }

}

Execution Command:

node ./scripts/generate.js '<payload_json>'

4. Result Return

The script will output the URL of the generated chart image.

Return the following to the user:

• The image URL.

• The complete args (specification) used for generation.

Reference Material

Detailed specifications for each chart type are located in the references/ directory. Consult these files to ensure the args passed to the script match the expected schema.

License

This SKILL.md is provided by antvis/chart-visualization-skills.

Licensed under the MIT License.