Visual interaktif di dalam chat

3.9 Visual interaktif di dalam chat

Tujuan belajar

• Membangun visualisasi data interaktif di dalam chat.

• Menggunakan grafik Recharts, Chart.js, atau SVG dinamis.

• Mengeksplorasi data dengan filter dan interaksi kursor.

Yang perlu disiapkan

• Kumpulan data angka tren atau perbandingan statistik.

Apa fitur ini dan untuk apa

Salah satu keunggulan interaktif Claude di panel Artifacts adalah kemampuannya merancang visualisasi data interaktif. Alih-alih hanya menyajikan grafik gambar statis yang tidak bisa diubah, Claude dapat menulis komponen berbasis pustaka seperti Recharts atau SVG interaktif di mana pengguna dapat mengarahkan kursor untuk melihat tooltip angka, memfilter kategori, atau mengubah skala grafik secara real-time.

Cara memakai

1. Berikan data deret waktu atau tabel perbandingan.

2. Minta Claude: "Buatkan grafik tren penjualan interaktif menggunakan komponen React dan Recharts di panel Artifacts".

3. Tinjau grafik visual yang muncul di panel preview.

4. Arahkan kursor ke titik-titik data untuk melihat detail nilai angka pop-up.

Contoh nyata

Skenario: Menampilkan simulasi perbandingan pertumbuhan bunga majemuk investasi reksa dana vs tabungan biasa selama 20 tahun.

Prompt:

Buatkan visualisasi grafik interaktif perbandingan akumulasi dana: Opsi A (Bunga 10% per tahun) vs Opsi B (Bunga 3% per tahun) dengan modal awal Rp10.000.000 dan setoran bulanan Rp1.000.000. Buat slider agar pengguna bisa menggeser jangka waktu tahun dari 1 hingga 30 tahun.

Hasil Analisis Model:
Aplikasi mini simulasi investasi interaktif dengan slider dinamis langsung dapat dicoba di panel Artifacts.

Analisis Efektivitas:
Visual interaktif membuat konsep keuangan kompleks menjadi sangat gamblang bagi klien.

Panduan Praktik Terbaik & Rekomendasi Alur Kerja

Untuk memaksimalkan nilai tambah dari materi "Visual interaktif di dalam chat", terapkan tiga prinsip kerja profesional berikut:

1. Penyaringan Konteks yang Bersih: Selalu pastikan dokumen atau prompt yang Anda masukkan bebas dari informasi rahasia yang terikat perjanjian kerahasiaan ketat, kecuali Anda telah mengonfigurasi lingkungan akun berbayar dengan jaminan zero data training.

2. Pengujian Output Bertahap: Jangan langsung menyalin hasil generasi mentah ke dokumen final. Lakukan evaluasi cepat pada aspek logika kalimat, keabsahan angka statistik, dan kesesuaian gaya bahasa dengan audiens penerima di Indonesia.

3. Dokumentasi Prosedur Kerja: Catat pola prompt, parameter instruksi, dan berkas rujukan yang terbukti menghasilkan keluaran paling memuaskan sebagai standar operasional prosedur (SOP) internal Anda atau tim kerja Anda.

Batasan fitur ini

• Memerlukan peramban dengan dukungan JavaScript aktif untuk menjalankan preview komponen React.

Latihan

Minta Claude membuat grafik batang interaktif yang menampilkan perbandingan pengeluaran bulanan Anda.

Cek pemahaman

Pertanyaan 1

A. Pengguna dapat menggeser slider, melihat tooltip angka, dan memfilter data secara dinamis
B. Membutuhkan kertas cetak fisik
C. Menghilangkan data angka
D. Tidak bisa dilihat di komputer

Pertanyaan 2

A. Mempercepat penyelesaian pekerjaan secara akurat dan meminimalkan kesalahan manual
B. Menghapus data kantor
C. Mematikan komputer
D. Mengabaikan tanggung jawab profesional

Pertanyaan 3

A. Kesesuaian fakta angka dan kepatuhan terhadap regulasi hukum/etika lokal yang berlaku
B. Kecepatan kipas laptop
C. Warna casing komputer
D. Jumlah baris kalimat di monitor

Kesalahan umum

• Meminta visualisasi interaktif di peramban yang menonaktifkan eksekusi skrip JavaScript.

Sumber yang dicek

• https://support.claude.com/en/articles/12138966-release-notes

• https://claude.com/product/overview

• https://support.claude.com/en/articles/11176164-use-connectors-to-extend-claude-s-capabilities

• https://www.anthropic.com/news/claude-design-anthropic-labs