{
const canvas = {
width: 350,
height: 350,
margin: {
top: 10,
right: 20,
bottom: 25,
left: 25,
},
};
const x = d3.scaleLinear()
.domain([d3.min(datasetFiltered, d => d[x_column]), d3.max(datasetFiltered, d => d[x_column])])
.range([canvas.margin.left, canvas.width - canvas.margin.right]);
const y = d3.scaleLinear()
.domain([d3.min(datasetFiltered, d => d[y_column]), d3.max(datasetFiltered, d => d[y_column])])
.range([canvas.height - canvas.margin.bottom, canvas.margin.top]);
const svg = d3.select(DOM.svg(canvas.width, canvas.height));
svg
.append('g')
.attr('transform', `translate(0, ${canvas.height - canvas.margin.bottom})`)
.call(d3.axisBottom(x));
svg
.append('g')
.attr('transform', `translate(${canvas.margin.left}, 0)`)
.call(d3.axisLeft(y));
svg.append('g')
.selectAll('dot')
.data(datasetFiltered)
.enter()
.append('circle')
.attr('cx', d => x(d[x_column]))
.attr('cy', d => y(d[y_column]))
.attr('r', 3)
.style('fill', 'black')
return svg.node();
}