Visualisasi data D3.js dengan Claude Code

Mulai dari layar yang sebenarnya

Tujuannya bukan demo yang keren, melainkan implementasi stabil di mobile, keyboard, teks panjang, data kosong, dan CTA bisnis. Saat membuat chart dengan D3.js, yang pertama membuat tersandung biasanya bukan cara menggambar grafik batangnya, tetapi memotong-tempel kode contoh lalu merusaknya sebelum memahami di mana bagian seperti scaleBand, axisLeft, selection.join, dan transition saling terhubung.

Claude Code paling berguna ketika prompt memuat batasan: file mana yang boleh berubah, apa yang harus tetap terlihat, apa yang butuh dukungan keyboard, dan bagaimana hasilnya akan diverifikasi. Bacalah juga claude code chart library, claude code data visualization, dan claude code dashboard development. Referensi resmi: D3 getting started, D3 scales, D3 axes.

Pecah gambaran besar untuk pemula

Dasar D3.js adalah “mengubah data menjadi piksel, lalu menggambarnya sebagai elemen SVG”. Jika istilah sulit dirapikan lebih dulu, instruksi ke Claude Code pun jadi lebih konkret.

Bagian	Penjelasan sederhana	Peran pada kode ini
selection	Operasi memilih elemen DOM	Menambahkan `svg` ke `#chart`
scale	Mengubah angka atau kategori menjadi posisi di layar	Nama channel ke posisi horizontal, jumlah CV ke vertikal
axis	Skala ukur dan label	Channel di sumbu X, jumlah CV di sumbu Y
mark	Bentuk yang benar-benar terlihat	`rect` untuk batang, `path` untuk garis bantu
join	Mencocokkan data dengan elemen DOM	Batang tetap bisa diperbarui meski jumlah data berubah
transition	Membuat perubahan tampak halus	Animasi batang tumbuh dari bawah

Ke Claude Code, jangan hanya bilang “buatkan grafik batang dengan D3”, tetapi serahkan juga struktur data, satuan tampilan, aksesibilitas, perilaku saat update, dan cara verifikasi.

Prompt untuk Claude Code

Implementasikan dengan perubahan aman paling kecil. Pertahankan routes, style rules, dan CTA. Berikan kode, use case, pitfall, mobile check, dan rollback.

Use case checklist

Search, chart, artikel terkait, dan CTA di content site.
List, board, dashboard, dan form di SaaS.
Menjaga revenue path di halaman produk dan konsultasi.
Workflow review tim, ketika Claude Code mengembalikan implementasi, risiko, dan pengecekan manual sekaligus.

Contoh implementasi

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

Use case nyata: lebih dari sekadar grafik cantik

Dalam praktiknya, jangan melihat D3.js hanya sebagai alat menggambar grafik yang rapi. Dashboard baru menjadi alat pengambilan keputusan ketika ia memvisualkan perilaku yang mengarah ke pendapatan: pertanyaan masuk, pembelian, pendaftaran, dan retensi.

Use case	Alasan D3.js cocok	Yang diminta ke Claude Code
Analisis CV jalur konten	Bisa membandingkan sumber trafik, kategori artikel, dan klik CTA di satu layar	Selaraskan metrik grafik dengan definisi event
Dashboard pemakaian SaaS	Bisa menyatakan jumlah pemakaian fitur, retensi, dan selisih antar paket secara detail	Kunci tipe data, state kosong, state loading, dan tampilan selisih di TypeScript
Monitoring error atau laporan operasi	Bebas merancang time series, ambang, dan penonjolan anomali	Periksa beban render untuk titik data yang banyak
Visualisasi hasil A/B test	Menyajikan selang kepercayaan dan selisih per segmen lebih intuitif daripada tabel	Pisahkan logika agregasi dari tampilan chart

Pitfall checklist

Jangan optimasi hanya untuk screenshot desktop.
Jangan biarkan teks panjang, tabel, SVG, atau code block memicu overflow horizontal.
Jangan menyembunyikan CTA, harga, form, atau slot iklan di balik interaksi dekoratif.
Jangan hanya bergantung pada warna atau drag pointer; keyboard dan alternatif teks tetap penting.
Jangan biarkan Claude Code menulis ulang file tidak terkait, karena biaya review naik dengan cepat.

Kesalahan klasik lain adalah menggambar ulang tanpa menghapus SVG lama sehingga batang dan sumbu bertambah setiap render; cegah dengan container.replaceChildren() di awal. Membuat Tooltip hanya untuk mouse juga membuat informasi tidak sampai ke pengguna keyboard dan pembaca layar, jadi tambahkan tabindex, aria-label, dan event focus.

Verifikasi

Setelah build, cek 375px: tidak ada overflow, code block scroll, CTA terlihat, focus jelas, dan error state stabil. Minta Claude Code melakukan review pass kedua yang mencantumkan file berubah, asumsi berisiko, kompleksitas yang bisa dihapus, dan langkah rollback. Saat menyuruhnya mereview, “cari bug” saja terlalu lemah; sebut observasinya: duplikasi saat render ulang, array kosong, pembagian nol, operasi keyboard, pembaca layar, lebar mobile, dan beban saat data mencapai 1000 baris.

Sudut monetisasi

Untuk menjadikannya proses tim, gunakan Claude Code training and consultation. Intinya bukan hanya UI yang lebih baik, tetapi melindungi iklan, kartu produk, link konsultasi, tabel harga, dan form sambil meningkatkan kemudahan pemeliharaan. Artikel D3.js mudah menarik trafik pencarian, tetapi pembaca rentan menyalin kode lalu pergi, jadi tunjukkan juga “apa yang harus divisualkan” dan “metrik mana yang paling dekat dengan pendapatan”.

Catatan verifikasi langsung

Saya mengecek mobile width, code block, CTA, dan keyboard. Memisahkan implementasi dan review lebih stabil daripada menyerahkan semuanya sekaligus.

Review tambahan

Sebelum publish, bandingkan halaman sebelum dan sesudah perubahan. Pastikan aksi bisnis tetap jelas, layout tidak bergeser, dan implementasi cukup kecil untuk direview rekan lain. Jika perbaikan tidak bisa dijelaskan dalam satu paragraf, pecah menjadi patch yang lebih kecil.

Hasil setelah saya mencoba langkah ini

Pada struktur contoh ini, membagi titik sulit D3.js menjadi “tipe data”, “scale”, “axis”, “mark”, dan “interaksi” lalu menyerahkannya ke Claude Code membuat jumlah revisi turun banyak. Yang paling berefek adalah memasukkan aria-label dan Tooltip saat fokus sebagai syarat sejak awal. Memasukkan aksesibilitas ke daftar pengecekan pada implementasi pertama jauh lebih mudah dijelaskan, baik di kode maupun di artikel, dibanding menambalnya belakangan. Kesimpulannya, kecocokan Claude Code dan D3.js bukan sekadar “cepat memunculkan grafik”: dengan mengunci makna data, maksud tampilan, sudut verifikasi, dan jalur pendapatan dalam satu spesifikasi, visualisasi tetap dipakai setelah dirilis.