Help making this d3 v3 treemap responsive?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Posted a previous bounty about the JSON formatting issues I was running into, and thanks to @codeword, almost everything is looking perfect with this zoomable treemap:

Just one final thing: I'm trying to find a way to make it resize with the size of the window/browser, but all my normal d3 tricks have failed me.

Can anyone think of a possible way to make the chart responsive (-ish)? All the code is in the CodePen above.

hi @paragon21 :) , why you didn't use my solution? i know it's not written in D3js, but it's responsive, with awesome design. also, if you are wondering about the leveling (2 levels only) i can fix that. otherwise, i will see if i can modify it
Chlegou over 2 years ago
@houcem Would have had to do a lot of styling work with Highcharts for the choropleth ramp, and also wanted an SVG soluton, not canvas.
paragon21 over 2 years ago
Boom! You're a lifesaver, @Codeword! Going to see if I can fix some of the minor text-wrapping issues now on the smaller buckets.
paragon21 over 2 years ago
Can you remind me what you changed yesterday to get it to hide the labels for the nodes in the tree where the text overflowed? I took the text-size down to 11, still getting some trimmed labels.
paragon21 over 2 years ago
@paragon21 i solved it finally, fully responsive :) the link is in new solution
Chlegou over 2 years ago
awarded to Codeword

Crowdsource coding tasks.

2 Solutions

Winning solution

Hey paragon21, Actually I was working on this as you asked me I remember, and here is my solution

Please check the codepen link above I have made it responsive.
Hope you like it.

Remember: copy both CSS and js file

With warm regards,


Thanks again, paragon21
Codeword over 2 years ago
Hey, paragon I detected a minor error in js file which would have affected the responsiveness but has now updated my code, please copy the latest js file only.Sorry for the inconvenience.
Codeword over 2 years ago

Boom!! Take my shot!! :D

i fixed it, by checking @codeword code, i find out that there is an error in making it responsive, so worked on that, and fixed it.

right now, all of it is working fine, and the treemap is fully responsive! :)

solution: since svg is static, i'm rebuilding the chart everytime user resize the window. (the only way to do that)

UPDATE: Link is Updated for minor fix!


thanks for the tip! :) it was an amazing run :) (LINK IS UPDATED AGAIN FOR MINOR FIX) in my part, even by solving it, i still recommend using Highchart (if it can be possible for you, because it's clean and pretty ) otherwise, changing the titles font size, will make it more prettier
Chlegou over 2 years ago
Well done Houcem B.A Chlegou. Thanks for correcting me. :D
Codeword over 2 years ago
@Codeword well done too :)
Chlegou over 2 years ago
View Timeline