How To Dev

Introduction In the previous article, I guided you on how to use D3 and Canvas to Visualize Data. Now we will continue to dive deeper to understand some solutions that help optimize performance, aiming for a State-of-the-art" approach for building Real-time Data Visualization on the Web today. Some techniques I will apply to optimize performance are as follows: Data Buffering (Data Layer Throttling): utilizing requestAnimationFrame to ensure smooth processing and rendering according to the screen refresh rate, such as 60Hz or 120Hz. Utilizing Context Alpha Optimization: getContext('2d', { alpha: false }). When you turn off the alpha channel (transparency), the GPU will not have to calculate color blending with elements behind the canvas, significantly reducing the load on the graphics chip. Offscreen Canvas: Using an implicit Canvas to calculate beforehand before pushing to the main screen. The issue with drawing directly on the Canvas is that if you have to draw too much,...

Introduction In previous articles, I have guided you on using Viewport Culling and requestAnimationFrame to improve performance when using Konva to render 1,000 elements. Now, we will continue to improve further with Layer Caching and Tiling techniques to handle up to 10,000 elements. Prerequisites This article is extended from my previous articles, so please review the previous articles to grasp the necessary information before continuing. Detail Update file type.ts import type {GroupConfig} from 'konva/lib/Group' export interface ShapeData { id : string type : string x : number y : number size : number color : string } export interface ViewRect { x1 : number y1 : number x2 : number y2 : number } export interface ShapeItemProps extends GroupConfig { item : ShapeData image ?: HTMLImageElement onClick : ( id : string ) => void } export interface TileProps { items : ShapeData [] image : HTMLImageElement | undefined isZoomedOu...