{
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', (visHeight * 3) + margin.top + margin.bottom);
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const cells = g.append('g')
.selectAll('g')
.data(grid_data)
.join('g')
.attr('class', 'cell')
.attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`);
cells.append('path')
.attr('d', d => country_to_scale_and_area[d.country].area(d.deltas))
.attr('fill', 'steelblue')
cells.append('text')
.attr('text-anchor', 'start')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('font-weight', 'bold')
.attr('dominant-baseline', 'middle')
.attr('x', 5)
.text(d => d.country)
cells.append("line")
.attr("x1", 0)
.attr("y1", d => country_to_scale_and_area[d.country].y(0))
.attr("x2", col.bandwidth())
.attr("y2", d => country_to_scale_and_area[d.country].y(0))
.style("stroke", "black")
cells.each(function(d) {
const group = d3.select(this);
const yAxis = d3.axisLeft(country_to_scale_and_area[d.country].y)
.ticks(3)
.tickFormat(custom_format)
group.call(yAxis)
.call(g => g.select('.domain').remove())
});
const xAxes = cells.append('g')
.attr('transform', d => `translate(0,${row.bandwidth()})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'))
return svg.node();
}