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

पहले असली screen से शुरू करें

लक्ष्य fancy demo नहीं, बल्कि mobile, keyboard, long text, empty data और business CTA के साथ stable implementation है। Claude Code तब सबसे उपयोगी होता है जब prompt में सीमाएँ हों: कौन-सी files बदल सकती हैं, क्या दिखता रहना चाहिए, किसे keyboard support चाहिए और परिणाम कैसे verify होगा।

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 जहाँ Claude Code implementation, risks और manual checks एक साथ लौटाता है।

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");

Scale, axis और empty data सही रखें

D3 में सबसे ज़्यादा गड़बड़ scale और domain में होती है। d3.max(data, d => d.revenue) यदि undefined लौटाए (खाली array पर) तो ?? 0 से बचाव करें, वरना axis टूट जाती है। ऊपर के code में domain [0, d3.max(...) ?? 0] इसीलिए लिखा है। data खाली हो तो सिर्फ़ axis वाली खाली chart दिखाने के बजाय “अभी data नहीं है” जैसा संदेश दें।

mobile पर fixed width=640 horizontal scroll पैदा कर सकता है। container की चौड़ाई नापकर viewBox के साथ responsive SVG बनाएँ, या ResizeObserver से दोबारा draw करें। keyboard और screen reader के लिए role="img" और aria-labelledby ज़रूरी हैं ताकि chart का अर्थ text रूप में भी पहुँचे।

Pitfall checklist

• केवल desktop screenshot के लिए optimize न करें।
• long text, tables, SVG या code blocks से horizontal overflow न होने दें।
• CTA, price, form या ad slot को किसी सजावटी interaction के पीछे न छिपाएँ।
• सिर्फ़ color या pointer-drag पर निर्भर न रहें; keyboard और text विकल्प मायने रखते हैं।
• Claude Code को असंबंधित files दोबारा न लिखने दें, वरना review लागत तेज़ी से बढ़ती है।

Verification

Build के बाद 375px mobile width पर overflow, code block scroll, CTA visibility, keyboard focus और error state देखें। Claude Code से दूसरा review pass माँगें जो बदली हुई files, जोखिम भरी assumptions, हटाने योग्य complexity और rollback steps सूचीबद्ध करे।

Monetization angle

इसे team process बनाना हो तो देखें Claude Code training and consultation. बात सिर्फ़ बेहतर UI की नहीं है। बात maintainability सुधारते हुए ads, product cards, consultation links, pricing tables और forms को सुरक्षित रखने की है।

Hands-on verification note

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

Extra review

Publish से पहले page की change-से-पहले और बाद की स्थिति की तुलना करें। पक्का करें कि business action अब भी स्पष्ट है, layout खिसकता नहीं, और implementation इतना छोटा है कि कोई दूसरा साथी review कर सके। यदि सुधार एक paragraph में नहीं समझाया जा सकता, तो उसे छोटे patch में बाँट दें।

इस लेख में बताई बातों को असल में आज़माने पर

यह तरीक़ा मैंने मौजूदा UI को न तोड़ने की शर्त के साथ 375px mobile width, सामान्य प्रदर्शन और keyboard operation देखते हुए जाँचा। D3 की पूरी chart एक बार में बनवाने के बजाय data contract, scale/axis और interaction को अलग चरणों में सौंपने से diff पढ़ने योग्य रहा और empty-data जैसी स्थितियाँ deploy से पहले पकड़ में आ गईं।