chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 1000, 500]);
const g = svg.append("g");
const path = d3.geoPath();
const color = d3.scaleOrdinal([
'#66C5CC',
'#F6CF71',
'#F89C74',
'#DCB0F2',
'#87C55F',
'#9EB9F3',
'#FE88B1',
'#C9DB74',
'#8BE0A4',
'#B497E7',
'#D3B484'
]);
const mycountries = topojson.feature(
world_pop_cartogram,
world_pop_cartogram.objects.countries
).features;
g.append("g")
.selectAll("path")
.data(mycountries)
.join("path")
.attr("stroke", "#555")
.attr("stroke-width", 1.3333)
.attr("vector-effect", "non-scaling-stroke")
.attr("fill", (d, i) => color(i))
.attr("d", path);
svg.call(
d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))
);
return svg.node();
}