Claude Code로 D3.js 데이터 시각화 구현하기

Start with the real screen

목표는 멋진 데모 코드가 아니라 모바일, 키보드, 긴 텍스트, 빈 데이터, 비즈니스 CTA가 있는 실제 화면에서 안정적인 구현입니다. Claude Code is most useful when the prompt contains boundaries: which files may change, what must stay visible, what needs keyboard support, and how the result will be verified.

Related guides: claude code chart library, claude code data visualization, claude code dashboard development. Official references: D3 getting started, D3 scales, D3 axes.

Claude Code prompt

가장 작은 안전한 변경으로 구현해 주세요. 기존 라우트, 스타일 규칙, 주요 CTA를 유지하고 실행 가능한 코드, use case, pitfall, 모바일 확인, rollback 방법을 주세요.

Use case checklist

1. 콘텐츠 사이트의 검색, 차트, 관련 글, CTA 개선.
2. SaaS 관리 화면의 리스트, 보드, 대시보드, 폼.
3. 상품 페이지와 상담 페이지의 매출 동선 보호.
4. Team review workflow where Claude Code returns implementation, risks, and manual checks together.

Implementation example

<figure>
  <svg id="revenue-chart" width="640" height="360" role="img" aria-labelledby="chart-title"></svg>
  <figcaption id="chart-title">Monthly revenue trend</figcaption>
</figure>

import * as d3 from "d3";

const data = [
  { month: "Jan", revenue: 12000 },
  { month: "Feb", revenue: 16400 },
  { month: "Mar", revenue: 15100 },
  { month: "Apr", revenue: 20100 },
];

const svg = d3.select("#revenue-chart");
const width = 640;
const height = 360;
const margin = { top: 24, right: 24, bottom: 44, left: 72 };

const x = d3
  .scaleBand()
  .domain(data.map((d) => d.month))
  .range([margin.left, width - margin.right])
  .padding(0.2);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.revenue) ?? 0])
  .nice()
  .range([height - margin.bottom, margin.top]);

svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

svg
  .append("g")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", (d) => x(d.month) ?? 0)
  .attr("y", (d) => y(d.revenue))
  .attr("width", x.bandwidth())
  .attr("height", (d) => y(0) - y(d.revenue))
  .attr("fill", "#2563eb");

Pitfall checklist

• Do not optimize only for a desktop screenshot.
• Do not let long text, tables, SVG, or code blocks create horizontal overflow.
• Do not hide the CTA, price, form, or ad slot behind a decorative interaction.
• Do not rely only on color or pointer drag; keyboard and text alternatives matter.
• Do not let Claude Code rewrite unrelated files, because review cost rises quickly.

Verification

build 후 375px 모바일 폭에서 overflow가 없는지 확인합니다. 코드 블록, CTA, 키보드 focus, 오류 상태를 함께 봅니다. Ask Claude Code for a second review pass that lists changed files, risky assumptions, removable complexity, and rollback steps.

Monetization angle

이런 개선을 팀 프로세스로 만들고 싶다면 Claude Code training and consultation. The point is not only better UI. The point is to protect ads, product cards, consultation links, pricing tables, and forms while improving maintainability.

Hands-on verification note

모바일 폭, 코드 블록, CTA, 키보드 조작을 실제로 확인했습니다. 구현과 리뷰를 나누는 방식이 더 안정적이었습니다.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.

Extra review

Before publishing, compare the page before and after the change. Confirm that the business action is still obvious, the layout does not shift, and the implementation is small enough for another teammate to review. If the improvement cannot be explained in one paragraph, split it into a smaller patch.