Optimizing Data Visualization Performance with NextJS, D3, and Canvas

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, users can still see your drawing process, causing slight lag. However, when applying this technique, it means we will draw on an auxiliary canvas then just copy these bitmaps to the main canvas (show to user), making the display process very smooth.
  • Supplementing with a Web Worker part to push all SSE data processing to a separate thread, completely separate from the main thread.
  • Zero copy:
    • By default, when transferring data between threads, it uses Structured Clone, which means the content of that object will be copied to a new memory area. This obviously consumes CPU and RAM to process.
    • When using Transferable Objects, here I use Float32Array to allow "transferring ownership" of memory from Worker to Main Thread without wasting any effort to copy a single byte.
  • Utilizing the Visibility API to check document.visibilityState === 'visible' then only to call the api and let the chart operate, and vice versa to stop the api call and chart render and any other calculations.
    • Meaning only when you are opening that tab on the browser it runs, but when you switch to another tab, minimize the browser it will stop.
  • Utilizing the Intersection Observer API to check if the canvas shows 10% in the user's eyes then it needs to run the call api to get data and render, otherwise stop all operations.

Detail

Creating file app/d3/chart.worker.ts, this is a worker thread if your computer has multiple CPU cores then OS will try to push this workload processing in parallel in another core

/// <reference lib="webworker" />

import type {Candle} from './type'

let eventSource: EventSource | null = null
let lastBackupBuffer: ArrayBuffer | null = null

let accumulatedData: number[][] = []
const MAX_ITEMS = 10_000

function connect() {
if (eventSource) return

eventSource = new EventSource('/api/sse')
console.log('Worker: SSE Connected')

eventSource.onmessage = event => {
const newTicks: Candle[] = JSON.parse(event.data)

newTicks.forEach(t => {
accumulatedData.push([t.time, t.open, t.high, t.low, t.close])
})

if (accumulatedData.length > MAX_ITEMS) {
accumulatedData = accumulatedData.slice(-MAX_ITEMS)
}

const data = new Float32Array(accumulatedData.length * 6)
for (let i = 0; i < accumulatedData.length; i++) {
const offset = i * 6
data.set(accumulatedData[i], offset)
}

lastBackupBuffer = data.buffer.slice(0)
sendData(data.buffer)
}

eventSource.onerror = () => {
console.error('Worker: SSE Error, disconnecting...')
disconnect()
}
}

function disconnect() {
if (eventSource) {
eventSource.close()
eventSource = null
console.log('Worker: SSE Disconnected')
}
}

self.onmessage = (e: MessageEvent) => {
const {type} = e.data

switch (type) {
case 'CONNECT':
case 'RESUME':
connect()
if (lastBackupBuffer) {
sendData(lastBackupBuffer.slice(0))
}
break

case 'SLEEP':
disconnect()
break
}
}

function sendData(data: ArrayBuffer) {
self.postMessage(data, [data])
}

The code above initializes a Web Worker to handle Server-Sent Events (SSE) data stream separate from the Main Thread. Main functionalities include:
  • Connection management: Setting up and closing SSE connection via connect() and disconnect() functions.
  • Data accumulation: Storing candles in accumulatedData array, limited to a maximum of 10,000 items to avoid memory overflow.
  • Transmission optimization (Zero-copy): Converting data into Float32Array and using Transferable Objects (sending ArrayBuffer) to transfer memory ownership to Main Thread without copying data.
  • State management: Responding to CONNECT, RESUME, and SLEEP signals from Main Thread to save resources when tab is hidden or canvas is not visible.


Creating file app/d3/OptimizedChart.tsx

'use client'

import * as d3 from 'd3'
import {useEffect, useRef, useState} from 'react'

export default function OptimizedChart() {
const containerRef = useRef<HTMLDivElement>(null)
const canvasRef = useRef<HTMLCanvasElement>(null)
const workerRef = useRef<Worker>(null)
const dataRef = useRef<Float32Array | null>(null)
const [dimensions, setDimensions] = useState({width: 0, height: 0})
const [dpr, setDpr] = useState(1)
const activity = useRef({isVisible: true, isIntersecting: false})
const margin = {top: 20, right: 30, bottom: 30, left: 50}

useEffect(() => {
setDpr(window.devicePixelRatio || 1)

workerRef.current = new Worker(
new URL('./chart.worker.ts', import.meta.url)
)
workerRef.current.onmessage = (e: MessageEvent) => {
dataRef.current = new Float32Array(e.data)
}

workerRef.current.postMessage({type: 'CONNECT'})

const updateWorkerState = () => {
const shouldRun =
activity.current.isVisible && activity.current.isIntersecting
workerRef.current?.postMessage({type: shouldRun ? 'RESUME' : 'SLEEP'})
}

const handleVisibility = () => {
activity.current.isVisible = document.visibilityState === 'visible'
updateWorkerState()
}

const intersectionObserver = new IntersectionObserver(
([entry]) => {
activity.current.isIntersecting = entry.isIntersecting
updateWorkerState()
},
{threshold: 0.1}
)

if (canvasRef.current) intersectionObserver.observe(canvasRef.current)
document.addEventListener('visibilitychange', handleVisibility)

return () => {
workerRef.current?.terminate()
intersectionObserver.disconnect()
document.removeEventListener('visibilitychange', handleVisibility)
}
}, [])

useEffect(() => {
if (!containerRef.current) return
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const {width, height} = entry.contentRect
if (width > 0 && height > 0) setDimensions({width, height})
}
})
resizeObserver.observe(containerRef.current)
return () => resizeObserver.disconnect()
}, [])

useEffect(() => {
if (!canvasRef.current || dimensions.width === 0) return

const mainCanvas = canvasRef.current
const mainCtx = mainCanvas.getContext('2d', {alpha: false})!
const offscreen = document.createElement('canvas')
const offCtx = offscreen.getContext('2d', {alpha: false})!

mainCanvas.width = dimensions.width * dpr
mainCanvas.height = dimensions.height * dpr
offscreen.width = dimensions.width * dpr
offscreen.height = dimensions.height * dpr
offCtx.scale(dpr, dpr)

let animId: number
const render = () => {
const isActivelyRunning =
activity.current.isVisible && activity.current.isIntersecting
const data = dataRef.current

if (isActivelyRunning && data && data.length > 0) {
const {width, height} = dimensions
offCtx.fillStyle = '#0b0e11'
offCtx.fillRect(0, 0, width, height)

const xScale = d3
.scaleLinear()
.domain([0, data.length / 6])
.range([margin.left, width - margin.right])

let minPrice = Infinity,
maxPrice = -Infinity
for (let i = 0; i < data.length; i += 6) {
if (data[i + 3] < minPrice) minPrice = data[i + 3]
if (data[i + 2] > maxPrice) maxPrice = data[i + 2]
}

const yScale = d3
.scaleLinear()
.domain([minPrice * 0.999, maxPrice * 1.001])
.range([height - margin.bottom, margin.top])

const candleWidth = Math.max(
1,
((width - margin.left - margin.right) / (data.length / 6)) * 0.8
)

for (let i = 0; i < data.length; i += 6) {
const open = data[i + 1],
high = data[i + 2],
low = data[i + 3],
close = data[i + 4]
const color = close > open ? '#26a69a' : '#ef5350'
const xPos = xScale(i / 6)
offCtx.strokeStyle = color
offCtx.beginPath()
offCtx.moveTo(xPos, yScale(low))
offCtx.lineTo(xPos, yScale(high))
offCtx.stroke()
offCtx.fillStyle = color
const yOpen = yScale(open),
yClose = yScale(close)
offCtx.fillRect(
xPos - candleWidth / 2,
Math.min(yOpen, yClose),
candleWidth,
Math.max(Math.abs(yOpen - yClose), 1)
)
}
mainCtx.drawImage(
offscreen,
0,
0,
dimensions.width * dpr,
dimensions.height * dpr
)
}
animId = requestAnimationFrame(render)
}

animId = requestAnimationFrame(render)
return () => cancelAnimationFrame(animId)
}, [dimensions, dpr])

return (
<div className="flex flex-col w-full h-full bg-[#0b0e11] text-white overflow-hidden">
<div className="p-3 bg-[#161a1e] border-b border-gray-800 flex justify-between items-center shrink-0">
<span className="font-bold text-sm tracking-widest text-blue-400 uppercase">
Candles Tick Chart
</span>
<div className="flex gap-2">
<span className="text-[10px] bg-blue-500/10 text-blue-500 px-2 py-0.5 rounded border border-blue-500/20">
DPR: {dpr}
</span>
</div>
</div>
<div
ref={containerRef}
className="flex-1 w-full h-full relative bg-black cursor-crosshair"
>
<canvas ref={canvasRef} className="w-full h-full block" />
</div>
<div className="p-2 text-[9px] text-gray-500 flex justify-between bg-[#161a1e] border-t border-gray-800">
<span>
RESOLUTION: {Math.round(dimensions.width)} x{' '}
{Math.round(dimensions.height)}
</span>
</div>
</div>
)
}

The code above displays candlestick chart (Candlestick Chart) with high performance optimization techniques:
  • Web Worker Integration: Receiving candle data from worker and storing in dataRef to avoid continuous React re-render.
  • Render Loop Control: Utilizing requestAnimationFrame to synchronize drawing with screen refresh rate.
  • Double Buffering Technique: Drawing data on an intermediate offscreen canvas before copying to main canvas to eliminate lag/flicker phenomenon.
  • GPU Optimization: Utilizing { alpha: false } when initializing 2D context to reduce color blending calculation load for GPU.
  • Smart Resource Saving: Combining Visibility API and Intersection Observer to only perform calculation and render when user is actually looking at the chart.
  • Resolution Handling: Automatically adjusting Canvas size according to Device Pixel Ratio (DPR) (is the ratio between physical pixels on screen and logical pixels (CSS)) to ensure sharp images on Retina/High-DPI screens.
    • Example: Retina screen of Macbook or iPhone has DPR of 2 or 3.
    • Effect: If you draw a $100 \times 100$ Canvas on DPR 2 screen without scaling ratio, image will be blurred. Our code multiplies Canvas size with DPR to ensure candles and lines are always sharp (Crisp rendering).

The result look like this, you could switch to another tab and back to see the SSE api to recall


You can check the Memory tab in Chrome DevTools to monitor the memory allocation and deallocation process. The blue upward lines represent memory allocation (initialization), while the gray downward lines indicate that the memory has been cleaned up (garbage collected). This demonstrates that the zero-copy technique is working successfully, as transferring data to another thread means that the memory space has been released from the original thread.

Comments

Post a Comment

Popular posts from this blog

All Practice Series

Image
Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...
Read more

Kubernetes Deployment for Zero Downtime

Image
Introduction In Kubernetes (K8s) , a Pod is the smallest resource unit used to run one or more containers during deployment. There are several ways to create a Pod : you can create it directly, use a ReplicationController , or a ReplicaSet . However, the most commonly used resource for managing Pods is the Deployment . When you use a Deployment , it actually creates a ReplicaSet to manage the Pods but comes with many additional benefits that support the deployment process. Some Advantages of Deployment : Ensures Pod Availability : It guarantees that the specified number of Pods are always running according to the configuration, automatically deploying additional Pods if any failures occur. Supports Restart and Undo Deployment : Allows you to easily restart or roll back to previous versions of your Deployment . Zero Downtime Deployment : When updating configurations or scaling Deployments , zero downtime is crucial. This means that new Pods are created while the old Pods are stil...
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the ...
Read more

Setting up Kubernetes Dashboard with Kind

Image
Introduction In a previous article, I guided you through using Helm to deploy on Google Kubernetes Engine . However, if you want to cut down costs by using Kubernetes in your local environment instead of relying on a cloud provider during development, then Kind is your go-to. There are several tools to help set up Kubernetes locally, such as MiniKube , Kind , K3S , KubeAdm , and more. Each tool has its own pros and cons. In this article, I'll walk you through using Kind to quickly set up a Kubernetes cluster on Docker . Kind stands out for its compactness, making Kubernetes start up quickly, being user-friendly, and supporting the latest Kubernetes versions. Working with Kind Firstly, follow the instructions here to install Kind according to your operating system. If you're using Ubuntu , execute the command: [ $( uname -m ) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.23.0/kind-linux-amd64 chmod +x ./kind sudo mv ./kind /usr/local/bin/ki...
Read more

Practicing with Google Cloud Platform - Google Kubernetes Engine to deploy nginx

Image
Introduction This article provides simple step-by-step instructions for those who are new to Google Cloud Platform (GCP) and Google Kubernetes Engine (GKE) . I'll guide you through using  GKE  to create clusters and deploy nginx . The instructions below will primarily use gcloud  and kubectl  to initialize the cluster, which is more convenient than manual management on the Google Cloud interface. Prerequisites First, you need to prepare the following: Have a GCP account with permission to use Cloud services. If you're new, you'll get a $300 free trial to use for 90 days . Create a new GCP project. Enable Compute Engine and Kubernetes Engine services. Install Google Cloud SDK and kubectl For this installation step, refer to the GCP documentation for instructions tailored to your operating system. Once installed, execute the following commands to check if gcloud  and kubectl  are installed: gcloud version kubectl version If you see the version resul...
Read more

Using Kafka with Docker and NodeJS

Image
Introduction to Kafka Kafka is an open-source , distributed messaging system that functions on a publish/subscribe model. It is widely used by numerous large companies for high-performance , real-time data streaming. Developed by LinkedIn since 2011, Kafka has grown into the most popular distributed streaming platform. It can handle vast amounts of records with high efficiency. Advantages of Kafka Open-source : Freely available and continuously improved by a large community. High-throughput, high-frequency : Capable of processing large volumes of data across topics continuously. Automatic message storage : Allows for easy message retrieval and verification. Large user community : Offers extensive support and shared resources. Basic Concepts If you're new to Kafka and Message Queues, here are some key concepts to understand: Producer : Creates and sends data to the Kafka server, where data is sent as messages in byte array format. Consumer : One or more consumers subscribe to...
Read more

Monitoring with cAdvisor, Prometheus and Grafana on Docker

Image
Introduction Monitoring a system is crucial after deploying a product to a production environment. Keeping an eye on system metrics like logs , CPU , RAM , disks , etc, helps identify the system's status, performance issues, and provides timely solutions to ensure stable operations. While cloud providers like Google , Amazon , or Azure offer built-in monitoring systems, if your company needs to manage multiple applications/systems/containers and desires a centralized monitoring system for easier management, using cAdvisor , Prometheus , and Grafana is a sensible choice. These three popular open-source tools are widely used by DevOps teams, especially for monitoring container applications. cAdvisor Developed by Google , cAdvisor is an open-source project used to analyze resource usage, performance, and other metrics from container applications, providing an overview of all running containers. Find more details here Prometheus Prometheus is a toolkit for system monitoring and a...
Read more

Kubernetes Practice Series

Image
Introduction Kubernetes (often abbreviated as K8s ) is an open-source system designed to automate the deployment, scaling, and management of containerized applications. This page serves as a collection of articles related to Kubernetes (K8s) , including theoretical concepts and practical guides on using Kubernetes to set up essential tools for the software development process. I will continue to update this series with new articles as ideas come to mind, to ensure the series becomes more comprehensive. The articles are arranged in increasing order of difficulty to make it easier for you to follow. If you have time, it's recommended that you start from the beginning of the series to acquire the necessary knowledge and information that will prepare you for the subsequent articles. Key Topics Covered in This Series Basic Knowledge : Fundamental concepts, common commands, etc. Resources : Pod, Deployment, Service, StatefulSet, Ingress, etc. Pod Autoscaler : Horizontal and Vertical sc...
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access. Loading all posts...
Read more

NodeJS Practice Series

Image
Introduction NodeJS is an open-source and cross-platform JavaScript runtime environment . Here are some key points about NodeJS : V8 Engine : NodeJS runs on the V8 JavaScript engine , which is also the core of Google Chrome . This allows NodeJS to be highly performant. Asynchronous and Non-Blocking : NodeJS  uses an event-driven, non-blocking I/O model. It’s lightweight and efficient, making it ideal for data-intensive real-time applications. Single-Threaded : NodeJS  runs in a single process, handling multiple requests without creating new threads. It eliminates waiting and continues with the next request. Common Language : Frontend developers who write JavaScript for browsers can use the same language for server-side code in NodeJS . You can even use the latest ECMAScript standards without waiting for browser updates. This page is designed to compile articles related to NodeJS , including how to integrate it with various libraries and relevant tech stacks. I will cont...
Read more