정밀한 제어가 가능한 커스텀 차트, 그래프, 네트워크 시각화를 구축하세요. 이 스킬은 모든 JavaScript 프레임워크에서 D3.js 를 사용하여 출판 품질의 인터랙티브 그래픽을 만드는 데 도움이 됩니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"d3-viz" 사용 중입니다. 판매 데이터를 표시하는 막대 차트 생성: 제품 A(150), 제품 B(230), 제품 C(180)
예상 결과:
다음 기능을 포함한 D3.js 막대 차트가 있는 React 컴포넌트 생성: SVG 설정, scaleBand x 축, scaleLinear y 축, axisBottom 및 axisLeft, steelblue 채우기가 있는 스타일된 막대, 제품 및 값에 대한 축 레이블
"d3-viz" 사용 중입니다. 툴팁이 포함된 인터랙티브 산점도 구축
예상 결과:
다음 기능이 있는 D3.js 산점도 생성: 데이터에 바인딩된 circle 요소, 툴팁 div 를 표시하는 호버 이벤트 리스너, 마우스오버 시 트랜지션 효과, 패딩이 계산된 x/y 스케일, 축 제너레이터 및 레이블
"d3-viz" 사용 중입니다. 내 네트워크 데이터로 힘 기반 그래프 만들기
예상 결과:
다음 기능이 있는 D3.js forceSimulation 구현: 노드 반발을 위한 forceManyBody, 에지 연결을 위한 forceLink, 포지셔닝을 위한 forceCenter, 드래그 이벤트 핸들러가 있는 드래그 가능 노드, 동적 링크 거리 및 강도 계산
보안 감사
안전All static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
품질 점수
만들 수 있는 것
대시보드 빌더
비즈니스 메트릭, 분석 또는 모니터링 시스템을 위한 실시간 데이터 시각화가 포함된 인터랙티브 대시보드 생성
연구 시각화 도구
연구 데이터를 학술 논문이나 프레젠테이션을 위한 출판 품질의 차트와 그래프로 변환
커스텀 차트 디자이너
마케팅이나 스토리텔링을 위해 표준 차트 라이브러리를 넘어선 독특하고 브랜드화된 시각화 구축
이 프롬프트를 사용해 보세요
월간 판매 데이터를 표시하는 D3.js 막대 차트를 생성하세요. 축 레이블, 제목을 포함하고 막대는 steelblue 색상을 사용하세요. 차트의 너비는 800px, 높이는 400px 여야 합니다.
D3.js 로 시간에 따른 온도 추세를 보여주는 인터랙티브 라인 차트를 구축하세요. 마우스가 데이터 포인트 위로 이동할 때 값을 표시하는 호버 툴팁을 추가하세요. 특정 시간 범위를 조사할 수 있는 확대 기능을 포함하세요.
엔티티 간 관계를 보여주는 D3.js 힘 기반 네트워크 다이어그램을 생성하세요. 노드는 중요도에 따라 크기가 조정되고 카테고리에 따라 색상이 지정되어야 합니다. 사용자가 노드를 재배치할 수 있는 드래그 기능을 추가하세요.
D3.js 를 사용하여 시간에 따라 여러 데이터 시리즈를 비교하는 스택형 영역 차트를 설계하세요. 데이터 업데이트 시 부드러운 트랜지션을 구현하세요. 범례를 포함하고 색맹 접근성 가능한 팔레트를 사용하세요.
모범 사례
- 컴포넌트가 다시 렌더링될 때 메모리 누수와 중복 시각화를 방지하기 위해 렌더링 전에 항상 SVG 요소를 선택하고 제거하세요
- 수동 계산 대신 모든 차원 매핑에 D3.js 스케일을 사용하세요 - 일관된 크기와 더 쉬운 반응형 디자인이 보장됩니다
- SVG 요소에 ARIA 레이블, 제목, 설명을 추가하고 색맹 사용자를 위해 색상 구성을 테스트하여 적절한 접근성을 구현하세요
피하기
- 초기 렌더링 후 React 가 관리하는 DOM 을 D3.js 로 직접 조작하지 마세요 - React 의 가상 조정이 깨지고 성능 문제가 발생합니다
- 차트 크기를 하드코딩하지 마세요 - 컨테이너 쿼리나 Resize Observer 를 사용하여 시각화가 뷰포트 변경에 반응하도록 하세요
- D3 선택션에 바인딩하기 전에 데이터 유효성 검사를 절대 생략하지 마세요 - 유효성이 검사되지 않은 데이터는 조용한 실패나 알 수 없는 렌더링 오류를 일으킬 수 있습니다