How to implement this data visualisation made with D3.js by Nadieh Bremer

I am trying to implement something like this data visualisation made by Nadieh Bremer. I think it was made using d3.js as I know she uses this for data visualisations.

I want to make an animation where the nodes can dynamically be added to the different circles and the links between them are shaped like shown in the image. And I need a way to bind data to the different nodes of course.

As I said I think this was made with D3.js so I’m not sure if it would be as easy to implement this in blender, I’m not very familiar with data visualisation yet so I’m not sure if any Python libraries exist that could be used in a similar way in Blender.

I thought that animation nodes would be well suited for this, or maybe just to script the whole thing, I’m not sure.

If anyone knows a good way to implement this in Blender I would really appreciate your ideas.


The colours red whiite and grey.

some text.

What animation? a bit difficult to tell from a still image… the data appearing?

I would look into getting a circle segment to a specific length. You may want to learn about radians.

Other than that look into drivers and particle systems because you can then feed the numbers from yr data to drive a particle system.

The connections you can make with splines.

But really you need to reframe yr question to something more specific.

Oh, and I would guess most of this can be achieved with some level of interactivity without animation nodes.

Ok, so Hooks, drivers and splines and some use of materials with a factor driven by datas attributes would achieve this.

Any specific questions?

@AlphaChannel Thanks for the suggestions! After tinkering around with it for a while I did manage to sort of get the effect I’m after, but there are still a few things I’d like to improve.

I got the nodes to go along the circle with the links following their position. I did this by curving a spline around a circle using a curve modifier, then I used hook modifiers to change the last two control points at each end of the spline. The postion along the x-axis of the hook object changes the endpoints of the spline along the circle. Finally the position along the x-axis of the hook objects are driven by the offset of the circular nodes around their circles using the follow path constraint.

Blender Data Vis Test

However, I still run into the problem of the spline acting in ways that are undesirable. Like when the two nodes come too close together this happens:

Blender Data Vis Test 2

And I also would like the nodes to be able to be close packed along their circle, like shown in the inspirational image. So that they can dynamically react when more nodes are added in a close packing way. That is also why I wanted to use animation nodes, I saw that with extra nodes there comes a close packing node:

And maybe this project could just be better done programmatically, but I am not experienced enough to be able to conceive an implementation.

One approach maybe to go geo nodes.

You need to plan the system though!

here are some lines representing percentages.
then you can keep things in a 0 -1 range for starters.

geonodes also has poisson disc scattering. (close packing)

I dont have animation nodes installed anymore
I had to download a plugin to drive the text but its free, here…

Oh, I also found out, the graph is called a Tidy Tree Graph.

@AlphaChannel Thanks for all the help! I’m will tinker some more with all the new suggestions and try to figure something out.

Though I’m wondering if this kind of thing is maybe easier done with something like D3 because it was made for data visualisation in contrast to Blender. I did try looking into adding something like the Plotly Python library to Blender, are you familiar with using libraries like this for data visualisation in Blender?



I used to use vvvv for data visualisations, but most of my data was realtime from audio sources that would drive video or anims, yes I was a VJ, sitting in dark rooms with very loud music.

I used Python once or twice to get some fft data into Blender and make keyframes from it, thats about it.

Yes, I guess using the software that generated this would be much easier!

To be honest the scope of the question is large, but I have been trying small pieces with geonodes and am sure that with some fake data I could have something that resembles it.

They are lovely looking graphs. but im unsure what everything is supposed to represent, my maths and coding skills are sub-par, I saw the code to make these is included with them, not sure where that is now…

so it may be worth seeing what you can extract…

Good luck…