title: How to create a responsive map using d3
body: <p>I'm trying to make my map responsive, so it'd be resized according to the browser window size. This is what I have so far,</p>
  
  <p>style.css</p>
  
  <pre><code>#mapbox {
  border:2px solid #000;
  width:960px;
  height:550px;
  background:#FFFFFF;
  }
  </code></pre>
  
  <p>viz.js</p>
  
  <pre><code>var margin = {top: 10, left: 10, bottom: 10, right: 10},
  width = parseInt(d3.select('#mapbox').style('width')), 
  width = width - margin.left - margin.right, 
  mapRatio = .5, 
  height = width * mapRatio;
  .
  .
  d3.select(window).on('resize', resize);
  .
  .
  function resize(){  
      width = parseInt(d3.select('#mapbox').style('width'));
      width = width - margin.left - margin.right;
      height = width * mapRatio;
  
  
          projection.translate([width / 2, height / 2])
                  .scale(width);
  
          svg.style('width', width + 'px')
              .style('height', height + 'px');
  
  }
  </code></pre>
  
  <p>When I resize the window, its still keeping the same width and height for my svg container. I guess thats because, in resize function, I'm getting the width and height from the CSS which will be the same whether I resize the window right?</p>
  
  <p>I'm stuck here, am I missing anything obvious? would be great if you have any pointers for me to get this working.</p>
  
  <p>I'm pretty much following the following <a href="http://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/" rel="noreferrer">example</a>,</p>