title: How to re-scale D3 map after zooming
body: <p>I have a D3 map that I have created on a codepen. Below is the link</p>
  
  <p><a href="http://codepen.io/redixhumayun/full/VPepqM/" rel="nofollow noreferrer">http://codepen.io/redixhumayun/full/VPepqM/</a></p>
  
  <p>I have included some basic zooming and panning onto it. However, when I zoom I want the dots to re-scale to account for the zoom, not just stay the same size. I want them to separate out over the greater area that will be provided after zooming in.</p>
  
  <p>I'm not sure what exactly I should be looking for, which is why I am having a hard time finding it. </p>
  
  <p>Here is the code for the zoom I have currently implemented</p>
  
  <pre><code>var zoom = d3.zoom()
               .on('zoom', zoomed);
  
  svg.call(zoom);
  
  //defining the zoomed function here
  function zoomed() {
    map.attr('transform', d3.event.transform)
    meteorite.attr('transform', d3.event.transform);
  }
  </code></pre>