AI SummaryD3.js를 사용한 인터랙티브 데이터 시각화 가이드입니다. 1. Data Validation: null/NaN 체크 2. Responsive: ResizeObserver 사용
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "d3-viz" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/d3-viz-doyajin174-myskills-3 && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/d3-viz-doyajin174-myskills-3/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/design/d3-viz-doyajin174-myskills-3/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/d3-viz-doyajin174-myskills-3/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/design/d3-viz-doyajin174-myskills-3/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Create interactive data visualizations using D3.js. Use this when creating charts, graphs, network diagrams, geographic visualizations, or custom SVG-based data visualization.
D3.js Visualization
D3.js를 사용한 인터랙티브 데이터 시각화 가이드입니다.
When to Use D3.js
적합한 경우: • 커스텀 차트 (표준 라이브러리에 없는) • 인터랙티브 탐색 (pan, zoom, brush) • 네트워크/그래프 시각화 • 지리 시각화 (커스텀 projection) • 애니메이션 transition • 출판 품질 그래픽 대안 고려: • 3D 시각화 → Three.js • 간단한 차트 → Chart.js, Recharts
Setup
`javascript // npm import * as d3 from 'd3'; // CDN <script src="https://d3js.org/d3.v7.min.js"></script> `
Core Workflow
`javascript function drawVisualization(data) { if (!data || data.length === 0) return; const svg = d3.select('#chart'); svg.selectAll("*").remove(); // Clear previous // 1. Dimensions const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 50 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 2. Main group with margins const g = svg.append("g") .attr("transform", translate(${margin.left},${margin.top})); // 3. Scales const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.x)]) .range([0, innerWidth]); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.y)]) .range([innerHeight, 0]); // 4. Axes g.append("g") .attr("transform", translate(0,${innerHeight})) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); // 5. Data binding g.selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 5) .attr("fill", "steelblue"); } `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster