Claude Code से D3.js data visualization लागू करना

Start with the real screen

लक्ष्य fancy demo नहीं, बल्कि mobile, keyboard, long text, empty data और business CTA के साथ stable implementation है। 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

सबसे छोटे safe change से implement करें। Routes, style rules और CTA रखें। Copy-paste code, use case, pitfall, mobile check और rollback दें।

Use case checklist

1. Content site में search, charts, related articles और CTA.
2. SaaS admin में lists, boards, dashboards और forms.
3. Product और consultation pages में revenue path सुरक्षित रखना.
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 mobile width पर overflow, code block scroll, CTA visibility, keyboard focus और error state देखें। Ask Claude Code for a second review pass that lists changed files, risky assumptions, removable complexity, and rollback steps.

Monetization angle

इसे team process बनाना हो तो देखें 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

मैंने mobile width, code blocks, CTA और keyboard operation जांचा। Implementation और review अलग रखना अधिक stable रहा।

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.