chart = {
const width = 1000,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width- 50, height- 50]);
var projection = d3
.geoMercator()
.fitSize([width - 100, height - 100], wb_adm0_boundary_lines_10m_lowres);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path3")
.data(wb_coastlines_10m_lowres.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "black")
.style("fill-opacity", "1")
.style('stroke-opacity','0.5')
.style("stroke-width", '0.5')
.style("stroke", "rgb(0,0,0)")
var cir = svg.selectAll("circle")
.data(mmap)
.enter()
.append("circle")
.attr("r", "3")
.attr("cx", function(d) {return projection([d.Long,d.Lat])[0]})
.attr("cy", function(d) {return projection([d.Long,d.Lat])[1]})
.style("fill", "magenta")
.style("fill-opacity", "1")
.style('stroke-opacity','1')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
return svg.node();
}