Public
Edited
Feb 24, 2023
chart = {
let svgNode = DOM.svg(width - 40, height - 40);
let svg = d3.select(svgNode).append("g").attr("transform", "translate(" + 20 + "," + 20 + ")");
let simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(1))
.force('x', d3.forceX().x(function(d) {
return xScale(d.Margin);
}))
.force("y", d3.forceY(height / 2).strength(0.05))
.force('collision', d3.forceCollide().radius(6))
.on('tick', function() {
let u = svg.selectAll('circle')
.data(nodes);
u.enter()
.append('circle')
.attr('r', 6)
.style('fill', function(d) {
if (d.Support3 == "Yes") {
return "#3ebcd2";
} else if (d.Support3 =="No") {
return "#e2e2e2";
}
})
.merge(u)
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})
u.exit().remove();
});
svg.append("g")
.call(d3.axisBottom(xScale));
return svgNode;
}
import {BeeswarmChart} from "@d3/beeswarm"
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.
