scatter = {
let svg, xg, yg, lg;
if(this) {
svg = d3.select(this)
xg = svg.select(".x-axis")
yg = svg.select(".y-axis")
lg = svg.select(".legend")
} else {
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
xg = svg.append("g").classed("x-axis", true)
yg = svg.append("g").classed("y-axis", true)
lg = svg.append("g").classed("legend", true)
}
svg.selectAll("circle")
.data(penguins)
.join(enter => {
return enter.append("circle")
.attr("cx", d => x(d[xdim]))
.attr("cy", d => y(d[ydim]))
},
update => {
return update
})
.attr("fill", d => color(d.species))
.attr("r", 5)
.transition()
.duration(2000)
.ease(d3.easeCubic)
.attr("cx", d => x(d[xdim]))
.attr("cy", d => y(d[ydim]))
xg
.attr("transform", `translate(0, ${height - margin})`)
.transition().duration(2000)
.call(xAxis)
yg
.attr("transform", `translate(${margin},0)`)
.transition().duration(2000)
.call(yAxis)
lg
.attr("transform", `translate(${margin + 10}, 0)`)
.call(legend)
return svg.node()
}