title: How do I layout circles into a square grid?
body: <p>I have used D3's <a href="https://github.com/mbostock/d3/wiki/Pack-Layout" rel="nofollow noreferrer">pack layout</a> to create a cluster of circles, as in A. Should I use another type of layout, or something else, to organise my circles into a square grid (like a table of circles), as in B?</p>
  
  <p><a href="https://i.stack.imgur.com/5iT2d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5iT2d.png" alt="enter image description here"></a></p>
  
  <p>If I were to try this without any pre-built D3 magic, I guess I would need to iterate through my dataset and calculate how many circles I can fit on a row (determined by the width of the SVG element with some padding accounted for). To calculate the row's height I need to know the height of the largest circle in the row. I would also need to add some padding to each circle - and also pad the rows too.</p>
  
  <p><a href="https://i.stack.imgur.com/nvBqD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvBqD.png" alt="enter image description here"></a></p>