Mobile-friendly D3.js bubble chart

Question

I am building a force bubble chart with D3.js. I am almost done, the only thing is that when I am simulating on a mobile, the positions of the bubbles are not adjusting to the size of the screen (I don't see any bubble). When I look at examples, it seems to display correctly on mobiles.

What part of the code in D3.js is changing the mobile display ?

You can visualize my project from this link (some things don't work like the background picture but the bubbles are there. We see them in tablet and desktop mode but not on cellphone mode). You can access the github page by following the same path : https://rawgit.com/aubertsigouin/canAi/master/index.html

Answer 1

Is your svg bigger than the screen?

You can set the size of the svg based on the window size.

let svg = d3.select('#teck-stack-svg');
svg.attr('width', window.innerWidth);
svg.attr('height', window.innerHeight);