Interactive plot

Randomised 3D bar chart

Below is an interactive 3D bar chart that I plotted using ECharts.js. This JavaScript library uses WebGL under the hood to render the chart that you’re seeing, and thus has high performance.

The data used in the plot is generated via client-sided JavaScript (see code block below), and is uniformly random, which is sufficient for a simple toy model. Thus, every time you refresh this page, the chart would look a little bit different. Here is the corresponding JavaScript code to generate the data in the format need by ECharts.js

// You can see this in the source code of my page too.
function generate_random_data(n) {
	return Array.from({ length: n * n }, (_, i) => [~~(i / n), i % n, Math.random()]);
}

Animated 3D bar chart

Here we have a plot of the same type, i.e., 3D bar chart, but its data updates temporally. In this particular example, I’m plotting the function

where is the phase which I chose to update every 500 milliseconds, is the frequency, and is the dimension of the plot.

Here is the corresponding JavaScript code to generate the data in the format need by ECharts.js

// You can see this in the source code of my page too.
function generate_sine_wave_data(n, phase) {
	// prettier-ignore
	return Array.from({length: n * n}, (_, i) => [~~(i/n), i%n, (Math.sin(phase + (1/3) * Math.sqrt((~~(i/n) - n/2)**2 + ((i%n) - n/2)**2)) + 1)/2 ]);
}

Of course, a 3D bar chart is not the only way one can visualise the data. ECharts.js offers a lot of different plot types, and you can check them out here.

Why?

I’ve always wanted to write a blog with pedagogical elements present, and what better way to achieve that than to include beautiful visualisations that are interactive and animated. To avoid re-inventing the wheel, I looked for available JavaScript libraries that allow me to plot. There were many promising candidates, alas most of them are either missing a feature that I wanted or is too low-level. Except for ECharts.js, which I found to be perfect for my use-case. Using this library has been a blast so far!