Making D3 responsive: viewBox vs resize()?

Question

I have to build d3 visualisations that work well both on tablets, Desktop displays, and in some cases very very large 4k+ high resolution cinema size displays.

So I\'m tr

Answer 1

I'd recommend using the following logic:

• If your visualization is usable in the smallest screens you want to support with the viewBox technique, stick to that, no need to look further (lucky you :))
• Otherwise: you may have the following problems when scaling down the visualizations:
  • there are too many details, that cannot be distinguished in smaller screens
  • the texts are too small and not readable in the smaller screens

Then you need to use javascript to adapt your visualization based on the screen size. This blog article which is serious about visualizations' responsiveness.

Oh, and don't forget to debounce your resize event listener.