title: d3.js Map (<svg>) Auto Fit into Parent Container and Resize with Window
body: <p><strong>UPDATE: I have posted and accepted a fully working solution in the answers section. Any code in this section is to be used as reference for comparison to your own NON-WORKING code, but is not to be used as the solution.</strong></p>
  
  <hr>
  
  <p>I'm building a dashboard and using d3.js to add a world map that will plot tweets in real time based on geo location.</p>
  
  <p>The <em>world.json</em> file referenced in the d3.json() line is downloadable <strong><a href="https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data?at=default">HERE</a></strong> (it's called <em>world-countries.json</em>).</p>
  
  <p><img src="https://i.stack.imgur.com/rGiBp.png" alt="enter image description here"></p>
  
  <p>The map is on the page as an SVG container and is rendered using d3.</p>
  
  <p>Below are the relevant code slices. </p>
  
  <pre><code>&lt;div id="mapContainer"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"&gt;&lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>#mapContainer svg {
      display:block;
      margin:0 auto;
  }
  #mapContainer path {
    fill:#DDD;
    stroke:#FFF;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>// generate US plot
  function draw() {
      var map = d3.select("svg");
      var width = $("svg").parent().width();
      var height = $("svg").parent().height();
  
      var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]);
      var path = d3.geo.path().projection(projection);
      d3.json('plugins/maps/world.json', function(collection) {
          map.selectAll('path').data(collection.features).enter()
              .append('path')
              .attr('d', path)
              .attr("width", width)
              .attr("height", height);
      });
  }
  draw();
  latestLoop();
  </code></pre>
  
  <hr>
  
  <pre><code>$(window).resize(function() {
      draw();
  });
  </code></pre>
  
  <p>UPDATE: I have scaled the map to an acceptable size (for my particular browser size), but it still will not scale and center when I change the size of the window. IF, however, I resize the window, then hit refresh, then the map will be centered once the page is reloaded. However, since the scale is static, it is not scaled properly.</p>
  
  <p><img src="https://i.stack.imgur.com/5pzyp.png" alt="enter image description here"></p>