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)
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 
(w/o D3.js layer)
they could easily fix this by making the text change color on hover
Unless there is a pile of numbers and the colored one happens to be is at the bottom.
I’m learning with your example how to properly approach object creation and raycasting.intersections, very interesting. (I’m new to three.js)
I think it would be much useful to display the value with category on hover for each data-point.
If every data-point had an anchor maybe it’s possible to detect the nearest within a certain range … ?
If you’ve got question, better to create a new topic in the Questions category
