Recreating a treemap

This week I recreated a treemap chart from the European Commission on the scope of the international sanctions imposed by the European Union. I didn't find the name of who participated in its creation, beyond the European Union.

Warning: Data may be inaccurate compared to the source.

Recreation

Highlights

This is the third treemap I have visualized. It was a lot of fun and challenging to recreate. I fell in love when I first saw it and thought it would be easier, but there were a few challenges that I didn't see at first

I was confused with everything I had to consider and the way to group/ungroup in the treemap: root, node, parent and children. Reviewing the ones I had done before confused me even more and I had to look in the official documentation.
It is ridiculous how using the console.log() will help us so many times. When using D3 and manipulating the DOM, there are an endless number of elements that will be created whose priorities/attributes are “unknown”. The console.log() will help us to know them better.
This is one of the first times that I have positioned the tooltip in this way, I have almost always chosen near the mouse, it is the most “comfortable” position. But this time I did it considering the width and height of each proportion. The console.log() saved me.