{
let width = 400, height = 400, pad = {x:50,y:50}
let svg = DOM.svg(width,height)
let x_extents = d3.extent(iris, d => d.sepalWidth)
let x_scale = d3.scaleLinear().domain(x_extents).range([0,width-2*pad.x])
let y_scale = d3.scaleLinear().domain(d3.extent(iris, d => d.sepalLength)).range([height-2*pad.y,0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
plot_group.append('rect').attr('width', x_scale.range()[1]).attr('height', y_scale.range()[0])
.attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1)
plot_group.selectAll('circle').data(iris).enter().append('circle')
.attr('cx', d => x_scale(d.sepalWidth)).attr('cy', d => y_scale(d.sepalLength)).attr('r', 4)
.attr('fill', d3.hcl(330,60,50))
plot_group.append('g').attr('id', 'xaxis').attr('transform', 'translate(0,'+y_scale.range()[0]+')').call(d3.axisBottom(x_scale).ticks(5))
plot_group.append('g').attr('id', 'yaxis').call(d3.axisLeft(y_scale).ticks(5))
plot_group.selectAll('#xaxis,#yaxis').select('.domain').remove()
plot_group.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50))
plot_group.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50))
plot_group.select('#xaxis').selectAll('.tick').append('line')
.attr('y1', -y_scale.range()[0]).attr('y2', y_scale.range()[1])
.attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5)
plot_group.select('#yaxis').selectAll('.tick').append('line')
.attr('x1', x_scale.range()[0]).attr('x2', x_scale.range()[1])
.attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5)
plot_group.append('text').text('Sepal Width').attr('text-anchor', 'middle')
.attr('x', d3.mean(x_scale.range())).attr('y', y_scale.range()[0]+33)
plot_group.append('text').text('Sepal Length').attr('text-anchor', 'middle')
.attr('transform', 'translate('+(-30)+','+d3.mean(y_scale.range())+') rotate(270)')
plot_group.selectAll('circle').raise()
console.log('circle selection:',plot_group.selectAll('circle'))
return svg
}