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:
https://codepen.io/carlvlewis/pen/dRExNd

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
Houcem B. A. Chlegou 1 month 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 1 month 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 1 month 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 1 month ago
@paragon21 i solved it finally, fully responsive :) the link is in new solution
Houcem B. A. Chlegou 1 month 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
https://codepen.io/codeword/pen/vZwBMy

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,

Codeword.

Thanks again, paragon21
Codeword 1 month 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 1 month 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!

link: https://codepen.io/anon/pen/eRwpWa

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
Houcem B. A. Chlegou 1 month ago
Well done Houcem B.A Chlegou. Thanks for correcting me. :D
Codeword 1 month ago
@Codeword well done too :)
Houcem B. A. Chlegou 1 month ago
View Timeline