scatter = {
const outersvg = d3.select(DOM.svg(largura + margin.left + margin.right,
altura + margin.top + margin.bottom))
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.selectAll('circle')
.data(countries1)
.enter()
.append('circle')
.attr('cx', a => xScale(a.life_expect))
.attr('cy', a => yScale(a.fertility))
.attr('r', 3)
.attr('fill', 'blue')
svg.selectAll('text')
.data(countries1)
.enter()
.append('text')
.attr('x', a => xScale(a.life_expect)+6)
.attr('y', a => yScale(a.fertility)-6)
.attr('font-size', '11px')
.attr('font-family', 'sans-serif',)
.attr('fill', 'black')
.attr('font-weight', 'bold')
.text(a => a.country)
svg.append("g")
.attr("transform", "translate(0, " + altura + ")")
.call(xAxis)
svg.append("g")
.call(yAxis)
svg.append("text")
.attr("transform", "translate(" + (largura/2) + "," + (altura +
margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr('font-weight', 'bold')
.text("Expectativa de Vida");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (altura / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr('font-weight', 'bold')
.text("Taxa de Fertilidade");
return outersvg.node()
}