5D data-visualization with LightningChart

Niilo Keinänen
3 min readAug 22, 2021

Generally, data-visualization is used to display proportions of different values graphically in order to make it easier for humans to analyze large amounts of information.

For example, this chart here depicts a voltage measurement relative to time.

LC JS Line Chart

Often times, several types of information are packed into a single chart to gain more insight than just a single relation between values A and B — this might be done by adding multiple elements into the chart…

LC JS Multiple Line Chart

…or deriving another value from several source values.

LC JS Trading Chart with SMA, EMA, RSI and Bollinger Indicators

LightningChart JS has some really cool features that can add an extra touch of magic into this subject. Let’s have a quick look!

PointSeries3D is a LC JS feature, which draws a collection of X, Y, Z coordinates. It is really powerful, being capable of rendering several millions of data points in a matter of milliseconds.

LC JS PointSeries3D

Built within it lie several optional, yet also very powerful features that allow supplying extra individual properties to each data point;

In addition to X, Y and Z coordinates, each data point can also be supplied size, color and value properties, meaning that two additional data-visualization dimensions can be presented by point size and color.

As an example, here is a completely imaginary scenario;
A visualization is made from measurements from a closed test field, where each measurement has location information (x, y, z), time information (timestamp), as well as intensity information (temperature, for example).

These data points are visualized in real-time by drawing a 3D point at X, Y, Z.
The point is colored according to a look-up table, which shows hot-spots as a bright red color and normal temperature ranges as white.
Moreover, new measurements will have considerably larger points than older ones, and measurements slowly shrink and eventually disappear to make room for new data.

LC JS 5D points visualization, xyz = location, color = intensity, size = age

Individual data point properties are pretty cool and the best part is there is no considerable effect on performance! Read more about PointSeries3D at its official API documentation.

Individual size, color, value as well as rotation properties are also available in 2D point charts.

--

--

Niilo Keinänen

Software developer specializing in data-visualization and high-performance computational algorithms.