Introducting Anu.js, a toolkit for immersive and 3D data visualizations

Hello! This is a project I have mentioned around in other threads so I figured it was time to make its own post. Over the last year or so I have been working on a toolkit for creating 3d and immersive visualizations using Babylon.js and related technologies called Anu.js.

I will give a brief overview about the project bellow but you can check out all the details, tutorials, and examples on our documentation and github!

What is Anu.js? in a nutshell Anu is a D3 style visualization toolkit that consists of two parts. 1. A data-driven scene graph manipulation API that lets you create, modify, remove nodes from the scene graph based on provided data and 2. Prefab modules that help you add or create common visualization elements or utilities such as axes, color scales, and maps. In other words Anu doesn’t provide you with a barchart() function but rather gives you the tools to quickly build that bar chart from its base components. Here is a simple example of the api

let data = [ 
             {goals: 10, assits: 5, points: 2},
             {goals: 3, assits: 15, points: 8},
             {goals: 1, assits: 8, points: 15}
            ]

//create(mesh: string, name: string, options?: {}, data?: {} scene?: Scene)
//create returns a mesh made with the input data and options if needed
let cot = anu.create('cot', 'my_cot', {}, scene)

//selectName(name: string, scene: Scene)
//make a selection object by selecting nodes by name from the scene
let cotSelection = anu.selectName('my_cot', scene)

//bind(mesh: string, options?: {}, data?: {}, scene?: Scene,)
//using bind will create a selection object with 3 boxes one for each index of data we pass. 
//calling bind() from cotSelection will make the boxes the children of our cot. 
let boxes = cotSelection.bind('box', {size: 1}, data, scene); 
            
boxes.scaling(new Vector(2,2,2)) //call operators on our selection object to change node properties
          .positionX((d,n,i) => d.goals) //pass a function with scope of data, node, index or the raw value
          .prop("propertyName", value) //to access any node property use the prop operator 

To put this in a more concrete example of how you can use the toolkit here is an abreviated example of a scatter plot and its result:

For more examples checkout our example gallery, if there is a example you would like to see made please feel free to suggest it here and I will try to add it.

This project is currently in Beta and is in active development. As such we welcome any comments, contributions, and open issues as needed! Hope this toolkit can be of use for folks here!

6 Likes

This is great I love it !!!

The only comment is the mouse wheel acting up in the example as it both zooms and scroll

1 Like

This is really cool, I love it!

1 Like

Thank you! This was enough motivation for me to finally fix that and cross it off my todo list :sweat_smile:

1 Like

Thanks !!!