Creating a 3D Area Chart with D3.js & Three.js

I created 3D area chart using JavaScript, D3.js, and Three.js. We first fetch population data for all countries from 1960-2017, format it, and create 2D area charts for each country using D3.js. We then import these charts into Three.js, render them in 3D, and add lighting and aesthetic effects to create a polished final product.

A nice explainer video here: I created a realistic 3D chart using JavaScript | D3.js Three.js journey - YouTube

(Code and demo in the video description)

2 Likes

It looks good and promising.

Have you evaluated whether the visually appealing design provides perceiving comfort to users? I was not able to find how to turn the chart so that I can easily see both country names and their populations.

Example. The blue arrows point to Mexico and its population (it took me some time to find what value corresponds to Mexico, but I’m still not sure). Try to find the population of Spain and Poland (see the red arrows):

Yess, that’s a good point, I think that’s happening probably because the chart looks distorted; since I haven’t made the canvas responsive.

Could you try resizing your browser window to about 1300x1000, the chart should look clearer and countries should be perceived better. In any case, I have to solve the responsiveness issue.

The image above is 1741x878 (the forum resizes the image to fit under the text, you can view the original size, when you click on the image).

Inspired with the topic :slight_smile: (w/o D3.js layer)

2 Likes