Published
Edited
Aug 4, 2018
Insert cell
Insert cell
{
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()
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more