{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
svg
.append("g")
.append("path")
.datum(sphere)
.attr("fill", " #a9daeb")
.attr("d", path);
svg
.append("g")
.append("path")
.datum(d3.geoGraticule10())
.attr("d", path)
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", 0.8)
.style("stroke-opacity", 0.5)
.style("stroke-dasharray", 2);
svg
.append("g")
.selectAll("path")
.data(world.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", "#d6b987")
.attr("d", path);
svg
.append("g")
.attr("fill", "#e04a28")
.attr("fill-opacity", 0.9)
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll("circle")
.data(gdp.sort((a, b) => d3.descending(a.pib2018, b.pib2018)))
.join("circle")
.attr("transform", (d) => `translate(${coordsbyid.get(d.id)})`)
.attr("r", (d) => radius(d.pib2018));
return svg.node();
}