function scatterMouse(data, {
width = 640,
height = 400,
margin = 50,
x = (d) => d.bill_length_mm,
y = (d) => d.flipper_length_mm,
} = {}) {
const xScale = d3.scaleLinear()
.domain(d3.extent(data, x))
.range([margin, width - margin])
const yScale = d3.scaleLinear()
.domain(d3.extent(data, y))
.range([height - margin, margin])
let svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xScale(x(d)))
.attr("cy", d => yScale(y(d)))
.attr("fill", d => colorScale(d.species))
.attr("r", 5)
.style("cursor", "pointer")
.on("mouseover", (evt, d) => {
tooltip.style("display", "")
tooltip.attr("x", evt.layerX + 10)
.attr("y", evt.layerY + 5)
.text(d.species)
svg.property("value", d)
.dispatch("input")
})
.on("mouseout", (evt, d) => {
tooltip.style("display", "none")
})
.on("click", (evt, d) => {
console.log("clicked!", evt, d)
})
let tooltip = svg.append("text")
.style("display", "none")
.style("pointer-events", "none")
let domElement = svg.node()
return domElement
}