ten_out_of_100 = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const wrapper = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
wrapper.append('g')
.selectAll('g')
.data(people_position)
.join('g')
.attr('transform', d => `translate(${x(d[0])}, ${y(d[1])})`)
.call(g => g.append('circle')
.attr('cx', sizeCircle / 2)
.attr('cy', sizeCircle / 2)
.attr('r', 15)
.attr('fill', d => {
if (d[0] <= 9 & d[1] <= 0) {
return '#3490DC'
}
return 'none'
})
.attr('fill-opacity', .2))
.call(g => g.append('image')
.attr('xlink:href', 'https://image.flaticon.com/icons/svg/522/522400.svg')
.attr('width', sizeCircle)
.attr('height', sizeCircle)
.attr('stroke', 'blue'));
return svg.node();
}