# Chart Visualization

> Se usa cuando el usuario quiere visualizar datos. Selecciona el tipo de gráfico más adecuado entre 26 opciones, extrae los parámetros según especificaciones detalladas y genera la imagen con un script de JavaScript.

Fuente: https://skillsagentes.com/skills/bytedance/deer-flow/chart-visualization
Markdown: https://skillsagentes.com/skills/bytedance/deer-flow/chart-visualization.md

Repositorio: https://github.com/bytedance/deer-flow
Autor: bytedance
Licencia: MIT
Actualizado: hace 4 meses
Coste de contexto: 64 tok instalada, 840 tok al activarse, 9k tok con todos los archivos del bundle
Bundle: 28 archivos, 35 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent claude-code
# Cursor
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent cursor
# Codex
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent codex
# Gemini CLI
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent gemini
# Windsurf
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent windsurf
# Cline
npx -y skills add bytedance/deer-flow --skill chart-visualization --agent cline
```

## Qué hace

- Selecciona el tipo de gráfico más adecuado entre 26 opciones según las características de los datos (series temporales, comparaciones, parte-todo, relaciones, mapas, jerarquías)
- Lee la especificación de referencia del gráfico elegido para extraer y mapear los parámetros requeridos
- Genera la imagen del gráfico invocando 'node ./scripts/generate.js' con el payload JSON
- Devuelve la URL de la imagen generada junto con la especificación completa usada

## Cuándo usarla

- El usuario quiere visualizar datos

## Qué la activa

- "Visualiza estos datos de ventas mensuales"
- "Genera un gráfico de dispersión con estos puntos"
- "Haz un mapa mental con esta jerarquía de temas"

## Antes de instalar

- Requiere Node.js >= 18.0.0.
- Necesita en el PATH: node
- Variables de entorno: JSON, SERVICE_ID, VIS_REQUEST_SERVER
- makes network requests
- reads environment config

## Archivos

- SKILL.md — 3 KB
- references/generate_area_chart.md — 1 KB
- references/generate_bar_chart.md — 1 KB
- references/generate_boxplot_chart.md — 1 KB
- references/generate_column_chart.md — 1 KB
- references/generate_district_map.md — 2 KB
- references/generate_dual_axes_chart.md — 1 KB
- references/generate_fishbone_diagram.md — 911 B
- references/generate_flow_diagram.md — 996 B
- references/generate_funnel_chart.md — 950 B
- references/generate_histogram_chart.md — 1 KB
- references/generate_line_chart.md — 1 KB
- references/generate_liquid_chart.md — 985 B
- references/generate_mind_map.md — 855 B
- references/generate_network_graph.md — 952 B
- references/generate_organization_chart.md — 934 B
- references/generate_path_map.md — 878 B
- references/generate_pie_chart.md — 1011 B
- references/generate_pin_map.md — 991 B
- references/generate_radar_chart.md — 977 B
- references/generate_sankey_chart.md — 1 KB
- references/generate_scatter_chart.md — 1 KB
- references/generate_spreadsheet.md — 2 KB
- references/generate_treemap_chart.md — 966 B
- references/generate_venn_chart.md — 933 B
- references/generate_violin_chart.md — 1 KB
- references/generate_word_cloud_chart.md — 878 B
- scripts/generate.js — 4 KB

## SKILL.md

Reproducido tal cual desde bytedance/deer-flow bajo MIT. Esta sección es el documento original y está en inglés.

# 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:**
```json
{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}
```

**Execution Command:**
```bash
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](https://github.com/antvis/chart-visualization-skills).
Licensed under the [MIT License](https://github.com/antvis/chart-visualization-skills/blob/master/LICENSE).

## Dónde encaja

- Categoría: [Datos y analítica](https://skillsagentes.com/categorias/datos-analitica.md) — Consulta, limpia y visualiza datos sin salir del agente.
- Creador: [bytedance](https://skillsagentes.com/creators/bytedance.md) — 27 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Engineer System Change](https://skillsagentes.com/skills/bytedance/deer-flow/engineer-system-change.md): Evalúa y ejecuta cambios de sistema no triviales desde primeros principios: RFCs, features, refactors, migraciones o nuevas APIs, exigiendo consumidores concretos, la solución mínima suficiente y evidencia proporcional al riesgo.
- [Skill Reviewer](https://skillsagentes.com/skills/bytedance/deer-flow/skill-reviewer.md): Revisa paquetes de skills de DeerFlow: preparación para publicar, triggers, límites de seguridad, recursos y evidencia. Úsala cuando pidan auditar, calificar o validar para producción una skill.
- [Smoke Test](https://skillsagentes.com/skills/bytedance/deer-flow/smoke-test.md): Skill de smoke test de extremo a extremo para DeerFlow: actualiza el código, despliega en local o Docker, verifica disponibilidad de servicios, hace health check y genera el reporte final.
- [Skill Creator](https://skillsagentes.com/skills/bytedance/deer-flow/skill-creator.md): Crea skills nuevas, modifica y mejora skills existentes, y mide su rendimiento. Úsala para crear una skill, editarla, correr evals, hacer benchmark con análisis de varianza, u optimizar su descripción.
- [Deerflow Maintainer Orchestrator](https://skillsagentes.com/skills/bytedance/deer-flow/deerflow-maintainer-orchestrator.md): Manejo de issues y PRs de GitHub solo por comentarios para mantenedores de DeerFlow: resuelve alcance con gh, analiza, publica o redacta comentarios de issues y revisiones de PR, y compara PRs en competencia.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)