1

I am using the Choropleth Map of the world (d3.js) to display the population of various countries. I tried this tutorial:
https://d3-geomap.github.io/map/choropleth/world/

The CSV file is downloaded from here:
http://data.worldbank.org/indicator/SP.POP.TOTL

and also the d3-geomap library is downloaded from here:
https://d3-geomap.github.io/download/d3-geomap-1.0.2.zip

But no output gets displayed in the browser.

Here is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Choropleth Map - World</title>

   </head>

    <body>
        <div id="map"></div>

        <script>
            var format = function(d) {
            d = d / 1000000;
            return d3.format(',.02f')(d) + 'M';
        }

            var map = d3.geomap.choropleth()
                .geofile('d3-geomap/topojson/world/countries.json')
                .colors(colorbrewer.YlGnBu[9])
                .column('YR2010')
                .format(format)
                .legend(true)
                .unitId('Country Code');

            d3.csv('d3-geomap/sp.pop.totl.csv', function(error, data) {
                d3.select('#map')
                    .datum(data)
                    .call(map.draw, map);
            });
        </script>


        <script src="d3-geomap/jquery.js"></script>   <!-- Jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>  


    </body>
</html>

What could be the reason ?

User456898
  • 5,704
  • 5
  • 21
  • 37

0 Answers0