charts = {
const mode = 'offset';
const margin = { top: 50, right: 20, bottom: 30, left: 50 };
const width = 928 - margin.left - margin.right;
const height = 4850 - 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);
const y_scale = d3.scaleLinear()
.domain([max_amount,0])
.range([-step, 0]);
const yAxis = d3.axisRight().scale(y_scale).tickValues(d3.range(0, max_amount,2000000000))
.tickFormat(d3.format(".0s"));
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-receive-${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", 'rgba(70, 130, 180, 0.5)')
.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-receive-${index}`);
g.append("g")
.attr("class", "y-axis")
.attr("transform", `translate(0, 50)`)
.call(yAxis);
// Add country names
svg.append("text")
.attr("x", 0)
.attr("y", index * 100 + 40)
.text(countryData.country)
.style("font-size", "12px")
.style("font-family", "Calibri, sans-serif");
});
// Loop through the modifiedDonateData array to create charts for each country
modifiedDonateData.forEach((countryData, index) => {
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${index * 100 + margin.top})`); // Adjust the positioning for donated data
g.append("clipPath")
.attr("id", `clipy-donate-${index}`)
.append("rect")
.attr("width", width)
.attr("height", step);
g.append("defs").append("path")
.attr("id", `path-def-donate-${index}`)
.datum(countryData.data)
.attr("d", area);
g.append("g")
.attr("clip-path", `url(#clipy-donate-${index})`)
.selectAll("use")
.data(overlaps)
.enter().append("use")
.attr("fill", 'rgba(255, 165, 0, 0.5)')
.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-donate-${index}`);
});
// Create a moving rule that follows the mouse.
const rule = svg.append("line")
.attr("stroke", "#000")
.attr("y1", margin.top - 6)
.attr("y2", height - margin.bottom - 1)
.attr("x1", 0.5)
.attr("x2", 0.5);
svg.on("mousemove touchmove", (event) => {
const x = d3.pointer(event, svg.node())[0] + 0.5;
rule.attr("x1", x).attr("x2", x);
});
// Append Axes
svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(xAxis);
// Append Legend
const legend = svg.append("g")
.attr("class", "legend")
.attr("transform", `translate(${width - margin.right}, ${0})`);
legend.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 20)
.attr("height", 20)
.style("fill", 'rgba(70, 130, 180, 0.5)');
legend.append("text")
.attr("x", 30)
.attr("y", 15)
.text("Receipts")
.style("font-size", "12px")
.style("font-family", "Calibri, sans-serif");
legend.append("rect")
.attr("x", 0)
.attr("y", 30)
.attr("width", 20)
.attr("height", 20)
.style("fill", 'rgba(255, 165, 0, 0.5)');
legend.append("text")
.attr("x", 30)
.attr("y", 45)
.text("Donations")
.style("font-size", "12px")
.style("font-family", "Calibri, sans-serif");
return svg.node();
}