Building performant web visualization

Written by: Yuxi Wang

Throughout my career, I've had the pleasure to be intimately involved in several web visualization projects. In the first couple years, I was directly using canvas api to render 2D graphics based on realtime sensor data collected from devices such as MS kinect, Google Tango, and Wearable devices. After that, I was heavily involved in a 3D data visualization project using Three.js. where the data is already available. The trick is to figure out how to render out the large amount of geological/medical data in a way that makes sense to human. During the time, I was also involved in other couple 2D map visualization project with d3.js.

There are some tricks or principles I had picked up along the way, I thought worth mentioning for future reference.

Start from understanding the users

Thinking in frames

Every pixel matters

The pixels that doesn't matter should not be in the rendering buffer.

Call stack needs to be clean


Comments ☕️