{
const w = 400;
const h = 300;
const svg = DOM.svg(w,h);
const margin = {top: 20, right: 20, bottom: 20, left: 30}
const innerW = w - margin.right - margin.left;
const innerH = h- margin.top - margin.bottom;
const g = d3.select(svg).append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const xAxisG = g.append('g')
.attr('transform', "translate(0," + innerH + ")");
const yAxisG = g.append('g');
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale);
const color = d3.scaleOrdinal(['red','green','blue']);
xScale
.domain(d3.extent(data, xValue))
.range([0, innerW]);
yScale
.domain(d3.extent(data, yValue))
.range([innerH, 0]);
const circles = g
.selectAll('circle')
.data(data)
.enter()
.append('circle')
circles
.attr('cx', d=>xScale(xValue(d)))
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
.attr('fill', (d)=>color(d.species))
.attr('opacity', 0.7)
xAxisG.call(xAxis)
yAxisG.call(yAxis)
return svg
}