var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var projection = d3.geoMercator().rotate([-10,0]).scale(50).translate([160,100]);

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

var svg = d3.select("body")
    .append('svg')
    .attr('width', 310)
    .attr('height', 150);

var topoData = d3.json("world-continents.json");

topoData.then(function(data) {

var continents = topojson.feature(data, data.objects.continent).features;

var map = svg.append('g').attr('class', 'boundary');
var continent = map.selectAll('.continent').data(continents);
console.log(continents)
var color = d3.scaleLinear()
   .range(["#4f81d7","#f6d18b"])
   .domain([3000000,105000000]);

var data = [
  {'continent':'Asia', 't1fg':19, 't2fg':24, 't1fc':758, 't2fc':773},
  {'continent':'Europe', 't1fg':6, 't2fg':37, 't1fc':234, 't2fc':241},
  {'continent':'North America', 't1fg':20, 't2fg':60, 't1fc':102, 't2fc':102},
  {'continent':'South America', 't1fg':-2, 't2fg':22, 't1fc':1, 't2fc':1},
  {'continent':'Other', 't1fg':3, 't2fg':4, 't1fc':5, 't2fc':5},
];

var continentG = svg.selectAll('.cont')
    .data(data)
    .attr('class','cont')
    .enter()
    .append('g');

continentG.data(continents).append('path')
.attr('class', 'continent')
.attr('d', path)
.style('stroke', "#a6a6a6")
.style('fill', function(d) {
  if (d.properties.continent=="South America") {
    return "#003366";
  } else {
    return "none";
  }
});


})

svg.selectAll('.cont')
    .data(data)
    .attr('class','cont')
    .enter()
    .append('g');

var svg = d3.select("body").selectAll(null)
    .data(data)
    .enter()
    .append('svg')
    .attr('width', 300)
    .attr('height', 150)

var map = svg.selectAll(null)
    .data(continents)
    .enter()
    .append('path')
    .attr('class', 'continent')
    .attr('d', path)

map.style('fill', function(d) {
    var thisContinent = d3.select(this.parentNode).datum().continent;
    if (d.properties.continent === thisContinent) {
        return "#003366";
    } else {
        return "none";
    }
});