A Basic Barchart with d3.js

Full Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Barchart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style media="screen">
      .list .country {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="list">
    </div>

    <script type="text/javascript">
      // convert is called with every row in the csv file
      function convert(d) {
        d.Population = parseInt(d.Population);
        return d;
      }

      // load csv and invoke callback with the loaded data
      d3.csv('data.csv', convert, function(data){
        // prepare a scale for the population domain
        var scale = d3.scale.linear()
          .domain([0, d3.max(data, function(d){ return d.Population; })])
          .range([0, 1000]);

        // create a selection of divs with the class country in the div with the class list
        d3.select('.list').selectAll('.country')
          // join with the loaded data
          .data(data)
          // compute set of added rows
          .enter()
            // append a new div to the selection
            .append('div')
              // set class
              .attr('class', 'country')
              // map width of element to population
              .style('width', function(d){
                return scale(d.Population) + 'px';
              })
              // set content to the country's name
              .text(function(d){
                return d.Country;
              });
      });
    </script>
  </body>
</html>