custom datamap of the Netherlands in D3

Question

I want to add a datamap of the Netherlands with provinces to my website. However I never worked with custom datamaps before. I believe I have the correct data format (geoJSON). I saved this by copying it into notepad and saving as geo_netherlands.json.

I tried loading the datamap like this:

var map = new Datamap({
    element: document.getElementById('map_netherlands'),
    geographyConfig: {
        dataUrl: 'data/geo_netherlands.json'
    }
});

resulting in

TypeError: a is null

What does this mean? Should I give more parameters when calling the Datamap, is the json file not good?

Answer 1

You are very close, but there are a few more parameters you'll need to draw this map.

The first problem is you are using dataUrl but trying to access local data. You should actually use dataJson (undocumented).

Secondly you'll need to specify which geometry in the TopoJSON you want to use via the scope parameter. Looking at the TopoJSON you generated, that happens to be "collection".

You'll also want to give your container a width and a height so the map has some space to draw in (otherwise height defaults to 0 in HTML).

Lastly, you'll need a custom projection set up to focus the map on the Netherlands and zoom into it.

All put together, the JS looks like:

var map = new Datamap({
        element: document.getElementById('map_netherlands'),
        scope: "collection",
        geographyConfig: {
            dataJson: data
        },
       setProjection: function(element) {
       var projection = d3.geo.mercator()
         .scale(3000)
         .center([0, 52])
         .rotate([-4.8, 0])
         .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
      var path = d3.geo.path()
         .projection(projection);

      return {path: path, projection: projection};
     },
    });

For more information on setting the project and generating custom data, I recommend: http://bost.ocks.org/mike/map/

I highly recommend you take a look at Bostock's post, especially where he generates the TopoJSON and specifies an --id-property , which will be necessary for you to target any particular district (to create a choropleth, for example).

The working JSFiddle is here: http://jsfiddle.net/L767kzpy/4/