Belajar Frontend - Data Visualization

#Pendahuluan

Data tanpa visualisasi hanyalah tabel. Episode 23 membahas data visualization — mengubah data menjadi chart dan dashboard yang bisa dipahami manusia dalam hitungan detik. Pemilik TokoKita butuh menjawab pertanyaan: "produk mana yang laris minggu ini?" Satu chart menjawab lebih cepat daripada seribu baris tabel.

Mengapa topik ini bagian dari frontend? Karena visualisasi yang baik adalah perpaduan desain (episode 4, 10) dan data. Kalian akan memilih chart yang sesuai maknanya, membangun dashboard interaktif, dan — bagian yang sering dilupakan — memastikan data ratusan ribu baris tetap mulus dirender.

#Prinsip Memilih Chart

Chart bukan dekorasi — ia jawaban untuk pertanyaan data. Pilih berdasarkan makna:

Data penjualan mingguan TokoKita

const sales = [
  { week: "W1", kopi: 120, teh: 90, susu: 60 },
  { week: "W2", kopi: 140, teh: 85, susu: 75 },
  { week: "W3", kopi: 135, teh: 110, susu: 70 },
  { week: "W4", kopi: 160, teh: 120, susu: 88 },
];

#Memilih Library: Recharts vs D3

Recharts adalah titik mulai yang tepat: komponen <LineChart>, <BarChart>, <ResponsiveContainer> langsung dipakai. D3 untuk kasus khusus: grafik jaringan, peta, atau visualisasi yang tidak tersedia di library.

#Praktik: Dashboard TokoKita

Dashboard penjualan sederhana dengan Recharts:

import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
} from "recharts";
 
export function SalesChart({ data }: { data: typeof sales }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="week" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="kopi" stroke="#b45309" />
        <Line type="monotone" dataKey="teh" stroke="#16a34a" />
        <Line type="monotone" dataKey="susu" stroke="#2563eb" />
      </LineChart>
    </ResponsiveContainer>
  );
}

ResponsiveContainer membuat chart menyesuaikan lebar kontainer — penting untuk dashboard yang responsif (episode 4).

#Dashboard yang Baik

• Skimming: 3-4 KPI utama di atas (total penjualan, produk terlaris, dst.) — jawab pertanyaan tanpa scroll.
• Konteks: sertakan perbandingan (vs minggu lalu) agar angka punya makna.
• Drill-down: klik item untuk melihat detail (interaksi).
• Aksesibilitas: sediakan tabel/data alternatif untuk screen reader; chart saja tidak cukup (episode 15).

#Performa Rendering Data Besar

Saat data membesar (ribuan poin per chart), aturan-aturannya:

1. Sampling di server atau preprocessing — jangan render 100k poin ke browser tanpa alasan; agresikan/ringkas di server.
2. Memoize — bungkus komponen chart dengan React.memo dan pastikan data tidak direkonstruksi setiap render (ingat episode 8 & React Compiler).
3. Lazy load — dashboard adalah kandidat ideal next/dynamic (episode 12): jangan bawa library chart ke bundle halaman katalog.
4. Tooltip efisien — tooltip dihitung per hover; untuk data besar, tampilkan titik yang ringkas.

import dynamic from "next/dynamic";
 
const SalesChart = dynamic(() => import("./SalesChart"), {
  ssr: false,
  loading: () => <ChartSkeleton />,
});

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• Pilih chart berdasarkan makna data, bukan selera: perbandingan → bar, tren → line, proporsi → donut.
• Recharts untuk dashboard umum (deklaratif), D3 untuk visualisasi kustom.
• Dashboard baik = KPI di atas, konteks, drill-down, dan alternatif accessible.
• Data besar: sampling, memo, lazy load chart, dan tooltip efisien.

Di episode 24 selanjutnya kita memasuki era baru: AI-native frontend — AI-generated UI, streaming responses, agentic UX, dan UI untuk aplikasi LLM, yang makin menjadi pembeda kompetitif di 2026. Sampai jumpa di episode 24!