What’s the Easiest Way to Visualize Live Charts in Three.js?

Questions
1

Hello

I am working on a project where I need to display real-time data as 3D charts in Three.js like updating bar charts / line graphs that change every few seconds. :innocent: I would love to learn how people handle loading live data into Three.js scenes without constantly redrawing everything / causing performance issues.:innocent:

I have seen examples where folks combine D3.js with Three.js like creating a 3D area chart with D3 data & rendering it inside Three.js but I am not sure which workflows work best for live updating.:thinking:

Are there recommended tools / techniques; maybe using instanced meshes / efficient buffering, that help keep these visuals smooth and responsive? :thinking: Checked Best way to draw graphs with Three.js - Stack Overflow guide related to this and found it quite informative.

Also; while researching visualization tools, I stumbled upon what Is Grafana & it made me wonder if anyone has adapted its real-time dashboard-style displays into a Three.js context / if some of those design ideas could inspire better chart rendering here.:slightly_smiling_face:

Thank you !!:slightly_smiling_face:

2

Any time you want to display new data you simply have to do some amount of rendering. Any and all optimizations can be applied. It really depends on your use case.

3 Likes
3

How much is the data?

If there are a few thousands of bars, better not waste any efforts for extreme optimization. Standard instancing is pretty sufficient.

If the bars are millions, better to focus on whether this type of visualization makes sense, as people would not be able to perceive individual elements of that much data. So, you need some “smoothing”, “aggregation” or another approach to make the amount of visuals reasonable for humans. If you insist on having that much data on the screen, then the optimizations tend to be quite specific for different use cases.

2 Likes