beeswarm = {
const el = this || DOM.svg(width, height)
const svg = d3.select(el)
// initialize on first call
if (!el.g) {
el.g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
el.g.append("g")
.classed("circles", true)
el.axis = el.g.append("g")
.classed("axis axis--x", true)
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
}
el.axis.call(xAxis)
el.circles = el.g.select("g.circles")
.selectAll("circle")
.data(simulation.nodes(), d => d.id)
el.circles.exit().remove()
var update = el.circles.enter()
.append("circle")
.attr("r", 3)
.attr("stroke", "#e2e2e2")
.attr("stroke-width", 0.7)
el.circles = update
.merge(el.circles)
.transition().duration(1500)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("fill", d => color(d.value))
return el;
}
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.
