chart = {
var svg = d3.create("svg")
.attr("viewBox", [0, 0, canvasWidth, canvasHeight])
let container = svg.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`)
let path = d3.geoPath()
.projection(projection)
let map = container.append("g")
.attr("class","map");
map.selectAll(".geo-path")
.data(countriesMap[0].features)
.enter().append("path")
.attr("class", function(d) {return "geo-path" + " " + d.id;})
.attr("id", function(d) {return d.properties.name;})
.attr("d", path)
.style("stroke-opacity", 1)
.style("fill-opacity", 0.5);
let defs = svg.append("defs");
var filter = defs.append("filter").attr("id", "gooeyCodeFilter");
filter.append("feGaussianBlur")
.attr("in", "SourceGraphic")
.attr("stdDeviation","10")
.attr("color-interpolation-filters","sRGB")
.attr("result","blur");
filter.append("feColorMatrix")
.attr("class", "blurValues")
.attr("in","blur")
.attr("mode","matrix")
.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -5")
.attr("result","gooey");
filter.append("feBlend")
.attr("in", "SourceGraphic")
.attr("in2","gooey")
.attr("operator","atop");
///////////////////////////////////////////////////////////////////////////
//////////////////////////////// Cities ///////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//Put the city locations into the data itself
populations.forEach(function(d,i) {
d.radius = rScale(d.population);
d.x = projection([d.longitude, d.latitude])[0];
d.y = projection([d.longitude, d.latitude])[1];
});
//Wrapper for the cities
let cityWrapper = container.append("g")
.attr("class", "cityWrapper")
.style("filter", "url(#gooeyCodeFilter)");
let cities = cityWrapper.selectAll(".cities")
.data(populations)
.enter().append("circle")
.attr("class", "cities")
.attr("r", function(d) {return d.radius;})
//Place circles at null island
.attr("cx", projection([0,0])[0])
.attr("cy", projection([0,0])[1])
.style("opacity", 1)
//Circle over all others
cityWrapper.append("circle")
.attr("class", "cityCover")
.attr("r", coverCircleRadius)
.attr("cx", projection([0,0])[0])
.attr("cy", projection([0,0])[1])
///////////////////////////////////////////////////////////////////////////
/////////////////////////// Country Labels ////////////////////////////////
///////////////////////////////////////////////////////////////////////////
// //Calculate the centers for each country in radial layout
// let centers = getCenters("country",[canvasWidth,canvasHeight]);
// centers.forEach(function(d) {
// d.y = d.y - 100;
// d.x = d.x + 0;
// });//centers forEach
//Wraper for the country lavels
let labelWrapper = container.append("g")
.attr("class", "labelWrapper");
//Append the country labels
labelWrapper.selectAll(".label")
.data(centers)
.enter().append("text")
.attr("class","label")
.style("opacity", 0)
.attr("transform", d => `translate(${d.x},${d.y-60})`)
.text(d => d.name)
///////////////////////////////////////////////////////////////////////////
/////////////////////////// Set-up the force //////////////////////////////
///////////////////////////////////////////////////////////////////////////
// let force = d3.forceSimulation(d3.selectAll(".cities"))
// .on("tick", tick(centers,"country"));
// force.stop();
return svg.node()
}