# 3D Charts library for babylon.js - preview images added **URL:** \ **Category:** Demos and projects\ **Created:** [May 11, 2024, 5:03pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475 "2024-05-11T17:03:09Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [May 11, 2024, 5:03pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/1 "2024-05-11T17:03:09Z")
Sorry for the click bait. I wanted maximum attention 🙈 I am starting to write a 3D charts library so if anyone interested and maybe you have some experience in the world of charts please join me 🫡 thanks! ---
**Author:** ![dsaffo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dsaffo/32/31907_2.png) [@dsaffo](https://forum.babylonjs.com/u/dsaffo)\ **Post date:** [May 12, 2024, 5:06pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/3 "2024-05-12T17:06:06Z")
I’ve been working on a D3-style toolkit for Babylon called [Anu.js](https://jpmorganchase.github.io/anu/). It is mostly low-level visualization code support, but it should make implementing higher-level Chart libraries much easier : ) This kind of stuff is my bread and butter. I wrote my dissertation on the subject of immersive analytics, so I’m happy to chat about it! ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [May 16, 2024, 7:48am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/4 "2024-05-16T07:48:09Z")
It’s started to happen 💪 @Deltakosh @mawa @labris ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/1/81a7bdd5cc8f47a4591192b30df3418384db6f5f.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/7/078190586d4cfbe0dbdf1f0e607d93674a6c554b.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/9/5959568bf3dab1eb783b9fabb0b243b1906f9157.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/6/c67c08c7739f45d1a817693fce0896eda4e76f5f.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/c/5ca4c12d6f07e15b39bfe229fa28ff45dd8cadfe.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/3/c38b5a63e035a4665f1433a25a525414c79e6d2e.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/7/97d1db4cae087c0623812ac333ddbae52d4a8148.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/6/c6963b17c17e4e72dcef3f29088e04cc33741d24.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/a/6aa152e35bab6576b38bf698daf202ee8c6835c2.jpeg) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [May 16, 2024, 8:12am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/5 "2024-05-16T08:12:12Z")
Interesting topic 🙂 I think what will be important is the way you handle charts input data. To my mind the best would a single object data, like in the quite famous [Chart.JS](https://www.chartjs.org/docs/latest/samples/bar/horizontal.html) library. I think you can inspire a lot from it : - Data & Chart Types . Bar . Line . Donut . Pie . Polar . Radar . Scatter . 3D surface . etc… - Scale - Title - Subtitles - Legends - Tooltips - Animations ```javascript const config = { type: 'bar', data: data, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Chart.js Bar Chart' } } }, }; ``` etc, etc… ++ Tricotou ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [May 16, 2024, 10:06am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/6 "2024-05-16T10:06:54Z")
Yep, it’s data driven. One JSON input file. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [May 16, 2024, 1:46pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/7 "2024-05-16T13:46:04Z")
This is so good buddy!! Reminds me off a discussion 9yo d’about 3d charting. So cool to see it happening ---
**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\ **Post date:** [May 17, 2024, 5:34am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/8 "2024-05-17T05:34:37Z")
[HTML5 Game Devs Forum - HTML5GameDevs.com](https://www.html5gamedevs.com/topic/33976-3d-scatterplot-on-babylonjs), not too much, but at that time was 🔥 🤣 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [May 17, 2024, 2:56pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/9 "2024-05-17T14:56:00Z")
Oh gosh! Internet archeology ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [May 17, 2024, 5:05pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/10 "2024-05-17T17:05:39Z")
Me reading this: ![Im So Old GIFs - Find & Share on GIPHY](https://media1.giphy.com/media/l0IyajjbNiRvCr7RC/giphy.gif?cid=6c09b952stkmder54k27qkmrzul5pas6dykso48eu55dhvjw&ep=v1_gifs_search&rid=giphy.gif&ct=g) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [May 18, 2024, 7:11am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/11 "2024-05-18T07:11:13Z")
That’s amazing (once again 😁). It nearly gives me the desire to return working for marketing excellence to create impacting charts with the sole purpose of transforming a mediocre result for a marketing operation into a potential success 😅… ok, may be just ‘nearly’ 🤣 ---
**Author:** ![tibotiber](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tibotiber/32/26735_2.png) [@tibotiber](https://forum.babylonjs.com/u/tibotiber)\ **Post date:** [May 20, 2024, 10:02am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/12 "2024-05-20T10:02:48Z")
This is neat! 🙂 Have a look at our heatmap layer in Smplrspace: [https://timeheat.smplrspace.io](https://timeheat.smplrspace.io). You can change the setting between sphere based, grid based, and bar chart when you click the settings button :). It’s automatically interpolated from sparse data, and mapped onto the walled area. For context, we’re building a floor plan based data visualization tool, that works in both 2D and 3D, and is Babylon.js based (what else? 😉 ). The developer docs has a few other examples: [https://docs.smplrspace.com/](https://docs.smplrspace.com/). ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [May 24, 2024, 8:56pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/13 "2024-05-24T20:56:20Z")
The bar chart looks cool 🙂 even better when it is animated! ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [May 25, 2024, 3:49pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/14 "2024-05-25T15:49:38Z")
This is damned hard to make it universal 🙈 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 2, 2024, 8:05pm UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/15 "2024-07-02T20:05:13Z")
Hello! I’m working now on data visualization using D3 for our company project and still developing the 3D Charts library. Anu.js is amazing! Kudos! I was hesitating what approach to use for configuration and data after I encountered D3. The D3 style or the `charts.js`. I started with the old-school `json` but the D3 approach is so cool! Finally I chose the `json` config style, Anu.js is already available so it made the decision easier to make. However I want to make the charts modifiable to the smallest detail (animate anything anyhow, add interaction, transform whatever, change any attributes on the chart, texturing etc) after the chart was rendered so I try to write code which exposes low level babylonjs stuff the programmer but still encapsulates it a bit to make it easier to make things happen. I’m still not convinced whether I’m heading the right direction though. I rewrote core functionality 2 times already 😃 and now seems I’ll haved to make a quite big change in the format of configuration object… C’est la vie! Why is it called Anu? I have to come up with a cool name as well… ---
**Author:** ![dsaffo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dsaffo/32/31907_2.png) [@dsaffo](https://forum.babylonjs.com/u/dsaffo)\ **Post date:** [July 3, 2024, 12:13am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/16 "2024-07-03T00:13:52Z")
Glad you like it! If you are thinking about a json style format I would suggest looking into Vega and Vega light. They are a visualization gramer that is then used to compile into render instructions for svg or canvas. People have made vr specific version (vria.js for a frame) and (dxr for unity) but they are both not the most robust. One approach that could help make things encapsulated but also customizable would be to set up the functions to return the bits of the charts as anu selections which users could then manipulate in anyway you can a Babylon mode/mesh. You can use the props() method to set a whole bunch of properties on a group of meshes at once. In babylonian/Assyrian mythology Anu was the god of creation 🙂. Didn’t realize until after that its also quite a popular name in some places. ---
**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\ **Post date:** [October 29, 2025, 2:07am UTC](https://forum.babylonjs.com/t/3d-charts-library-for-babylon-js-preview-images-added/50475/18 "2025-10-29T02:07:12Z")
You’re amazing 👍