Responsive Treemap Diagram

Hi there,
At last I finished all the projects of the Data Visualization Course and surely I learned some things, mostly the hard way :slight_smile: .

I would appreciate, if you could have a look at my last project, the d3.treemap diagram.

Treemap Diagram

Now, I take every point of critique with open hands, but I especially look for comments on:

  • I tried to make the diagram responsive, and when first generated, the diagram fills out the whole page perfectly. But when I change the window, the svg size stays the same, even when I generate a new diagram per button click. What to do?

  • I have the automatically generated image from codepen.io on my portfolio page, but the image does not show the diagram, only the three buttons on top plus much empty white space. What to do?

  • Generally, JavaScript is still strange to me sometimes. I am not very content with my general code. Is there something glaringly sinful, that I should work on to improve?

Thanks for your feedback!

I would have a look at this:

Window: resize event

You will have to move some things around in your code to get it to work properly, but not much.

Thanks, that really seems to be the easy solution. But I don’t really get it to work with how I set up my program. I just have so much trouble with the different namespaces and I want to have my functions cleanly separated, but with the declaring of ‘svg’ and using svg.remove() it will not work properly.

I have the impression that I have to rebuild pretty much everything and I am really frustrated with how this is going :wink: .

I don’t think you need to do that. I was able to get it working pretty well with just a few minor changes.