ChartGPU – WebGPU tabanlı yüksek performanslı grafik kütüphanesi (1M noktayı 60fps’de render ediyor)

• WebGPU kullanarak büyük veri kümelerini akıcı şekilde render eden açık kaynaklı bir grafik kütüphanesi
• TypeScript ile yazılmıştır ve çizgi·alan·çubuk·saçılım·pasta·mum çubuğu gibi çeşitli seri türlerini destekler
• Hover vurgulama, tooltip, crosshair, zoom jestleri, tema ön ayarları gibi etkileşim özelliklerini yerleşik olarak sunar
• React entegrasyon paketi (chartgpu-react) sayesinde React ortamında da kolayca kullanılabilir
• WebGPU hızlandırmalı render ile saniyede 60 kare düzeyinde performans sunar ve büyük ölçekli veri görselleştirme için uygun bir araçtır

---

Genel Bakış

• ChartGPU, büyük miktarda veriyi akıcı biçimde görselleştirebilen WebGPU tabanlı yüksek performanslı bir grafik render kütüphanesidir
  • TypeScript ile geliştirilmiştir ve MIT lisansı ile yayımlanmıştır
  • npm install chartgpu komutuyla kurulabilir

Başlıca Özellikler

• WebGPU hızlandırmalı render sayesinde büyük veri kümelerinde bile yüksek FPS korunur
• Çeşitli grafik türleri desteği: line, area, bar, scatter, pie, candlestick
• Yerleşik etkileşim özellikleri: hover highlight, tooltip, crosshair
• Veri akışı güncellemeleri desteği (appendData(...))
• X ekseni zoom özelliği sunar (jestler ve slider UI dahil)
• Tema ön ayarları (dark / light) ve özel tema desteği

Mimari

• ChartGPU.create(...), canvas ve WebGPU yaşam döngüsünü yönetirken render koordinasyonu Render Coordinator tarafından yürütülür
• İç yapı aşağıdaki katmanlardan oluşur
  • WebGPU Core: GPU adaptörü ve cihaz başlatma, canvas yapılandırması
  • Render Coordinator: düzen, ölçekler, veri yükleme, render pass yönetimi
  • GPU Renderers: Grid, Area, Bar, Scatter, Line, Pie, Candlestick vb. her grafik için renderer
  • Shaders(WGSL): her renderer’a karşılık gelen shader dosyalarından oluşur
  • Chart Sync: birden fazla grafik arasında crosshair senkronizasyonu sunar

React Entegrasyonu

• React için chartgpu-react paketi sunuluyor
• Kurulum: npm install chartgpu-react

Tarayıcı Desteği

• WebGPU etkin tarayıcı gerekir
  • Chrome 113+, Edge 113+, Safari 18+ desteklenir
  • Firefox şu anda geliştirme aşamasındadır

[GN⁺]

Hacker News yorumları

• uPlot'un bakımcısıyım. Bu proje ilgimi çekti, yakında derinlemesine incelemeyi planlıyorum
  1M demosuna kısa süre bakınca izlenimlerim şunlar oldu:

  • örnekleme, önemli zirveleri ortadan kaldırma riski taşıyor. uPlot örnekleme yapmadığı için adil bir performans karşılaştırması adına bunun kapatılması gerekir. İlgili ayrıntılar için bu PR'a bakın
  • hiçbir şey yapılmadığında CPU kullanımı oldukça yüksek. Buna karşılık canvas tabanlı çözümler, veri ya da ölçek değişmiyorsa neredeyse hiç CPU kullanmaz. WebGPU'da da güncellemeleri duraklatan kodla bu çözülebilir gibi görünüyor
  • tek sayfada birden fazla grafik gösterildiğinde Chrome GL context sayısını 16 ile sınırlandırıyor. Plotly bunu virtual-webgl ile aşıyor
  • [[0,1],[1,3],[2,2]] gibi veri formatları milyonlarca küçük dizi oluşturmayı gerektirdiğinden kolon tabanlı veri yapısına geçmek daha iyi olur
    Bu arada uPlot'un 2M veri noktası demosu da var
  • zaman ayırıp baktığı için teşekkür ediyor ve uPlot'un tarayıcı grafiklerinin yavaş olmak zorunda olmadığını kanıtlayan büyük bir ilham kaynağı olduğunu söylüyor
    LTTB örneklemesi ve idle CPU sorunu konusunda yapılan tespitlerin ikisi de yerinde; örnekleme demoda varsayılan olarak açık, ancak adil karşılaştırma için sampling: none ile kapatılabiliyor. Arayüze bir toggle eklemeyi planlıyor.
    Durgun durumda render döngüsünün çalışmayı sürdürmesi düzeltilebilir. Bunu yalnızca veri değiştiğinde ya da etkileşim olduğunda render edecek şekilde iyileştirmeyi planlıyor
  • Flot'un orijinal geliştiricisiyim. Geçmişte milyonlarca veri noktasını işlerken istemci tarafında mip-mapping uygulamıştım
    Çizgi grafiklerde, komşu noktalar arasındaki piksel düzeyindeki farkı temel alan uyarlamalı örnekleme yapılırsa noktaların çoğu atılsa bile görsel fark neredeyse olmuyor.
    1000 piksel genişliğinde bir grafiğe 1 milyon nokta çizmek verimsizdir
  • Dalgacık ayrışımı (wavelet decomposition) kullanarak yalnızca yüksek frekans bileşenlerini azaltıp zirveleri korumanın mümkün olup olmadığını merak ediyorum. Kuramsal olarak örneklemeden daha sağlam görünüyor ama ilgili literatürü bulamadım
  • uPlot'un sadık bir kullanıcısı olarak, harika bir kütüphane yaptığınız için teşekkür ederim
  • çeşitli projelerde, zirve kaybı olmadan veriyi yeniden örneklemek için birlikte min-max alan grafiği çizmeyi kullandım. Oldukça iyi çalıştı

• Veri noktası sayısı çok yüksek olduğunda, her pikselin kapsadığı nokta sayısını hesaplayıp parlaklık ya da renkle yoğunluğu (intensity) göstermek daha iyi olur
  Bu, elektronikteki digital phosphor yaklaşımına benziyor. Örnek için bu bağlantıya bakın

  • iyi bir öneri. Bu tür yoğunluk tabanlı render alma, üst üste binen verilerde etkili olur. WebGPU'nun compute shader'larıyla noktaları ızgaraya binning yapıp hücre başına saydıktan sonra yoğunluk olarak render edebiliriz.
    Özellikle scatter plot'ta küme yapısını ortaya çıkarmakta faydalı olur. Fikir listesine ekliyorum
  • katılıyorum. Log ölçekli yoğunluk heatmap'i, büyük veri kümeleri için (ör. 10 bin serili çizgi grafik) uygundur. Gerekirse ayrıntıya drill-down yapılabilir

• idle CPU kullanımı yaması tamamlandı.
  1M benchmark örneğine, benchmark işlevini korurken boşta verimli çalışmasını sağlayan bir “Benchmark mode” toggle'ı eklendi
  FPS'nin 0 görünmesi normal — render edilecek bir şey yoksa kare çizilmiyor. Gerektiğinde anında maksimum hızda render ediliyor
  Topluluğun coşkulu geri bildirimlerinden etkilendim

• Tarayıcı tabanlı bir Link Graph analiz aracı geliştiriyorum (webvetted.com/workbench)
  Binlerce düğüm/kenarlı grafikleri görselleştirmem gerekiyor; 1M nokta işlenebiliyorsa bu çok yardımcı olabilir

  • projenin harika göründüğünü söylüyor ve ChartGPU'nun şu anda 2D grafiklere (çizgi, bar, scatter vb.) odaklandığını açıklıyor
    Ancak WebGPU render alma kalıpları grafik görselleştirmeye de iyi uyarlanabilir. scatter renderer zaten binlerce instance işlediği için kenar eklemek de yapısal olarak zor olmaz
    Grafik özelliklerini ChartGPU'ya mı entegre etmesi, yoksa ayrı bir GraphGPU kütüphanesi olarak mı ayırması gerektiği konusunda görüş soruyor
  • Gridinsoft URL tarayıcısındaki webvetted.com'un güven listesi hakkında soru soruyor
  • bunu çok faydalı bulduğunu ve bugün hemen entegre edeceğini söylüyor
  • potansiyel bir kullanıcı olarak, sitede ürünün yeteneklerini daha ayrıntılı gösteren sayfaların eksik olduğunu belirtiyor. Ürün tanıtımının güçlendirilmesi gerektiğini söylüyor

• Etkileyici. Gördüğüm en etkileyici demolardan biri gibi geldi

• Candlestick için çizgi ve bant çizme özelliği eklenirse iyi olur. Sadece çizim değil, noktaları vurgulama da mümkün olmalı
  Daha önce benzer bir şeyi kendim WebGPU ile yapmaya çalışmıştım; bu projeyi görünce doğrudan denemek istedim

• TimeLine'ın bakımcısıyım. ChartGPU'nun canlı akış demosu(bağlantı) beklediğim kadar akıcı değil
  Karşılaştırma için, ana iş parçacığında 2D canvas ile yapılmış bu demo çok daha akıcı çalışıyor

  • kütüphanenin tamamı yapay zeka tarafından üretilmiş kod gibi görünüyor.
    İlgili dosyalar: webgpu-pro.md ve webgpu-expert.md

• 1M nokta örneğinde slider hatası buldum (bağlantı)
  Sürükleme sırasında slider imlecin altında kalmıyor, beklenmedik bir mesafeye kayıyor

  • bunun aynı sorunun ikinci raporu olduğunu söylüyor. Mac M1'deki scrollbar hatasıyla aynı nedene benziyor
    Bu bir data zoom slider koordinat eşleme sorunu ve önceliği yükseltilerek düzeltilecek

• Tebrikler ama 1M nokta finans alanında sıradan bir seviye
  Şu anda geliştirdiğimiz render motoru, mevcut 10 milyon noktadan 100 milyon noktaya kadar performansı yükseltti
  Demo videosuna bakın

• Plotly zaten yıllar önce WebGL ile 10 milyondan fazla noktayı işleyebiliyordu
  Benzer özelliklere sahip birçok kütüphane var
  Performans demosuna bakın