정보
이 스킬은 개발자들이 D3.js를 사용하여 완전히 사용자 정의된 인터랙티브 데이터 시각화를 만들 수 있게 해주며, SVG 요소와 데이터 바인딩에 대한 완전한 제어권을 제공합니다. 표준 라이브러리로는 구현할 수 없는 정교한 전환 효과와 상호작용을 갖춘 독특하고 복잡한 차트를 구축하는 데 이상적입니다. 단순한 사전 스타일링된 차트가 아닌 맞춤형 데이터 기반 시각화가 필요할 때 사용하세요.
빠른 설치
Claude Code
추천npx skills add majiayu000/claude-skill-registry -a claude-code/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/d3jsClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
GitHub 저장소
Frequently asked questions
What is the d3js skill?
d3js is a Claude Skill by majiayu000. Skills package instructions and resources that Claude loads on demand, so Claude can perform d3js-related tasks without extra prompting.
How do I install d3js?
Use the install commands on this page: add d3js to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does d3js belong to?
d3js is in the data-visualization category, tagged charts, d3, svg, interactive and custom-viz.
Is d3js free to use?
Yes. d3js is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
연관 스킬
이 스킬은 웹 프로젝트에 Plotly.js를 직접 임베드하여 인터랙티브 데이터 시각화를 구현할 수 있는 CDN 스크립트 태그를 제공합니다. 빌드 도구나 npm 의존성 없이 빠른 클라이언트 측 차트 구현이 필요한 개발자에게 이상적입니다. 또한 Python/R Plotly 백엔드를 위한 보완적인 설치 명령어도 포함하고 있습니다.
이 스킬은 개발자가 Highcharts 시각화에 맞춤형 시각 테마를 적용할 수 있게 해줍니다. `Highcharts.setOptions()`를 사용하여 색상, 배경, 글꼴 및 기타 스타일링 옵션을 전역적으로 구성하는 참조 코드를 제공합니다. 애플리케이션 내 여러 차트에서 일관된 브랜딩이나 스타일링을 유지해야 할 때 이 스킬을 사용하세요.
이 Highcharts 스킬은 성능 향상을 위해 WebGL 가속을 사용하여 대규모 데이터셋(수천 개 이상의 포인트)을 렌더링할 수 있게 합니다. GPU 최적화 렌더링을 위한 Boost 모듈과 인터랙티브 데이터 탐색을 위한 주석 및 드릴다운 기능을 포함합니다. 일반 렌더링으로는 성능 문제가 발생할 수 있는 방대한 데이터셋을 시각화할 때 사용하세요.
이 스킬은 TypeScript 프로젝트에서 ECharts 차트를 사용하기 위한 TypeScript 타입 정의와 예제를 제공합니다. 타입 안전한 차트 구성을 위한 `EChartsOption` 타입을 포함하며, 적절한 임포트와 초기화 방법을 보여줍니다. TypeScript에서 ECharts를 사용하여 데이터 시각화를 구축할 때 이 참조 자료를 활용하면 자동 완성과 타입 검사 기능을 활용할 수 있습니다.