charts = {
const mode = 'offset';
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 928 - margin.left - margin.right;
const height = 2000 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom));
const xAxis = d3.axisBottom().scale(x);
modifiedReceiveData.forEach((countryData, index) => {
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${index * 100 + margin.top})`);
g.append("clipPath")
.attr("id", `clipy-${index}`)
.append("rect")
.attr("width", width)
.attr("height", step);
g.append("defs").append("path")
.attr("id", `path-def-${index}`)
.datum(countryData.data)
.attr("d", area);
g.append("g")
.attr("clip-path", `url(#clipy-${index})`)
.selectAll("use")
.data(overlaps)
.enter().append("use")
.attr("fill", d => color_received(d.index))
.attr("transform", d => mode === "mirror" && d.index < 0
? `scale(1,-1) translate(0, ${d.index * step})`
: `translate(0,${(d.index + 1) * step})`)
.attr("href", `#path-def-${index}`);
// Add country names
svg.append("text")
.attr("x", 0) // Adjust the x position for the country name
.attr("y", index * 100 + 30) // Adjust the y position for the country name
.text(countryData.country)
.style("font-size", "12px")
.style("font-family", "Calibri, sans-serif");
;
// Append Axes last
if (index === 0) {
svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`) // Translate the x-axis
.call(xAxis);
}
});
return svg.node();
}