Community코딩 & 개발github.com

차트 시각화

사용자가 데이터를 시각화하려고 할 때 사용하는 스킬입니다. 26가지 차트 유형 중 가장 적합한 차트를 지능적으로 선택하고, 상세 명세에 따라 파라미터를 추출한 후 JavaScript 스크립트를 사용하여 차트 이미지를 생성합니다.

차트 시각화란 무엇인가요?

이 스킬은 데이터를 시각적 차트로 변환하는 종합적인 워크플로우를 제공합니다. 사용자의 데이터 특징을 분석하여 26가지 사용 가능한 차트 유형(예: 시계열, 비교, 부분-전체, 관계 및 흐름, 지도, 계층 구조 및 트리, 특수 차트 등) 중 가장 적절한 차트 유형을 지능적으로 선택합니다. 차트 유형이 선택되면 `references/` 디렉토리의 상세 명세 파일을 참조하여 필요한 파라미터를 추출하고 JSON 페이로드로 구성합니다. 그런 다음 `scripts/generate.js` 스크립트를 호출하여 차트 이미지를 생성하고 이미지 URL과 전체 args 사양을 사용자에게 반환합니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트 환경에서 사용하도록 설계되었으며, 개발자, 데이터 분석가, AI 에이전트 사용자가 데이터를 신속하게 시각화하는 데 유용합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bytedance/deer-flow/tree/main/skills/public/chart-visualization

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

차트 시각화 스킬

이 스킬은 데이터를 시각적 차트로 변환하는 종합적인 워크플로우를 제공합니다. 차트 선택, 파라미터 추출 및 이미지 생성을 처리합니다.

워크플로우

데이터를 시각화하려면 다음 단계를 따르세요:

1. 지능형 차트 선택

사용자의 데이터 특징을 분석하여 가장 적절한 차트 유형을 결정합니다. 다음 지침을 사용하고 (상세 명세는 references/ 참조):

  • 시계열: generate_line_chart(추세) 또는 generate_area_chart(누적 추세)를 사용합니다. 두 가지 다른 척도가 있는 경우 generate_dual_axes_chart를 사용합니다.
  • 비교: generate_bar_chart(범주형) 또는 generate_column_chart를 사용합니다. 빈도 분포에는 generate_histogram_chart를 사용합니다.
  • 부분-전체: generate_pie_chart 또는 generate_treemap_chart(계층적)를 사용합니다.
  • 관계 및 흐름: generate_scatter_chart(상관관계), generate_sankey_chart(흐름) 또는 generate_venn_chart(겹침)를 사용합니다.
  • 지도: generate_district_map(지역), generate_pin_map(포인트) 또는 generate_path_map(경로)를 사용합니다.
  • 계층 구조 및 트리: generate_organization_chart 또는 generate_mind_map을 사용합니다.
  • 특수 차트:
    • generate_radar_chart: 다차원 비교.
    • generate_funnel_chart: 프로세스 단계.
    • generate_liquid_chart: 백분율/진행률.
    • generate_word_cloud_chart: 텍스트 빈도.
    • generate_boxplot_chart 또는 generate_violin_chart: 통계적 분포.
    • generate_network_graph: 복잡한 노드-에지 관계.
    • generate_fishbone_diagram: 원인-결과 분석.
    • generate_flow_diagram: 프로세스 흐름.
    • generate_spreadsheet: 구조화된 데이터 표시 및 교차 분석을 위한 표 형식 데이터 또는 피벗 테이블.

2. 파라미터 추출

차트 유형이 선택되면 references/ 디렉토리에서 해당 파일(예: references/generate_line_chart.md)을 읽어 필수 및 선택적 필드를 식별합니다. 사용자 입력에서 데이터를 추출하고 예상되는 args 형식에 매핑합니다.

3. 차트 생성

JSON 페이로드와 함께 scripts/generate.js 스크립트를 호출합니다.

페이로드 형식:

{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}

실행 명령어:

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

4. 결과 반환

스크립트는 생성된 차트 이미지의 URL을 출력합니다. 다음을 사용자에게 반환합니다:

  • 이미지 URL.
  • 생성에 사용된 전체 args(사양).

참고 자료

각 차트 유형에 대한 상세 명세는 references/ 디렉토리에 있습니다. 스크립트에 전달되는 args가 예상 스키마와 일치하는지 확인하려면 이 파일들을 참조하세요.

라이선스

이 SKILL.md는 antvis/chart-visualization-skills에서 제공합니다. MIT 라이선스에 따라 사용이 허가됩니다.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

academic-paper-review

Use this skill when the user requests to review, analyze, critique, or summarize academic papers, research articles, preprints, or scientific publications. Supports comprehensive structured reviews covering methodology assessment, contribution evaluation, literature positioning, and constructive feedback generation. Trigger on queries involving paper URLs, uploaded PDFs, arXiv links, or requests like "review this paper", "analyze this research", "summarize this study", or "write a peer review".

bootstrap

Generate a personalized SOUL.md through a warm, adaptive onboarding conversation. Trigger when the user wants to create, set up, or initialize their AI partner's identity — e.g., "create my SOUL.md", "bootstrap my agent", "set up my AI partner", "define who you are", "let's do onboarding", "personalize this AI", "make you mine", or when a SOUL.md is missing. Also trigger for updates: "update my SOUL.md", "change my AI's personality", "tweak the soul".

bytedance/academic-paper-review

Use this skill when the user requests to review, analyze, critique, or summarize academic papers, research articles, preprints, or scientific publications. Supports comprehensive structured reviews covering methodology assessment, contribution evaluation, literature positioning, and constructive feedback generation. Trigger on queries involving paper URLs, uploaded PDFs, arXiv links, or requests like "review this paper", "analyze this research", "summarize this study", or "write a peer review".

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

bytedance/claude-to-deerflow

Interact with DeerFlow AI agent platform via its HTTP API. Use this skill when the user wants to send messages or questions to DeerFlow for research/analysis, start a DeerFlow conversation thread, check DeerFlow status or health, list available models/skills/agents in DeerFlow, manage DeerFlow memory, upload files to DeerFlow threads, or delegate complex research tasks to DeerFlow. Also use when the user mentions deerflow, deer flow, or wants to run a deep research task that DeerFlow can handle.

bytedance/consulting-analysis

Use this skill when the user requests to generate, create, or write professional research reports including but not limited to market analysis, consumer insights, brand analysis, financial analysis, industry research, competitive intelligence, investment due diligence, or any consulting-grade analytical report. This skill operates in two phases — (1) generating a structured analysis framework with chapter skeleton, data query requirements, and analysis logic, and (2) after data collection by other skills, producing the final consulting-grade report with structured narratives, embedded charts, and strategic insights.

bytedance/data-analysis

Use this skill when the user uploads Excel (.xlsx/.xls) or CSV files and wants to perform data analysis, generate statistics, create summaries, pivot tables, SQL queries, or any form of structured data exploration. Supports multi-sheet Excel workbooks, aggregation, filtering, joins, and exporting results to CSV/JSON/Markdown.

bytedance/deep-research

Use this skill instead of WebSearch for ANY question requiring web research. Trigger on queries like "what is X", "explain X", "compare X and Y", "research X", or before content generation tasks. Provides systematic multi-angle research methodology instead of single superficial searches. Use this proactively when the user's question needs online information.

bytedance/find-skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

bytedance/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

bytedance/github-deep-research

Conduct multi-round deep research on any GitHub Repo. Use when users request comprehensive analysis, timeline reconstruction, competitive analysis, or in-depth investigation of GitHub. Produces structured markdown reports with executive summaries, chronological timelines, metrics analysis, and Mermaid diagrams. Triggers on Github repository URL or open source projects.

bytedance/image-generation

Use this skill when the user requests to generate, create, imagine, or visualize images including characters, scenes, products, or any visual content. Supports structured prompts and reference images for guided generation.

bytedance/podcast-generation

Use this skill when the user requests to generate, create, or produce podcasts from text content. Converts written content into a two-host conversational podcast audio format with natural dialogue.

bytedance/ppt-generation

Use this skill when the user requests to generate, create, or make presentations (PPT/PPTX). Creates visually rich slides by generating images for each slide and composing them into a PowerPoint file.

bytedance/skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

bytedance/surprise-me

Create a delightful, unexpected "wow" experience for the user by dynamically discovering and creatively combining other enabled skills. Triggers when the user says "surprise me" or any request expressing a desire for an unexpected creative showcase. Also triggers when the user is bored, wants inspiration, or asks for "something interesting".

bytedance/vercel-deploy

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.

bytedance/video-generation

Use this skill when the user requests to generate, create, or imagine videos. Supports structured prompts and reference image for guided generation.

bytedance/web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

claude-to-deerflow

Interact with DeerFlow AI agent platform via its HTTP API. Use this skill when the user wants to send messages or questions to DeerFlow for research/analysis, start a DeerFlow conversation thread, check DeerFlow status or health, list available models/skills/agents in DeerFlow, manage DeerFlow memory, upload files to DeerFlow threads, or delegate complex research tasks to DeerFlow. Also use when the user mentions deerflow, deer flow, or wants to run a deep research task that DeerFlow can handle.

관련 스킬