ReddRadar
Agent skill
d3-viz
Create interactive data visualizations using D3.js. Use this when creating charts, graphs, network diagrams, geographic visualizations, or custom SVG-based data visualization.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/doyajin174/d3-viz
Metadata
Additional technical details for this skill
- author
- chrisvoncsefalvay
- version
- 1.0
SKILL.md
D3.js Visualization
D3.js를 사용한 인터랙티브 데이터 시각화 가이드입니다.
When to Use D3.js
적합한 경우:
- 커스텀 차트 (표준 라이브러리에 없는)
- 인터랙티브 탐색 (pan, zoom, brush)
- 네트워크/그래프 시각화
- 지리 시각화 (커스텀 projection)
- 애니메이션 transition
- 출판 품질 그래픽
대안 고려:
- 3D 시각화 → Three.js
- 간단한 차트 → Chart.js, Recharts
Setup
// npm
import * as d3 from 'd3';
// CDN
<script src="https://d3js.org/d3.v7.min.js"></script>
Core Workflow
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");
}
Common Patterns
Bar Chart
const xScale = d3.scaleBand()
.domain(data.map(d => d.category))
.range([0, innerWidth])
.padding(0.1);
g.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => xScale(d.category))
.attr("y", d => yScale(d.value))
.attr("width", xScale.bandwidth())
.attr("height", d => innerHeight - yScale(d.value))
.attr("fill", "steelblue");
Line Chart
const line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.value))
.curve(d3.curveMonotoneX);
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", line);
Pie Chart
const pie = d3.pie().value(d => d.value);
const arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 20);
g.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc)
.attr("fill", (d, i) => d3.schemeCategory10[i]);
Interactivity
Tooltips
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("visibility", "hidden");
circles
.on("mouseover", (event, d) => {
tooltip.style("visibility", "visible")
.html(`Value: ${d.value}`);
})
.on("mousemove", (event) => {
tooltip
.style("top", (event.pageY - 10) + "px")
.style("left", (event.pageX + 10) + "px");
})
.on("mouseout", () => {
tooltip.style("visibility", "hidden");
});
Zoom & Pan
const zoom = d3.zoom()
.scaleExtent([0.5, 10])
.on("zoom", (event) => {
g.attr("transform", event.transform);
});
svg.call(zoom);
Transitions
// Basic
circles.transition()
.duration(750)
.attr("r", 10);
// Staggered
circles.transition()
.delay((d, i) => i * 50)
.duration(500)
.attr("cy", d => yScale(d.value));
Scales Reference
| Scale Type | Use Case |
|---|---|
scaleLinear |
연속 수치 |
scaleLog |
지수 데이터 |
scaleTime |
시간/날짜 |
scaleBand |
Bar chart 카테고리 |
scaleOrdinal |
색상 매핑 |
scaleSequential |
연속 색상 |
Color Schemes
// Categorical
d3.schemeCategory10 // 10 colors
d3.schemeTableau10 // Tableau 10
// Sequential
d3.interpolateBlues
d3.interpolateYlOrRd
// Diverging
d3.interpolateRdBu
Best Practices
- Data Validation: null/NaN 체크
- Responsive: ResizeObserver 사용
- Performance: 1000+ 요소 시 Canvas 고려
- Accessibility: ARIA labels 추가
- Clean Up: 이전 렌더링 제거
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?