ChartGPU – WebGPU आधारित हाई-परफॉर्मेंस चार्ट लाइब्रेरी (1M points को 60fps पर render करना)

 (github.com/ChartGPU)
14 पॉइंट द्वारा GN⁺ 2026-01-22 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • WebGPU का उपयोग करके बड़े datasets को स्मूद तरीके से render करने वाली open source chart library है
  • TypeScript में लिखी गई है और line·area·bar·scatter·pie·candlestick जैसे कई series types को support करती है
  • hover highlight, tooltip, crosshair, zoom gestures, theme presets जैसी interactive features built-in हैं
  • React integration package (chartgpu-react) के जरिए React environment में भी आसानी से इस्तेमाल की जा सकती है
  • WebGPU accelerated rendering के साथ 60 frames per second स्तर का performance देती है, इसलिए large-scale data visualization के लिए उपयुक्त tool है

अवलोकन

  • ChartGPU एक WebGPU आधारित हाई-परफॉर्मेंस chart rendering library है, जो बड़े पैमाने के data को स्मूद तरीके से visualize कर सकती है
    • यह TypeScript में विकसित की गई है और MIT license के तहत जारी की गई है
    • npm install chartgpu कमांड से install किया जा सकता है

मुख्य फीचर्स

  • WebGPU accelerated rendering के जरिए बड़े datasets में भी high FPS बनाए रखती है
  • कई chart types का support: line, area, bar, scatter, pie, candlestick
  • interactive features built-in: hover highlight, tooltip, crosshair
  • data streaming updates का support (appendData(...))
  • X-axis zoom फीचर उपलब्ध (gestures और slider UI सहित)
  • theme presets (dark / light) और custom themes का support

आर्किटेक्चर

  • ChartGPU.create(...) canvas और WebGPU lifecycle को manage करता है, जबकि rendering coordination की जिम्मेदारी Render Coordinator संभालता है
  • इसकी आंतरिक संरचना निम्न layers से बनी है
    • WebGPU Core: GPU adapter और device initialization, canvas configuration
    • Render Coordinator: layout, scale, data upload, render pass management
    • GPU Renderers: Grid, Area, Bar, Scatter, Line, Pie, Candlestick आदि प्रत्येक chart के लिए renderer
    • Shaders(WGSL) : प्रत्येक renderer के अनुरूप shader files से बना
    • Chart Sync: कई charts के बीच crosshair synchronization फीचर प्रदान करता है

React integration

  • React के लिए chartgpu-react package उपलब्ध है
  • install: npm install chartgpu-react

ब्राउज़र support

  • WebGPU enabled browser आवश्यक है
    • Chrome 113+, Edge 113+, Safari 18+ supported
    • Firefox पर फिलहाल development जारी है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2026-01-22
Hacker News की टिप्पणियाँ

  • मैं uPlot का maintainer हूँ। यह प्रोजेक्ट दिलचस्प लगा, इसलिए इसे जल्द गहराई से देखने वाला हूँ
    1M डेमो को थोड़ी देर देखने पर लगा कि,

    • sampling में महत्वपूर्ण peaks हट जाने का जोखिम है। uPlot sampling नहीं करता, इसलिए निष्पक्ष performance comparison के लिए इसे बंद करना चाहिए। संबंधित जानकारी के लिए यह PR देखें
    • कुछ भी न करते समय CPU usage काफ़ी ज़्यादा है। इसके विपरीत, canvas-आधारित solution में जब data या scale नहीं बदलता, तब CPU लगभग इस्तेमाल नहीं होता। WebGPU में भी updates को pause करने वाले code से यह हल हो सकता है
    • एक page पर कई charts दिखाने पर Chrome GL context को 16 तक सीमित करता है। Plotly इसे virtual-webgl से bypass करता है
    • [[0,1],[1,3],[2,2]] जैसे data format में लाखों छोटे arrays बनाने पड़ते हैं, इसलिए इसे column-based data structure में बदलना बेहतर होगा
      जानकारी के लिए, uPlot का 2M data points demo भी है
    • समय निकालकर देखने के लिए धन्यवाद कहा, और यह भी कि uPlot इस बात का बहुत बड़ा प्रेरणा स्रोत रहा कि browser charts को धीमा होना ज़रूरी नहीं है
      LTTB sampling और idle CPU issue, दोनों ही सही points हैं। sampling demo में default रूप से enabled है, लेकिन sampling: none के साथ निष्पक्ष comparison किया जा सकता है। UI में toggle जोड़ने की योजना है।
      idle state में भी render loop लगातार चलते रहने वाली समस्या को ठीक किया जा सकता है। इसे बेहतर बनाकर केवल data change या interaction के समय render कराने की योजना है
    • मैं Flot का original developer हूँ। पहले जब लाखों data points handle करने पड़ते थे, तब मैंने client side पर mip-mapping implement किया था
      line chart के मामले में, adjacent points के बीच pixel-level difference के आधार पर adaptive sampling करने पर ज़्यादातर points हटा देने के बाद भी visual difference नहीं दिखता।
      1000-pixel चौड़ाई वाले chart पर 10 लाख points draw करना अप्रभावी है
    • सोच रहा हूँ कि wavelet decomposition का इस्तेमाल करके high-frequency components को ही कम किया जाए और peaks को बचाए रखा जाए। यह sampling की तुलना में सिद्धांततः ज़्यादा उचित लगता है, लेकिन इस पर साहित्य नहीं मिल पाया
    • uPlot का बहुत बड़ा उपयोगकर्ता होने के नाते, इतनी शानदार library बनाने के लिए धन्यवाद
    • कई projects में peaks खोए बिना data को resample करने के लिए, min-max area graph साथ में draw करने का तरीका इस्तेमाल किया है। यह काफ़ी अच्छा चला

  • जब data points बहुत ज़्यादा हों, तो हर pixel में आने वाले points की संख्या गिनकर brightness या color से intensity दिखाना बेहतर होता है
    यह electronics की digital phosphor पद्धति जैसा है। उदाहरण के लिए यह लिंक देखें

    • अच्छा सुझाव है। ऐसी density-based rendering overlapping data पर असरदार होती है। WebGPU के compute shader से points को grid में binning करके, हर cell का count निकालकर intensity के रूप में render किया जा सकता है।
      खासकर scatter plot में cluster structure दिखाने के लिए यह उपयोगी है। इसे ideas list में जोड़ रहा हूँ
    • सहमत हूँ। log-scale intensity heatmap बड़े datasets के लिए उपयुक्त है, जैसे 10,000 series वाले line charts। ज़रूरत हो तो detail में drill-down किया जा सकता है

  • idle CPU usage patch पूरा कर लिया है।
    1M benchmark example में “Benchmark mode” toggle जोड़ा है, ताकि benchmark functionality बनी रहे और inactive state में भी यह efficiently काम करे
    FPS का 0 दिखना सामान्य है — जब render करने के लिए कुछ नहीं होता, तब frame draw नहीं होता। ज़रूरत पड़ने पर यह तुरंत maximum speed पर render करता है
    community के जज़्बाती feedback से प्रभावित हूँ

  • मैं browser-based Link Graph analysis tool बना रहा हूँ (webvetted.com/workbench)
    मुझे ऐसे graphs visualize करने हैं जिनमें हज़ारों nodes/edges हों, तो अगर यह 1M points संभाल सकता है, तो यह बहुत मददगार हो सकता है

    • प्रोजेक्ट को शानदार बताया, और समझाया कि ChartGPU अभी 2D charts (line, bar, scatter आदि) पर केंद्रित है
      लेकिन WebGPU rendering patterns graph visualization में भी अच्छी तरह लागू हो सकते हैं। scatter renderer पहले से हज़ारों instances संभाल रहा है, इसलिए edges जोड़ना भी structural रूप से कठिन नहीं होगा
      पूछा गया कि graph functionality को ChartGPU में integrate करना बेहतर होगा, या इसे अलग GraphGPU library के रूप में रखना चाहिए
    • Gridinsoft के URL scanner में webvetted.com की trust list के बारे में पूछा गया
    • इसे बहुत उपयोगी बताया और कहा कि आज ही integrate करूँगा
    • एक संभावित user के रूप में सलाह दी कि website पर product features को अधिक विस्तार से दिखाने वाला page नहीं है। product presentation को मज़बूत करने की ज़रूरत है

  • प्रभावशाली। लगा कि यह सबसे प्रभावशाली demos में से एक है

  • candlestick के लिए lines और bands draw करने की सुविधा जोड़ना अच्छा होगा। सिर्फ plotting ही नहीं, points को highlight करने की क्षमता भी होनी चाहिए
    पहले मैंने WebGPU में कुछ ऐसा खुद बनाने की कोशिश की थी, लेकिन इस प्रोजेक्ट को देखकर इसे खुद इस्तेमाल करने का मन हो गया

  • मैं TimeLine का maintainer हूँ। ChartGPU का live streaming demo(लिंक) उम्मीद से कम smooth है
    तुलना के लिए, main thread पर 2D canvas से बना यह demo काफ़ी ज़्यादा smooth चलता है

    • पूरी library AI-generated code जैसी लगती है।
      संबंधित files के लिए webgpu-pro.md और webgpu-expert.md देखें

  • 1M points example में slider bug मिला (लिंक)
    drag करते समय slider cursor के नीचे नहीं रहता और अनपेक्षित दूरी तक खिसक जाता है

    • बताया कि यही समस्या दूसरी बार report हुई है। यह Mac M1 के scrollbar bug वाले ही कारण जैसी लगती है
      यह data zoom slider के coordinate mapping issue से जुड़ा है, और इसे high priority पर ठीक किया जाएगा

  • बधाई, लेकिन 1M points finance domain में सामान्य स्तर है
    जो rendering engine अभी विकसित कर रहे हैं, उसने पहले के 10 million points से performance को बढ़ाकर 100 million points तक पहुँचा दिया है
    demo video देखें

  • Plotly तो कई साल पहले से ही WebGL के साथ 10 million से अधिक points संभाल सकता था
    ऐसे समान features वाली libraries काफ़ी हैं
    performance demo देखें