ChartGPU – Library chart berkinerja tinggi berbasis WebGPU (merender 1M titik pada 60fps)

• WebGPU dimanfaatkan untuk merender library chart open source bagi dataset besar secara mulus
• Ditulis dengan TypeScript dan mendukung berbagai tipe seri seperti line, area, bar, scatter, pie, candlestick
• Menyertakan fitur interaktif bawaan seperti hover highlight, tooltip, crosshair, gesture zoom, dan preset tema
• Dapat digunakan dengan mudah di lingkungan React melalui paket integrasi React (chartgpu-react)
• Dengan rendering berakselerasi WebGPU, library ini menawarkan performa sekitar 60 frame per detik dan cocok untuk visualisasi data skala besar

---

Ringkasan

• ChartGPU adalah library rendering chart berkinerja tinggi berbasis WebGPU yang dapat memvisualisasikan data dalam jumlah besar secara mulus
  • Dikembangkan dengan TypeScript dan dirilis di bawah lisensi MIT
  • Dapat diinstal dengan perintah npm install chartgpu

Fitur utama

• Menjaga FPS tinggi pada dataset besar melalui rendering berakselerasi WebGPU
• Mendukung berbagai jenis chart: line, area, bar, scatter, pie, candlestick
• Menyertakan fitur interaktif bawaan: hover highlight, tooltip, crosshair
• Mendukung pembaruan data streaming (appendData(...))
• Menyediakan fitur zoom sumbu X (termasuk gesture dan UI slider)
• Mendukung preset tema (dark / light) serta tema kustom

Arsitektur

• ChartGPU.create(...) mengelola canvas dan siklus hidup WebGPU, sementara penyesuaian rendering ditangani oleh Render Coordinator
• Struktur internalnya terdiri dari lapisan berikut
  • WebGPU Core: inisialisasi adaptor dan device GPU, konfigurasi canvas
  • Render Coordinator: tata letak, skala, unggah data, dan manajemen render pass
  • GPU Renderers: renderer untuk tiap chart seperti Grid, Area, Bar, Scatter, Line, Pie, Candlestick
  • Shaders (WGSL): kumpulan file shader yang sesuai untuk masing-masing renderer
  • Chart Sync: menyediakan fitur sinkronisasi crosshair antar beberapa chart

Integrasi React

• Tersedia paket React chartgpu-react
• Instalasi: npm install chartgpu-react

Dukungan browser

• Memerlukan browser dengan WebGPU aktif
  • Mendukung Chrome 113+, Edge 113+, Safari 18+
  • Firefox saat ini masih dalam pengembangan

[GN⁺]

Komentar Hacker News

• Saya maintainer uPlot. Proyek ini menarik, jadi saya akan mempelajarinya lebih dalam dalam waktu dekat
  Kesan singkat saya setelah melihat demo 1M:

  • Sampling berisiko menghilangkan puncak yang penting. uPlot tidak melakukan sampling, jadi untuk perbandingan performa yang adil fitur ini perlu dimatikan. Lihat PR ini
  • Penggunaan CPU saat idle cukup tinggi. Sebaliknya, solusi berbasis canvas hampir tidak memakai CPU jika data atau skala tidak berubah. Di WebGPU pun sepertinya ini bisa diatasi dengan kode yang menjeda update
  • Saat menampilkan banyak chart di satu halaman, Chrome membatasi konteks GL hingga 16. Plotly mengatasinya dengan virtual-webgl
  • Format data seperti [[0,1],[1,3],[2,2]] mengharuskan pembuatan jutaan array kecil, jadi lebih baik diubah ke struktur data berbasis kolom
    Sebagai referensi, ada juga demo 2M data point milik uPlot
  • Sambil mengucapkan terima kasih karena sudah meluangkan waktu untuk melihatnya, ia mengatakan bahwa uPlot adalah sumber inspirasi besar yang membuktikan chart di browser tidak harus lambat
    Masukan soal sampling LTTB dan masalah CPU idle sama-sama valid, dan sampling memang aktif secara default di demo, tetapi bisa dibuat adil dengan sampling: none. Ia berencana menambahkan toggle di UI.
    Masalah loop render yang terus berjalan bahkan saat diam juga bisa diperbaiki. Ia berencana mengubahnya agar render hanya terjadi saat data berubah atau ada interaksi
  • Saya pengembang asli Flot. Dulu saat menangani jutaan data point, saya mengimplementasikan mip-mapping di sisi klien
    Untuk line chart, jika adaptive sampling dilakukan berdasarkan perbedaan piksel antar titik yang berdekatan, sebagian besar titik bisa dibuang tanpa perbedaan visual yang berarti.
    Menggambar 1 juta titik pada chart selebar 1000 piksel itu tidak efisien
  • Saya penasaran apakah wavelet decomposition bisa dipakai untuk mengurangi hanya komponen frekuensi tinggi sambil tetap mempertahankan puncak. Secara teori ini tampak lebih masuk akal daripada sampling, tetapi saya belum menemukan literatur terkait
  • Sebagai pengguna berat uPlot, saya ingin berterima kasih karena telah membuat library yang hebat
  • Di beberapa proyek, untuk melakukan resampling data tanpa kehilangan puncak, saya memakai pendekatan menggambar grafik area min-max bersamaan. Hasilnya cukup baik

• Saat jumlah data point sangat besar, sebaiknya hitung berapa banyak titik yang dicakup setiap piksel lalu tampilkan intensitas lewat kecerahan atau warna
  Ini mirip pendekatan digital phosphor dalam elektronika. Lihat contoh di tautan ini

  • Saran yang bagus. Rendering berbasis kepadatan seperti ini efektif untuk data yang saling bertumpuk. Dengan compute shader WebGPU, titik bisa di-binning ke grid, dihitung per sel, lalu dirender sebagai intensitas.
    Ini sangat berguna terutama pada scatter plot untuk menampilkan struktur klaster. Saya tambahkan ke daftar ide
  • Setuju. Heatmap intensitas skala log cocok untuk dataset besar, misalnya line chart dengan 10 ribu seri. Jika perlu, pengguna bisa drill-down ke detail

• Patch penggunaan CPU idle sudah selesai.
  Saya menambahkan toggle “Benchmark mode” ke contoh benchmark 1M agar fungsi benchmark tetap ada, tetapi saat tidak aktif perilakunya jadi efisien
  Jika FPS ditampilkan 0, itu normal — kalau tidak ada yang perlu dirender, tidak ada frame yang digambar
  Saat diperlukan, render akan langsung berjalan pada kecepatan maksimum
  Saya tersentuh oleh umpan balik antusias dari komunitas

• Saya sedang mengembangkan alat analisis Link Graph berbasis browser (webvetted.com/workbench)
  Saya perlu memvisualisasikan graf dengan ribuan node/edge, jadi kalau bisa menangani 1M point, ini sepertinya akan sangat membantu

  • Proyek itu dinilai keren, dan dijelaskan bahwa ChartGPU saat ini berfokus pada chart 2D (line, bar, scatter, dll.)
    Namun, pola rendering WebGPU sangat cocok juga untuk visualisasi graf. Renderer scatter yang ada sudah menangani ribuan instance, jadi menambahkan edge secara struktural seharusnya tidak terlalu sulit
    Ia menanyakan apakah fitur graf sebaiknya diintegrasikan ke ChartGPU, atau dipisah sebagai library GraphGPU terpisah
  • Ada pertanyaan tentang daftar kepercayaan webvetted.com di pemindai URL Gridinsoft
  • Dinilai sangat berguna, dan katanya akan langsung diintegrasikan hari ini
  • Sebagai calon pengguna, ada saran bahwa situs webnya kurang memiliki halaman yang menunjukkan fitur produk secara lebih rinci. Pengenalan produk perlu diperkuat

• Mengesankan. Rasanya ini salah satu demo paling mengesankan

• Akan bagus jika ditambahkan fitur menggambar garis dan band untuk candlestick. Bukan sekadar plotting, tapi juga harus bisa menyorot point
  Dulu saya sempat mencoba membuat hal serupa sendiri dengan WebGPU, dan proyek ini membuat saya ingin langsung mencobanya

• Saya maintainer TimeLine. Demo live streaming ChartGPU (tautan) ternyata tidak semulus yang saya harapkan
  Sebagai perbandingan, demo ini yang dibuat dengan canvas 2D di main thread berjalan jauh lebih mulus

  • Seluruh library ini terlihat seperti kode yang dihasilkan AI.
    Lihat file terkait: webgpu-pro.md dan webgpu-expert.md

• Saya menemukan bug slider di contoh 1M point (tautan)
  Saat di-drag, slider tidak tetap berada di bawah kursor dan malah berpindah dengan jarak yang tidak terduga

  • Katanya ini sudah kedua kalinya masalah yang sama dilaporkan. Tampaknya penyebabnya sama dengan bug scrollbar di Mac M1
    Ini adalah masalah pemetaan koordinat pada slider data zoom, dan prioritasnya akan dinaikkan untuk diperbaiki

• Selamat, tetapi 1M point itu level biasa saja di bidang finansial
  Mesin rendering yang sedang saya kembangkan kini telah meningkatkan performa dari 10 juta point menjadi 100 juta point
  Lihat video demo

• Plotly sudah bisa menangani lebih dari 10 juta point dengan WebGL sejak beberapa tahun lalu
  Ada banyak library dengan kemampuan serupa
  Lihat demo performa