title: Adding population to SVG map with javascript
body: <p>I have implemented a clickable interactive SVG map, and so far I've been able to implement the name of each country onto the clickable elements of the SVG with the following if else statements;</p>
  
  <pre><code>map.getLayer('world_border').style('fill', function(data) {
      if (data.iso == "US")
          return "#C2BFBD";
      else if (data.iso == "CANADA")
          return "#C2BFBD";
      else if (data.iso == "GREAK BRITAIN")
          return "#C2BFBD";
      else if (data.iso == "JAPAN")
          return "#C2BFBD";
      else if (data.iso == "KR")
          return "#C2BFBD";
      else if (data.iso == "DENMARK")
          return "#C2BFBD";
      else if (data.iso == "FRANCE")
          return "#C2BFBD";
      else if (data.iso == "CANADA")
          return "#C2BFBD";
      else if (data.iso == "ITALY")
          return "#C2BFBD";
      else if (data.iso == "AUSTRALIA")
          return "#C2BFBD";
      else
          return "#C2BFBD";
  });
  </code></pre>
  
  <p>However, at the minute the population is is static number for each country. How can I implement the different populations for the different countries the same way as the countries?</p>
  
  <p><a href="http://itssjp.co.uk/map/" rel="nofollow">Here</a> is an example.</p>