{
const margin = {top: 50, right: 70, bottom: 70, left: 70};
const visWidth = width - margin.left - margin.right;
const visHeight = width - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const y = d3.scalePoint()
.domain(donors)
.range([0, visHeight]);
const y2 = d3.scalePoint()
.domain(recipients)
.range([0, visHeight]);
const leftAxis = d3.axisLeft(y).tickSize(0);
const rightAxis = d3.axisRight(y2).tickSize(0);
g.append("g")
.call(leftAxis)
.call(g => g.selectAll(".domain").remove())
.append("text")
.attr("x", -6)
.attr("y", -30)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Source");
g.append("g")
.attr('transform', `translate(${visWidth},0)`)
.call(rightAxis)
.call(g => g.selectAll(".domain").remove())
.append("text")
.attr("x", 6)
.attr("y", -30)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("Target");
// draw lines
g.append('g')
.selectAll('line')
.data(data0[0].links)
.join('line')
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => y(d.source))
.attr('y2', d => y(d.target))
.attr('stroke-width', d => lineWidth(d.weight))
.attr('stroke-linecap', 'round')
.attr('stroke', 'steelblue')
g.append('g')
.selectAll('line')
.data(data0[1].links)
.join('line')
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => y(d.source))
.attr('y2', d => y(d.target))
.attr('stroke-width', d => lineWidth(d.weight))
.attr('stroke-linecap', 'round')
.attr('stroke', 'orange')
g.append('g')
.selectAll('line')
.data(data0[2].links)
.join('line')
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => y(d.source))
.attr('y2', d => y(d.target))
.attr('stroke-width', d => lineWidth(d.weight))
.attr('stroke-linecap', 'round')
.attr('stroke', 'red')
g.append('g')
.selectAll('line')
.data(data0[3].links)
.join('line')
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => y(d.source))
.attr('y2', d => y(d.target))
.attr('stroke-width', d => lineWidth(d.weight))
.attr('stroke-linecap', 'round')
.attr('stroke', 'green')
g.append('g')
.selectAll('line')
.data(data0[4].links)
.join('line')
.attr('x1', 0)
.attr('x2', visWidth)
.attr('y1', d => y(d.source))
.attr('y2', d => y(d.target))
.attr('stroke-width', d => lineWidth(d.weight))
.attr('stroke-linecap', 'round')
.attr('stroke', 'purple')
return svg.node();
}