claude-d3js-skill
대화형 D3.js 데이터 시각화 구축
복잡성 없이 맞춤형 출판 품질의 데이터 시각화를 생성하세요. 이 스킬은 차트, 그래프, 대화형 그래픽을 위한 즉시 사용 가능한 템플릿과 함께 전문 D3.js 지침을 제공하며 모든 JavaScript 프레임워크에서 작동합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "claude-d3js-skill". 월별 온도 추세를 보여주는 선 차트 생성
Résultat attendu:
SVG 선 차트가 포함된 완성된 D3.js React 컴포넌트. x축(월), y축(온도), 부드러운 곡선 보간, 선 아래 그라데IENT 채우기 영역, 호버 시 정확한 값을 표시하는 툴팁 포함.
Utilisation de "claude-d3js-skill". 시장 점유율 비교를 위한 파이 차트 구축
Résultat attendu:
애니메이션.entry 전환이 있는 대화형 D3.js 파이 차트, 호버 시 분리된 슬라이스, percentage 레이블, 색상 코딩이 있는 외부 범례, 클릭 시 선택한 슬라이스 애니메이션.
Audit de sécurité
SûrAll 392 static analyzer findings were evaluated and dismissed as false positives. The pattern detections for 'external_commands', 'weak cryptographic algorithm', 'C2 keywords', 'network', and 'filesystem' operations were triggered by markdown documentation code blocks, D3.js API method names (schemeCategory10, nodes, desc), hex color codes in colour scheme documentation, and standard CDN import examples. This is a legitimate D3.js data visualization skill containing only documentation and code templates with no executable security risks.
Score de qualité
Ce que vous pouvez construire
비즈니스 대시보드 개발자
KPI 차트, 추세 시각화 및 비즈니스 분석 플랫폼을 위한 대화형 필터가 포함된 실행자 대시보드를 생성하세요.
데이터 저널리스트
독자가 데이터 기반 내러티브를 탐색할 수 있도록 도와주는 사용자 정의 차트와 맵이 포함된 매력적인 대화형 스토리를 구축하세요.
리서치 분석가
스케일, 축 및 통계적 표현에 대한 정밀한 제어가 가능한 출판 품질의 과학적 시각화를 생성하세요.
Essayez ces prompts
분기별 수익 데이터를 표시하는 D3.js를 사용한 반응형 막대 차트를 생성하세요. 적절한 축 레이블, 호버 시 툴팁을 포함하고 색맹 접근 가능한 팔레트를 사용하세요. 완성된 React 컴포넌트 코드를 제공하세요.
각 포인트가 제품을 나타내는 D3.js 대화형 산점도를 구축하세요. 줌 및 팬 기능 추가, 개별 포인트 클릭 하이라이트, 데이터 필터 변경 시 동적으로 업데이트되는 범례를 포함하세요.
엔티티 간 관계를 보여주는 힘 기반 네트워크 다이어그램을 생성하세요. 노드 드래그 충돌 감지, 관계 유형에 따른 사용자 정의 링크 스타일링, 노드 추가 또는 제거 시Animated transitions을 구현하세요.
D3.js geo 투영을 사용하여 지리적 코로플레스 맵을 구축하세요. 색상 인코딩으로 지역 데이터 표시, 국가 및 주 수준 간 줌 전환 추가, 호버 시 자세한 통계가 포함된 툴팁을 표시하세요.
Bonnes pratiques
- 이전 SVG 콘텐츠는 항상 selectAll('*').remove()로 지우，然后再渲染以防止重复元素
- 적절한 축 간격을 위해 margin 규칙을 사용하고 차트 차원에서 레이블 오버플로우 수용
- 적응형 레이아웃을 위해 ResizeObserver 또는 window resize 리스너를 사용하여 반응형 크기 구현
Éviter
- 하드코딩된 차원 사용 금지 - 항상 부모 요소 크기에 적응하는 반응형 컨테이너 사용
- 루프 또는 전환 내 스케일 생성 금지 - 성능을 위해 한 번 정의하고 재사용
- 단순 정적 차트에 D3 사용 금지 - 기본 시각화에는 CSS 또는 경량 라이브러리 선호