{
const svg = d3.select(DOM.svg(width, height))
const radius = 20
const circles = d3.range(10).map(() => {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
}
})
const color = d3.scaleOrdinal().range(d3.schemeCategory10)
function dragstarted(d) {
d3.select(this).raise()
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y)
}
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", radius)
.style("fill", (d, i) => color(i))
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged))
return svg.node()
}