var width = 1300,
    height = 960;

var projection = d3.geoMercator()
  .scale(500)
  // Center the Map to middle of shown area
  .center([10.0, 50.5])
  .translate([width / 2, height / 2]);

// add path
var path = d3.geoPath()
  .projection(projection);

// Set svg width & height
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g");

d3.json("europe_wgs84.geojson", function(error, map_data) {
  if (error) return console.error(error);

  g.selectAll("path")
    .data(map_data.features)
  .enter()
    .append("path")
    .attr("d", path)

    // labels
  var labels = svg.append("g").attr("class", "label-group");
  labels.selectAll(".label")
        .data(map_data.features)
        .enter()
        .append("text")
        .attr("class", "label")
        .attr("x", function(d) {
          return path.centroid(d)[0];
        })
        .attr("y", function(d) {
          return path.centroid(d)[1];
        })
        .text(function(d) {
          return d.properties.iso;
        });

});